vue wechat sharing (actual battle)

Today, I met the demand of wechat sharing. Generally speaking, it's relatively simple, but I still met a hypothetical pit (really hypothetical)
api address

1. way of thinking

  • Step 1: bind domain name
  • Import JS file
  • Inject permission validation configuration through config interface (wechat has this step anyway)
  • Successfully verified through the ready interface processing
  • Handling failed validation through the error interface

2. implementation

1. bind the domain name, bind the domain name in the background of the public number, so the final test must be online (the environment can be penetrated through the internal network, so it is easy to debug, and do not need to test the environment every time).

2. Import in index.html file / / note the protocol

3. Inject the permission validation configuration through the config interface. The following five parameters are returned to you through the request background. Note: the URLs of the current page are provided to the background in this interface, so they can generate usable URLs. The format of the URLs is as follows: url (the url of the current page does not contain ා and its later parts), so pay attention to the Vue router mode (inject the permission validation configuration through the config interface, jsApiList is the calling event, which is included in Appendix 2 of the api document)

      debug: false, // Whether to turn on debugging mode
      appId: appId, //appid
      timestamp: timestamp, // time stamp 
      nonceStr: nonceStr, // Random string, only this is the hump 
      signature: signature, // autograph
      jsApiList: [
      ] // List of JS interfaces to be used

    // Determine whether the current client version supports the specified JS interface. This step is optional
      jsApiList: [
      ], // List of JS interfaces to be tested. See Appendix 2 for list of all JS interfaces,
      success: function(res) {
        // Returned in the form of key value pairs. The available api value is true, not false
        // For example: {"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}

   ![WeChat share](

    // Successfully verified through the ready interface processing
    wx.ready(function() {
      const share = {
        title: mainTitle,   // Shared title
        desc: subTitle,     // Descriptive information
        imgUrl: smallIcons, // Small icons for sharing
        link: url,          // Shared removed url
        success: function() {
          dosometing();     // Share success, what to do after success
        cancel: function() {
          dosometing();     // Share cancellation, what to do after cancellation
      wx.onMenuShareAppMessage(share); // WeChat friends
      wx.onMenuShareTimeline(share); // Wechat Moments
      wx.onMenuShareQQ(share); // QQ
      wx.onMenuShareQZone(share); // QQ Zone
      wx.onMenuShareWeibo(share); // Tencent micro-blog

    // If it fails, get the failure information 
    wx.error(function(res) {
      console.log("error", res);

3. Imaginary pit

When I look at other people's sharing, click to share has the above guide map (I thought it was brought by the official website), but I did not have a guide map. At first, I thought something was wrong with my step. Later, I found that this map was added by myself. Click to share, open this mask, and remove this mask in the successful callback. A kind of


Tags: Javascript network Vue github

Posted on Mon, 02 Dec 2019 11:39:19 -0500 by j4v1