Demand

Recently, I have been doing a project requirement, sharing and collecting books, obtaining the user’s personal information and unionID, and inducing users to share them with friends or circles of friends, so as to achieve the purpose of splitting and pulling new ones. In the process of doing it, I met some pits, so I came back to summarize them.

Technical solutions

Use WeChat JS-SDK to customize sharing to friends and sharing to circle of friends

Implementation steps

1. To realize the custom sharing function of WeChat H5 webpage, one must first get familiar with itWeChat Public Platform Development DocumentThe specific documents are very detailed. here are some points to note. don’t forget to bind developer permissions and bind js security domain name. otherwise, it is possible to report the error of redirect_uri parameter.

2. First of all, we are generally doing WeChat H5 webpage activities, and we need to obtain the user’s personal information, which requires user authorization. Generally, there are two kinds of authorization, one is silent authorization and the other is webpage authorization. This is detailed in WeChat development documents.

For users who have paid attention to the public number, if the user enters the web page authorization page of the public number from the session or custom menu of the public number, even if scope is snsapi_userinfo, it is silent authorization and the user has no perception

The general web page authorization process is divided into four steps:

(1) guide the user to enter the authorization page to approve authorization and obtain code

(2) Exchange access_token for webpage authorization through code (different from access_token in basic support)

(3) if necessary, developers can refresh the web page authorization access_token to avoid expiration

(4) Obtain the basic information of users (openid, UnionID, personal portrait, gender, province and city, WeChat nickname, etc.) through webpage authorization

3. The following is the specific implementation code, giving a general idea. By judging whether the parameters are opened in WeChat browser, whether the user is authorized, and redirecting to WeChat interface, the basic information of the user is returned to the back end through the interface after receiving the code.

//user authorization
 if (this.$route.query.from) {
 //Jump to Wechat page
 let _nowUrl = window.location.href.split("?"  )[0] +`?  pictureId=${this.$route.query.pictureId}`;  //parameter splicing
 let _shareUrl = ` https://open.weixin.qq.com/connect/oauth2/authorize?  Appid= WeChat public number APPID & REDIRECT _ URI = $ {EncoderiComponent (_ NOURL)} & RESPONSE _ TYPE = CODE & SCOPE = SNSAPI _ USERINfo & STATE = STATE # WECHAT _ REDIRECT`;
 window.location.href = _shareUrl;  //Redirect to this defined URL
 }
 //Get User Information via code
 if (this.$route.query.code) {
 let _code = this.$route.query.code;
 this.handleWechatMsg(_code);
 }

4, the next is how to customize sharing to friends or circle of friends, also according to the callWechat development documentOn the said configuration and call. After calling the sharing interface successfully, start calling the sharing api, and the callback function after calling successfully executes page skipping. WeChat has restrictions here. If the user cancels when clicking on sharing, the default is to use the success successful callback function, and the final sharing success status cannot be obtained. The following is the specific code for sharing

//Share with friends or circle of friends
 wxChatShare(param) {
 var that = this;
 let _url = encodeURIComponent(param.url);
 apiUrl.wechatConfig(_url).then(res => {
 if (res.data.code == 200) {
 wx.config({
 debug: false,
 appId: res.data.content.appid,
 Timestamp: res.data.content.timestamp,//required, timestamp to generate signature
 Noncestr: res.data.content.nonccestr,//required to generate a signed random string
 Signature: res.data.content.signature,//required, signature
 jsApiList: [
 "onMenuShareTimeline",
 "onMenuShareAppMessage"
 // "updateAppMessageShareData",
 // "updateTimelineShareData"
 ]
 });
 // wx.ready(function() {
 //Share with friends
 wx.onMenuShareTimeline({
 Title: param.title.//share title
 Link: param.link, // share the link. the domain name or path of the link must be consistent with the public number JS security domain name corresponding to the current page.
 ImgUrl: param.imgUrl, // share icon
 success: function() {
 //The user clicked the callback function executed after sharing
 That.$Message.message ("share success!"  );
 that.toRouter();
 }
 });
 //Share with friends
 wx.onMenuShareAppMessage({
 Title: param.title.//share title
 Desc: param.desc.//share description
 Link: param.link, // share the link. the domain name or path of the link must be consistent with the public number JS security domain name corresponding to the current page.
 ImgUrl: param.imgUrl, // share icon
 Type: param.type, // share type, music, video or link; default is link if not filled in.
 Dataurl: param.dataurl.//if type is music or video, provide a data link, which is empty by default.
 success: function() {
 //The user clicked the callback function executed after sharing
 That.$Message.message ("share success!"  );
 that.toRouter();
 }
 });
 
 // wx.updateTimelineShareData({
 //title: param.title.//share title
 // link: param.link, // share the link, and the domain name or path of the link must be consistent with the public number JS security domain name corresponding to the current page.
 // imgUrl: param.imgUrl, // share icon
 //   success: function(res) {
 ////set successfully
 // that.$Message.message ("setup succeeded!"  );
 //     that.toRouter();
 //   }
 // });
 
 ////Share with friends
 // wx.updateAppMessageShareData({
 //title: param.title.//share title
 //desc: param.desc.//share description
 // link: param.link, // share the link, and the domain name or path of the link must be consistent with the public number JS security domain name corresponding to the current page.
 // imgUrl: param.imgUrl, // share icon
 //   success: function(res) {
 ////set successfully
 // that.$Message.message ("setup succeeded!"  );
 //     that.toRouter();
 //   }
 // });
 // });
 wx.error(function(res) {
 Log ("information returned from validation failure:", res ");
 });
 } else {
 console.log(res.data.message);
 }
 })
 .catch(err => {
 this.$Message.message(error);
 });
 },

Summary

The comparison pit encountered here is that when sharing events are called, four sharing button events cannot be written at the same time. If all of them are written, the sharing success callback function will already be started before the sharing button is clicked on Android. Here is why four sharing button events are written. Because we found that if we don’t write down the two onMenuShareTimeline and onMenuShareAppMessage that will be scrapped, we will encounter the problem that they cannot share on Android, so we can share them by annotating the two new sharing button events updateAppMessageShareData and updateTimelineShareData, and both iOS and Android will be fine.

I found that the reason for this is probably the execution sequence of the old and new sharing events, that is, when calling the new sharing button, it must be executed at wx.ready first, while the interface that is about to be abandoned is not needed.