JSSDK微信自定义分享[修正SPA 分享的bug]

使用微信JSSDKAPI

步骤一：绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。如果你使用了支付类接口，请确保支付目录在该安全域名下，否则将无法完成支付。

备注：登录后可在“开发者中心”查看对应的接口权限。

步骤二：引入JS文件

在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.2.0.js

备注：支持使用 AMD/CMD 标准模块加载方法加载

步骤三：通过config接口注入权限验证配置

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名，见附录1
    jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});

案例

function WeChat(url, title, img, desc) {
    $.ajax({
        url: './getconfig.php',
        type: 'POST',
        dataType: 'json',
        data: {url: window.location.href}
    }).done(function(data) {
        wx.config(data);
        wx.ready(function() {
            // 在这里调用 API
            wx.onMenuShareTimeline({ //例如分享到朋友圈的API
                title: title, // 分享标题
                link: url, // 分享链接
                imgUrl: img, // 分享图标
                success: function() {},
                cancel: function() {
                    // 用户取消分享后执行的回调函数
                }
            });
            wx.onMenuShareAppMessage({
                title: title, // 分享标题
                desc: desc, // 分享描述
                link: url, // 分享链接
                imgUrl: img, // 分享图标
                type: '', // 分享类型,music、video或link，不填默认为link
                dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                success: function() {},
                cancel: function() {
                    // 用户取消分享后执行的回调函数
                }
            });
            wx.error(function(res) {
                alert(res.errMsg); //打印错误消息。及把 debug:false,设置为debug:ture就可以直接在网页上看到弹出的错误提示
            });
        });
    }).fail(function() {
        console.log("error");
    }).always(function() {
        console.log("complete");
    });
}

//需要调用时执行这个方法。
var url = 'http://www.baidu.com'; //用户要分享的网址
var title = '神奇的百度'; //分享的标题
var shareimg = 'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/logo_white_fe6da1ec.png'; //分享的图片
var desc = '神奇的百度'; //分享的描述信息
// 当需要动态加载的时候，就调用一下。
WeChat(url, title, shareimg, desc);

修正SPA 分享的bug

文档说所有需要使用JS-SDK 的页面必须先注入配置信息，并不是。部分微信接口需要先验证才能使用，如分享接口等，但是有些不用，如隐藏菜单接口等。

同一个页面，只需要验证一次，SPA页面也不用（文档说需要，其实不用），只要页面不刷新，就不需要再次验证。

文档说Android微信客户端6.2版本之前不支持pushState特性，其实webView支持，只是微信认定不安全，所以功能都没有了，如果遇到右上角菜单只有收藏的情况就是这个原因，貌似没有解决办法，刷新页面吧……

Android微信客户端6.2之后，对pushState提供了支持，验证后使用pushState更换url不需要再次验证，但是使用history.back()之后，验证会失效，需要再次验证……

微信对于replaceState的支持是有问题，replaceState之后的url计算的签名是无效的，请使用原始url……

解决方案：
每次url更改的时候，重新调用JSSDK的config接口

使用vue开发微信公众号下SPA站点的填坑之旅