demand

Recently, we are doing a project to share the activities of collecting good books, to get users'personal information and union ID, and to induce users to share it with friends or circles of friends, so as to achieve the goal of fission. In the process of doing this, I met some pits, so I'll sum up.

Technical proposal

Use Wechat JS-SDK to customize sharing to friends and circles of friends

Implementation steps

1. To realize the custom sharing function of Wechat H5 web page, we must be familiar with it first. Wechat Public Platform Development Document Specific documents are very detailed. Here are the points that need to be noted. Don't forget to bind the developer's rights, as well as the js security domain name. Otherwise, you may report redirect_uri parameter error.

2. First of all, we usually do Wechat H5 web page activities, which need to obtain the user's personal information. This requires user authorization. There are two ways of general authorization, one is silent authorization, the other is web authorization, which is very detailed in the development document of Wechat.

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

The general web authorization process is divided into four steps:

(1) Guiding users to access authorization page to agree to authorization and obtain code

(2) Exchange code for access_token (unlike access_token in basic support)

If necessary, developers can refresh access_token to avoid expiration.

(4) Obtain user's basic information (openid, UnionID, personal avatar, gender, provinces, cities, Weixin nicknames, etc.) through web authorization.

3. The following is the specific implementation code. Let's talk about the general idea. By judging whether the parameters are opened in the Wechat browser and whether the user is authorized, we redirect to the interface of Wechat to get the code and return the basic information of the user through the interface to the back end.

// User authorization
 if (this.$route.query.from) {
      // Skip Wechat Page
        let _nowUrl = window.location.href.split("?")[0] +`?pictureId=${this.$route.query.pictureId}`; // Parameter splicing
        let _shareUrl = `https://Open.weixin.qqq.com/connect/oauth2/authorize?Appid=Wechat public number APPID&redirect_uri=${encodeURIComponent(_nowUrl)}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect';
        window.location.href = _shareUrl; // Redirect to this defined URL
    }
    // Getting User Information through code
    if (this.$route.query.code) {
      let _code = this.$route.query.code;
      this.handleWechatMsg(_code);
    }

4. The next step is how to customize sharing to friends or circles of friends, also according to calls. Wechat Development Document Say configuration and invocation. After calling the share interface successfully, the share api is called and the callback function is called to execute the jump page. There is a restriction on Wechat. If the user cancels the call when clicking on the share, the default is to take the successful callback function, which is unable to get the status of the final share success. Here's the code for sharing

// Share with friends or circles 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, // Mandatory, time stamp for signature generation
                nonceStr: res.data.content.nonceStr, // Compulsory, generating random strings of signatures
                signature: res.data.content.signature, // Must fill in, sign
                jsApiList: [
                  "onMenuShareTimeline",
                  "onMenuShareAppMessage"
                  // "updateAppMessageShareData",
                  // "updateTimelineShareData"
                ]
              });
              // wx.ready(function() {
              //Share in the circle of friends
              wx.onMenuShareTimeline({
                title: param.title, // Share title
                link: param.link, // Share links. The link domain name or path must be the same as the public number JS secure domain name corresponding to the current page.
                imgUrl: param.imgUrl, // Share Icon
                success: function() {
                  // The user clicks on the callback function that executes after sharing
                 that.$Message.message("Share success!");
                  that.toRouter();
                }
              });
              //Share with friends
              wx.onMenuShareAppMessage({
                title: param.title, // Share title
                desc: param.desc, // Sharing description
                link: param.link, // Share links. The link domain name or path must be the same as the public number JS secure domain name corresponding to the current page.
                imgUrl: param.imgUrl, // Share Icon
                type: param.type, // Sharing type, music, video or link, not default to link
                dataUrl: param.dataUrl, // If type is music or video, provide data links, which are empty by default
                success: function() {
                  // The user clicks on the callback function that executes after sharing
                  that.$Message.message("Share success!");
                  that.toRouter();
                }
              });

              // wx.updateTimelineShareData({
              //   title: param.title, // share title
              //   link: param.link, // shared link, the link domain name or path must be the same as the public number JS security domain name corresponding to the current page.
              //   imgUrl: param.imgUrl, // share icons
              //   success: function(res) {
              //     // Successful setup
              //     that.$Message.message("Setup Successful!");
              //     that.toRouter();
              //   }
              // });

              // // Share with friends
              // wx.updateAppMessageShareData({
              //   title: param.title, // share title
              //   desc: param.desc, // shared description
              //   link: param.link, // shared link, the link domain name or path must be the same as the public number JS security domain name corresponding to the current page.
              //   imgUrl: param.imgUrl, // share icons
              //   success: function(res) {
              //     // Successful setup
              //     that.$Message.message("Setup Successful!");
              //     that.toRouter();
              //   }
              // });
              // });
              wx.error(function(res) {
                console.log("Information returned from validation failure:", res);
              });
          } else {
            console.log(res.data.message);
          }
        })
        .catch(err => {
          this.$Message.message(error);
        });
    },

summary

The pit here is that you can't write four sharing button events at the same time when calling the sharing event. If you write them all, you will have gone to the Sharing success Callback function before you click the sharing button on Android. Here's why you write four sharing button events, because you find that if you don't write down the two onMenuShareTime events that will be abolished. Line and onMenuShareAppMessage will encounter problems that can not be shared on Android, so annotate the two new sharing button events updateAppMessageShareData and updateTimelineShareData to share them. Both iOS and Android will have no problems.

I found that the reason for this might be the order of execution of the old and new shared events, that is, when calling the new shared button, it had to be executed in wx. read first, and the soon-to-be-discarded interface was not needed.