微信网页开发--分享接口

流程

关于流程，在上一篇中已经有图介绍:

微信文档

微信JS-SDK说明文档

JSSDK使用步骤

首先确保已经获取了相关权限

步骤一：绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
备注：登录后可在“开发者中心”查看对应的接口权限。

这里的安全域名没设置，会报签名权限的问题。

步骤二：引入JS文件

在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.2.0.js
备注：支持使用 AMD/CMD 标准模块加载方法加载。

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

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用，同一个url仅需调用一次。

步骤四：通过ready接口处理成功验证

wx.ready(function(){
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});

步骤五：通过error接口处理失败验证

wx.error(function(res){
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});

接口调用说明

所有接口通过wx对象(也可使用jWeixin对象)来调用，参数是一个对象，除了每个接口本身需要传的参数之外，还有以下通用参数：
1.success：接口调用成功时执行的回调函数。
2.fail：接口调用失败时执行的回调函数。
3.complete：接口调用完成时执行的回调函数，无论成功或失败都会执行。
4.cancel：用户点击取消时的回调函数，仅部分有用户取消操作的api才会用到。
5.trigger: 监听Menu中的按钮点击时触发的方法，该方法仅支持Menu中的相关接口。
备注：不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回。

后台开发流程

1. 下载微信提供的示例代码： http://demo.open.weixin.qq.com/jssdk/sample.zip
2. 打开sample/node/package.json 找到dependencies字段，里面引入的是 “jssha”: “^1.5.0” 模块
3. 在我们自己的node后台项目里面的package.json的dependencies字段 添加 “jssha”: “^1.5.0” 然后执行npm install 引入此模块
4. 复制sample/node目录下面的sign.js文件到自己的node后台项目里面
   后台代码：

/*
 * 客户端获取签名  
 * 参数： 当前网页的URL，不包含#及其后面部分
 */
router.get('/mp/signature', function(req, res, next) {
    var param = req.query || req.params; 
    var urlstr = param.urlstr;
    var url = 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=' + wxConfig.AppID + '&secret=' + wxConfig.Secret;
    request(url, function (error, response, token_body) {
        if (!error && response.statusCode == 200) {
            var token_data = JSON.parse(token_body); 
            var ticketurl = 'https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=' + token_data.access_token + '&type=jsapi';
            request(ticketurl, function (error, response, ticket_body) {
                if (!error && response.statusCode == 200) {
                    var ticket_data = JSON.parse(ticket_body); 
                    var ret = sign(ticket_data.ticket,ticketurl);
                    ret.appID = wxConfig.AppID; // 把AppID也一起返回给前台
                    res.end(JSON.stringify(ret));
                }
            })
        }
    })
});

这里前台在调用signature这个接口后，在ajax的成功回调里面配置微信JS-SDK就好了。
前台代码

function getSignature(locUrl){
    $.ajax({
        url: 'https://www.hgdqdev.cn/mp/signature',
        data:{
            urlstr: locUrl.split('#')[0]
        },
        dataType: 'json', //服务器返回json格式数据
        type: 'get', //HTTP请求类型
        timeout: 10000, //超时时间设置为10秒；
        success: function(res) {
            wxConfig(res);
        },
        error: function(xhr, type, errorThrown) {
            alert('网络连接失败，请检查网络。');
        }
    });
}
// 微信配置
function wxConfig(res){
    wx.config({
        debug: false, 
        appId: res.appID, 
        timestamp: res.timestamp, 
        nonceStr:  res.nonceStr, 
        signature:  res.signature,
        jsApiList: ['onMenuShareTimeline',   // 分享朋友圈
                    'onMenuShareAppMessage'] // 分享好友
    });
    wx.ready(function(){
        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
        // 分享到朋友圈
        wx.onMenuShareTimeline({
            title: '', // 分享标题
            link: '', // 分享链接
            imgUrl: '', // 分享图标
            success: function () { 
                // 用户确认分享后执行的回调函数
            },
            cancel: function () { 
                // 用户取消分享后执行的回调函数
            }
        });
        // 分享给朋友
        wx.onMenuShareAppMessage({
            title: '', // 分享标题
            desc: '', // 分享描述
            link: '', // 分享链接
            imgUrl: '', // 分享图标
            type: '', // 分享类型,music、video或link，不填默认为link
            dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
            success: function () { 
                // 用户确认分享后执行的回调函数
            },
            cancel: function () { 
                // 用户取消分享后执行的回调函数
            }
        });
    });
    wx.error(function(res){
            // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
    });
}

如果我们需要修改动态的修改微信分享的内容时：请注意接口调用说明–备注里面的说明。
我的解决办法是什么时候需要修改分享内容就再调用一次getSignature()一次方法，在调用这个方法之前就设置好分享内容。
但是这样就有一个问题，如果用户分享了，但是网络请求还没请求成功就尴尬了。O(∩_∩)O~。
所以我觉的我们可以保存方法getSignature()获取的签名数据，在需要修改分享内容时，再次调用wxConfig(),传入保存的数据即可。

最后

微信网页开发–分享接口，的介绍就完了，其实开发起来不算难。关于最后动态设置分享内容的部分，也是踩坑之后才知道的，这个问题也解决了。微信JS-SDK有很多内容，但是基本的操作流程是大致一样的。