🎁 解决微信二次分享问题/wx-sdk

解决微信二次分享不显示摘要和图片从app分享到微信后再次分享变成链接

1、微信认证的公众号绑定域名

微信公众号平台 >>>> 公众号设置-功能设置里填写 js接口安全域名

需要下载MP_verify_EZhQkscUv44pvLNO.txt文件到Web服务器到根目录下

2、引入js文件

在index.html中引入

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

或者

npm install weixin-js-sdk

import wx from 'weixin-js-sdk'  //引用

3、后台需要返回appid、 timestamp (生成签名的时间戳)、nonceStr (签名的随机字符串) 、 signature (签名)

前端请求 wxSDk是我封装的请求

      var _url = location.href.split('#')[0]
      wxSDk(encodeURIComponent(_url)).then(res => {
          if (res.code == 0) {
            // 请求接口成功后，
            // 配置config
            wx.config({
              // 开启调试模式时,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
              debug: false,
              // 后台返回之前获取的appId
              appId: res.data.appId,
              // 必填，生成签名的时间戳
              timestamp: res.data.timestamp,
              // 必填，生成签名的随机串
              nonceStr: res.data.nonceStr,
              // 必填，签名，见附录1
              signature: res.data.signature,
              // 必填，需要使用的JS接口列表，所有JS接口列表见附录3
              jsApiList: [
                'checkJsApi', //检查api
                'onMenuShareTimeline', //1.0分享到朋友圈
                'onMenuShareAppMessage', //1.0 分享到朋友
                'updateAppMessageShareData', //1.4 分享到朋友
                'updateTimelineShareData', //1.4分享到朋友圈
              ]
            });
            
            
 最新SDK文档1.4.0版本中即将废弃1.2.0版本的分享api
  updateAppMessageShareData 分享到QQ空间和朋友圈 //1.4
  updateAppMessageShareData 分享QQ好友和微信好友 //1.4

完整代码 wx-sdk.js

export const WxSdk = {
    getWeChatAuthorizationAndShare: function (WxShareData) {
      var _url = location.href.split('#')[0]
      wxSDk(encodeURIComponent(_url)).then(res => {
          if (res.code == 0) {
            // 请求接口成功后，
            // 配置config
            wx.config({
              // 开启调试模式时,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
              debug: false,
              // 后台返回之前获取的appId
              appId: res.data.appId,
              // 必填，生成签名的时间戳
              timestamp: res.data.timestamp,
              // 必填，生成签名的随机串
              nonceStr: res.data.nonceStr,
              // 必填，签名，见附录1
              signature: res.data.signature,
              // 必填，需要使用的JS接口列表，所有JS接口列表见附录3
              jsApiList: [
                'onMenuShareTimeline', //1.0分享到朋友圈
                'onMenuShareAppMessage', //1.0 分享到朋友
                'updateAppMessageShareData', //1.4 分享到朋友
                'updateTimelineShareData', //1.4分享到朋友圈
              ]
            });
  
            // 页面加载完成后用户就有可能调用微信的分享，所以当页面ready 完后就加载
            wx.ready(function () {
              var commonShareData = {
                // 分享标题
                title: WxShareData.title,
                // 分享描述
                desc: WxShareData.desc,
                // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                link: WxShareData.linkurl,
                // 分享图标
                imgUrl: WxShareData.img,
                success: function () {
                  console.log('分享回调函数');
                },
              }
            wx.onMenuShareTimeline(commonShareData);//1.0
            wx.updateTimelineShareData(commonShareData);//1.0
            wx.onMenuShareAppMessage(commonShareData)//1.4
            wx.updateAppMessageShareData(commonShareData)//1.4
            });
            // 微信预加载失败回调
            wx.error(function (res) {
              console.log(res);
              // alert('失败');
            });
          }
        })
        .catch(err => {
  
        });
    }
  };

.vue文件调用js

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


//微信分享sdk
    wxShare(forData){
        var imgUrl = forData.imgs.imgList ?  forData.imgs.imgList[0].url : forData.vedioCover.url
        var title = forData.content ? forData.content : '哇，这是什么？'
        var WxShareData = {
              title:title,
              desc:'来自 ' + forData.playerBase.nickname + ' 的Puchi',
              img:imgUrl,
              linkurl:window.location.href,//分享链接
        }
        WxSdk.getWeChatAuthorizationAndShare(WxShareData)
      },

常见错误参考文档

微信sdk文档