Recently, the company made an H5 page for students to vote. It is mainly used on WeChat and needs to add the WeChat sharing function;
This article mainly records the matters needing attention when calling the WeChat sharing interface;
1. For the angular1 framework used in the front-end, you first need to introduce the WeChat interface file on the index page;
<script src=http://res.wx.qq.com/open/js/jweixin-1.2.0.js></script>
2. Write the WeChat sharing function in the myApp.run file. Note that this function needs to obtain and parse the URL of the current page, and then send it to the backend to generate the corresponding signature and directly upload the code;
// WeChat share function function wxShare() { var url = $location.absUrl().split('#')[0]; wxServices.postWxShare(url).then(function (res) { if (res.data. code == 0) { var respanse = res.data.data; wx.config({ debug: false, // When debugging mode is turned on, the return values of all api calls will be alerted on the client side. If you want to view the incoming parameters, you can open it on the PC side. The parameter information will be printed through the log, and appId will only be printed on the PC side. respanse.appId, timestamp: respanse.timestamp, // Required, generate the timestamp of the signature nonceStr: respanse.nonceStr, // Required, generate the random string signature of the signature: respanse.signature,//Required, signature jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone']//Required, list of JS interfaces that need to be used}); } }) }After parsing the current URL, send it to the back-end interface. The back-end needs to return the appId, timestamp, random string and signature, and then add the interface list (jsApiList) manually as needed. Note that it is in the form of an array. I only need it here. Need to call the sharing interface;
When debugging, you can change debug to true, so that every time the WeChat interface is called, the interface information will be alerted, making it easy to check whether the interface call is normal;
3. After this function, customize the sharing content, the code is as follows;
wx.ready(function () { var obj = { title: 'SPBCN team competition has started voting!', // Share title desc: 'SPBCN team competition has started voting, come and cheer for us!', // Share Description link: 'http://dev.spbcn.org/wechat-vote-phone/redirect.html', // Share link, the link domain name or path must be consistent with the public account JS security domain name corresponding to the current page // This link is a redirect link because it is necessary to obtain the user code, but this link cannot directly write the link to WeChat to obtain the code. // Therefore, you need to click and reload the new page to implement redirection and reopen the WeChat link to obtain the code. , to implement the function of obtaining user information; imgUrl: 'http://cdn.spbcn.org/img/logo-image.png', // Share icon fail: function (res) { alert(JSON.stringify(res)) ; } }; // 2.1 Monitor sharing to friends, button clicks, customized sharing content and sharing result interface wx.onMenuShareAppMessage(obj); // 2.2 Monitor sharing to Moments button clicks, customized sharing content and sharing result interface wx.onMenuShareTimeline (obj); // 2.3 Monitor share to QQ button clicks, customize sharing content and sharing result interface wx.onMenuShareQQ(obj); // 2.4 Monitor the click of the share button on Weibo, customize the sharing content and the sharing result interface wx.onMenuShareWeibo(obj); // 2.5 Monitor the click of the share button on QZone, customize the sharing content and the sharing interface wx.onMenuShareQZone(obj); })wx.ready is automatically run after wx.config. I define a general object for sharing content, and then call it directly. You can also define different content for sharing friends, circle of friends, Weibo, etc. as needed. Please check the WeChat interface documentation for details;
The main emphasis is on the sharing link. The link must be under the JS secure domain name set by your official account, otherwise the sharing cannot be successful;
The symptoms of sharing failure are that the sharing link image cannot load your customized image, and the sharing title is incorrect;
5. My project is for voting, so I need to get the user code every time I click in. If you just share an article and don’t need user information, just change the link to your article link;
6. For the voting category, I have made a special treatment here, that is, redirecting the link. Everyone knows that there are two ways for H5 to obtain WeChat user information. One is to follow the WeChat official account; the other prompts the user to obtain the user's public information. The user clicks OK. However, both of these need to be spliced into a special WeChat link according to WeChat’s requirements. Therefore, the domain name comes with WeChat and is not the JS safe domain name of our own public account;
7. Therefore, for the shared link, if you still need to obtain the user code, you must use other methods to achieve it. What I used is to add a blank page, and after the page is loaded, jump to WeChat to obtain the code link, http:/ /dev.spbcn.org/wechat-vote-phone/redirect.html This link is a blank page. The code for this page is as follows;
window.onload = function () { // The redirect link is the same as the link to obtain the user code in the WeChat official account window.location.href=https://open.weixin.qq.com/connect/oauth2/authorize?appid=public account 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. This method has disadvantages, that is, it adds an extra blank page. I haven’t thought of a good way yet. Everyone is welcome to leave a message;
9. If this step is not added, the shared link will display normally, but the code cannot be obtained, and the backend cannot determine the user, resulting in the inability to restrict users from voting;
The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.