微信6.0之后，分享到朋友圈新方法

微信6.0之后，原有的WeixinJSBridge.on('menu:share:timeline', function (argv) {}不再可以使用，但是微信提供的新的方法 JS-SDK, 官方接口请参见微信JSSDK说明文档，具体的方法官方文档都说的比较清楚了，本文只是记录下开发过程中遇到的问题以及解决方式。

1. 虽然微信提供了JSSDK，但是这不意味着你可以用自定义的按钮来直接打开微信的分享界面，这套JSSDK只是把微信分享接口的内容定义好了，实际还是需要用户点击右上角的菜单按钮进行主动的分享，用户点开分享界面之后，出现的内容就会是你定义的分享标题、图片和链接。

2. wx.config()注入配置成功之后，会触发wx.ready()函数（同样失败的时候会触发wx.error()函数），所以之后的有必要的接口调用，比如定义分享到朋友圈、分享给好友的内容，还是放在wx.ready()中进行调用以保证正确性。

3.wx.checkJsApi无需wx.config即可调用，用来判断当前客户端是否能支持微信JSSDK的接口。

4.分享出去的链接，会被微信在链接后面追加参数。这个问题十分重要，本人在开发过程中，第一次分享出去，成功没有任何问题，但是再次打开链接，会提示invalid signature，也就是签名错误，这个问题出现的原因，就是因为原来链接的被追加了参数，传递到自己服务器后台的页面原地址和提交给微信的页面原地址不匹配，解决方法如下：

var pageUrl = window.location.href.split('#')[0];
pageUrl = pageUrl.replace(/\&/g, '%26');</span>
initJsApiTicket(pageUrl, function (data) {
    if (data.errcode == '0') {
        wx.config({
            debug: false,
            appId: data.appId,
            timestamp: data.timestamp,
            nonceStr: data.nonceStr,
            signature: data.signature,
            jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage']
        });
    }
});

注意如果你是用这种方式将页面原地址作为参数传递到后台的话，需要将参数中的&全部替换为%26，否则后台接收到的地址会丢失参数，导致最后签名不一致。另外，在你分享出去的URL中，必须将微信附加的参数去掉，否则会导致第二次分享成功，但是第三次、第四次以及后续的分享都失败。

wx.ready(function () {
    pageUrl = pageUrl.substr(0, pageUrl.indexOf('%26'));
    wx.onMenuShareTimeline({
        title: '胶囊内镜检查图片', // 分享标题
        link: pageUrl, // 分享链接
        imgUrl: 'http://escloud-media.oss-cn-hangzhou.aliyuncs.com/escloud/newsmsg-small.png', // 分享图标
        success: function () {
            // 用户确认分享后执行的回调函数
     },
     cancel: function () {
         // 用户取消分享后执行的回调函数
     },
     fail: function (res) {
         alert("分享失败，请重新尝试");
        }
    });
    wx.onMenuShareAppMessage({
        title: '胶囊内镜检查图片', // 分享标题
        desc: '胶囊内镜检查图片', // 分享描述
        link: pageUrl, // 分享链接
        imgUrl: 'http://escloud-media.oss-cn-hangzhou.aliyuncs.com/escloud/newsmsg-small.png', // 分享图标
        type: 'link', // 分享类型,music、video或link，不填默认为link
        dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
        success: function () {
            // 用户确认分享后执行的回调函数
        },
        cancel: function () {
            // 用户取消分享后执行的回调函数
        }
   });
});

微信6.0之后，分享到朋友圈新方法

猜你喜欢