최근 회사에서는 학생들이 투표할 수 있는 H5 페이지를 만들었습니다. 이 페이지는 주로 WeChat에서 사용되며 WeChat 공유 기능을 추가해야 합니다.
이 글은 주로 WeChat 공유 인터페이스를 호출할 때 주의해야 할 사항을 기록합니다.
1. 프런트엔드에 사용되는 angle1 프레임워크의 경우 먼저 인덱스 페이지에 WeChat 인터페이스 파일을 도입해야 합니다.
<script src=http://res.wx.qq.com/open/js/jweixin-1.2.0.js></script>
2. myApp.run 파일에 WeChat 공유 기능을 작성합니다. 이 기능은 현재 페이지의 URL을 가져와 구문 분석한 다음 이를 백엔드로 보내 해당 서명을 생성하고 코드를 직접 업로드해야 합니다.
// WeChat 공유 기능 function wxShare() { var url = $location.absUrl().split('#')[0] wxServices.postWxShare(url).then(function (res) { if (res.data. 코드 == 0) { var respanse = res.data.data; wx.config({ debug: false, // 디버깅 모드가 켜져 있으면 모든 API 호출의 반환 값이 클라이언트 측에 경고됩니다. 들어오는 매개변수를 보려면 PC 측에서 열면 매개변수 정보가 인쇄됩니다. log 및 appId는 PC 측에서만 인쇄됩니다. respanse.appId, timestamp: respanse.timestamp, // 필수, 서명의 타임스탬프 생성 nonceStr: respanse.nonceStr, // 필수, 임의의 문자열 서명 생성 서명: respanse.signature,//필수, 서명 jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone']//필수, 사용해야 하는 JS 인터페이스 목록}) } } ) }현재 URL을 구문 분석한 후 백엔드 인터페이스로 보내면 백엔드에서 appId, 타임스탬프, 임의 문자열 및 서명을 반환한 다음 필요에 따라 인터페이스 목록(jsApiList)을 수동으로 추가해야 합니다. 여기서는 공유 인터페이스만 호출하면 됩니다.
디버깅할 때 디버그를 true로 변경할 수 있습니다. 그러면 WeChat 인터페이스가 호출될 때마다 인터페이스 정보가 경고되어 인터페이스 호출이 정상인지 쉽게 확인할 수 있습니다.
3. 이 기능 이후 공유 콘텐츠를 사용자 정의합니다. 코드는 다음과 같습니다.
wx.ready(function () { var obj = { title: 'SPBCN 팀 대회 투표가 시작되었습니다!', // 제목 공유 desc: 'SPBCN 팀 대회 투표가 시작되었습니다. 와서 응원해주세요!', // 설명 공유 link: 'http://dev.spbcn.org/wechat-vote-phone/redirect.html', // 링크 공유, 링크 도메인 이름 또는 경로는 현재에 해당하는 공개 계정 JS 보안 도메인 이름과 일치해야 합니다. 페이지 // 이 링크는 사용자 코드를 획득해야 하기 때문에 리디렉션 링크이지만, 이 링크는 코드를 얻기 위해 WeChat에 직접 링크를 작성할 수 없습니다. // 따라서 리디렉션을 구현하고 다시 열려면 새 페이지를 클릭하고 다시 로드해야 합니다. 사용자 정보를 얻는 기능을 구현하기 위한 WeChat 링크: 'http://cdn.spbcn.org/img/logo-image.png', // 공유 아이콘 실패: function (res) { 경고(JSON.stringify(res)) } }; // 2.1 친구 공유 모니터링, 버튼 클릭, 맞춤형 공유 콘텐츠 및 공유 결과 인터페이스 wx.onMenuShareAppMessage(obj) // 2.2 모멘트 버튼 클릭, 맞춤형 공유 콘텐츠 및 공유 결과 인터페이스 모니터링 wx.onMenuShareTimeline(obj) ; // 2.3 QQ 버튼 클릭에 대한 공유 모니터링, 공유 콘텐츠 및 공유 결과 인터페이스 wx.onMenuShareQQ(obj) // 2.4 웨이보 공유 버튼 클릭 모니터링, 공유 콘텐츠 및 공유 결과 인터페이스 wx.onMenuShareWeibo(obj); // 2.5 QZone 공유 버튼 클릭 모니터링, 공유 콘텐츠 및 공유 인터페이스 wx 맞춤 설정. onMenuShareQZone(obj) })wx.ready는 wx.config 이후에 자동으로 실행되는데, 콘텐츠 공유를 위한 일반 객체를 정의한 후, 필요에 따라 친구 공유, 친구 서클, 웨이보 등 다양한 콘텐츠를 정의할 수도 있습니다. 자세한 내용은 WeChat 인터페이스 문서를 참조하세요.
주요 강조점은 공유 링크입니다. 링크는 공식 계정에서 설정한 JS 보안 도메인 이름 아래에 있어야 합니다. 그렇지 않으면 공유가 성공할 수 없습니다.
공유 실패의 증상은 공유 링크 이미지가 사용자 정의된 이미지를 로드할 수 없고 공유 제목이 올바르지 않다는 것입니다.
5. 내 프로젝트는 투표용이므로 클릭할 때마다 사용자 코드를 받아야 합니다. 기사를 공유하기만 하고 사용자 정보가 필요하지 않은 경우 링크를 기사 링크로 변경하면 됩니다.
6. 투표 카테고리에 대해서는 링크를 리디렉션하는 특별한 조치를 취했습니다. H5가 WeChat 사용자 정보를 얻는 방법에는 두 가지가 있습니다. 하나는 WeChat 공식 계정을 따르는 것입니다. 사용자의 공개 정보를 얻으려면 사용자가 확인을 클릭합니다. 그러나 이 두 가지 모두 WeChat의 요구 사항에 따라 특수 WeChat 링크에 연결되어야 합니다. 따라서 도메인 이름은 WeChat과 함께 제공되며 자체 공개 계정의 JS 안전한 도메인 이름이 아닙니다.
7. 따라서 공유 링크의 경우 여전히 사용자 코드를 얻으려면 다른 방법을 사용해야 합니다. 제가 사용한 방법은 빈 페이지를 추가하고 페이지가 로드된 후 WeChat으로 이동하여 획득하는 것입니다. 코드 링크, http://dev.spbcn.org/wechat-vote-phone/redirect.html 이 링크는 빈 페이지입니다. 이 페이지의 코드는 다음과 같습니다.
window.onload = 함수() { // 리디렉션 링크는 WeChat 공식 계정 window.location.href=https://open.weixin.qq.com/connect/oauth2/authorize?appid=public 계정 appid&redirect_uri에서 사용자 코드를 얻기 위한 링크와 동일합니다. =http%3A%2F%2Fdev.spbcn.org%2Fwechat-vote-phone?type=weixin&scope=snsapi_userinfo&response_type=code&state=STATE#wechat_redirect }8. 이 방법에는 단점이 있습니다. 즉, 빈 페이지가 추가된다는 것입니다. 아직 좋은 방법은 생각나지 않습니다. 누구나 메시지를 남길 수 있습니다.
9. 이 단계를 추가하지 않으면 공유 링크는 정상적으로 표시되지만 코드를 얻을 수 없으며 백엔드에서 사용자를 확인할 수 없으므로 사용자의 투표를 제한할 수 없습니다.
위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.