🎁 Solve the wechat secondary sharing problem/wX-SDK

Solve the wechat secondary sharing does not show the summary and pictures from app sharing to wechat after sharing again into a link

1, wechat certified public account binding domain name

Wechat public account platform >>>> public account setting – Js interface security domain name is filled in function setting

You need to download the MP_verify_EZhQkscUv44pvLNO. TXT file to the root directory of the Web server

2. Introduce JS files

• In index.html

<script src="/ / res.wx.qq.com/open/js/jweixin-1.4.0.js" charset="utf-8" async="async"></script>
Copy the code

• or

npm install weixin-js-sdk

import wx from 'weixin-js-sdk'/ / referenceCopy the code

3. The background needs to be returnedAppid, TIMESTAMP (timestamp of signature generation), nonceStr (random string of signature), Signature (signature)

The front-end request wxSDk is the request that I encapsulate

      var _url = location.href.split(The '#') [0]
      wxSDk(encodeURIComponent(_url)).then(res= > {
          if (res.code == 0) {
            // After the request succeeds,
            / / configure config
            wx.config({
              // When debug mode is enabled, the return value of all API calls will be displayed in the client alert. If you want to view the parameters passed in, you can open it in the PC, and the parameter information will be printed in the log.
              debug: false.// The background returns the appId obtained previously
              appId: res.data.appId,
              // Mandatory to generate the timestamp of the signature
              timestamp: res.data.timestamp,
              // Mandatory to generate a random string of signatures
              nonceStr: res.data.nonceStr,
              // Mandatory, signature, see Appendix 1
              signature: res.data.signature,
              // Mandatory, a list of JS interfaces to be used. See Appendix 3 for a list of all JS interfaces
              jsApiList: [
                'checkJsApi'./ / check the API
                'onMenuShareTimeline'.//1.0 Share to moments
                'onMenuShareAppMessage'.//1.0 share with friends
                'updateAppMessageShareData'.//1.4 Share with friends
                'updateTimelineShareData'.//1.4 Share it on moments]}); Latest SDK Documentation1.4. 0Version is about to be discarded1.2. 0Version of the share API updateAppMessageShareData share to the QQ space and circle of friends/ / 1.4Share QQ friends and WeChat updateAppMessageShareData/ / 1.4
Copy the code

Complete code wX-sdK.js

export const WxSdk = {
    getWeChatAuthorizationAndShare: function (WxShareData) {
      var _url = location.href.split(The '#') [0]
      wxSDk(encodeURIComponent(_url)).then(res= > {
          if (res.code == 0) {
            // After the request succeeds,
            / / configure config
            wx.config({
              // When debug mode is enabled, the return value of all API calls will be displayed in the client alert. If you want to view the parameters passed in, you can open it in the PC, and the parameter information will be printed in the log.
              debug: false.// The background returns the appId obtained previously
              appId: res.data.appId,
              // Mandatory to generate the timestamp of the signature
              timestamp: res.data.timestamp,
              // Mandatory to generate a random string of signatures
              nonceStr: res.data.nonceStr,
              // Mandatory, signature, see Appendix 1
              signature: res.data.signature,
              // Mandatory, a list of JS interfaces to be used. See Appendix 3 for a list of all JS interfaces
              jsApiList: [
                'onMenuShareTimeline'.//1.0 Share to moments
                'onMenuShareAppMessage'.//1.0 share with friends
                'updateAppMessageShareData'.//1.4 Share with friends
                'updateTimelineShareData'.//1.4 Share it on moments]});// After the page is loaded, the user may call wechat sharing, so it will be loaded when the page is ready
            wx.ready(function () {
              var commonShareData = {
                // Share the title
                title: WxShareData.title,
                // Share the description
                desc: WxShareData.desc,
                // Share link, the link domain name or path must be the same as the current page corresponding public number JS security domain name
                link: WxShareData.linkurl,
                // Share ICONS
                imgUrl: WxShareData.img,
                success: function () {
                  console.log('Share callback function');
                },
              }
            wx.onMenuShareTimeline(commonShareData);/ / 1.0
            wx.updateTimelineShareData(commonShareData);/ / 1.0
            wx.onMenuShareAppMessage(commonShareData)/ / 1.4
            wx.updateAppMessageShareData(commonShareData)/ / 1.4
            });
            // Wechat preloading failed callback
            wx.error(function (res) {
              console.log(res);
              // alert(' failed ');
            });
          }
        })
        .catch(err= >{}); }};Copy the code

The.vue file invokes js

import { WxSdk } from '.. /commonJS/wx-sdk.js';


// wechat share SDK
    wxShare(forData){
        var imgUrl = forData.imgs.imgList ?  forData.imgs.imgList[0].url : forData.vedioCover.url
        var title = forData.content ? forData.content : 'Wow, what is this? '
        var WxShareData = {
              title:title,
              desc:'from' + forData.playerBase.nickname + 'the Puchi'.img:imgUrl,
              linkurl:window.location.href,// Share the link
        }
        WxSdk.getWeChatAuthorizationAndShare(WxShareData)
      },
Copy the code

Common error reference documents

Wechat SDK documentation