1 引入JS文件http://res.wx.qq.com/open/js/jweixin-1.2.0.js，
2 拿access_token，配置IP白名单才能调此接口，根据appID和appSecret进行请求 (有效期7200秒，每次使用前检查，过期重新获取） 需要存储到redis
获取access_token：
3 拿jsapi_ticket，根据上一步的access_token进行请求 (有效期7200秒，每次使用前检查，过期重新获取）需要存储到redis
获取jsapi_ticket：
https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=' + access_token + '&type=jsapi';
4计算signature，根据上一步的jsapi_ticket 还有需要用到 jssha npm进行加密
1）排序，参与签名的字段：noncestr（随机字符串），有效的jsapi_ticket，timestamp（时间戳），url（不带#后面部分部分），字典序从小到大排序，
2）拼接，使用URL键值对的格式拼接字符串string1，参数名必须均为小写字符
3）加密，对string1作sha1加密，字段名和字段值都采用原始值，不进行URL 转义注意：计算签名必须在服务端完成签名，返回前端
// 随机字符串
var createNonceStr = function () {
return Math.random().toString(36).substr(2, 15);
};
// 时间戳
var createTimestamp = function () {
return parseInt(new Date().getTime() / 1000) + '';
};
// 排序拼接
var raw = function (args) {
var keys = Object.keys(args);
keys = keys.sort();
var newArgs = {};
keys.forEach(function (key) {
newArgs[key.toLowerCase()] = args[key];
});
var string = '';
for (var k in newArgs) {
string += '&' + k + '=' + newArgs[k];
}
string = string.substr(1);
return string;
};
/**
* @synopsis 签名算法
*
* @param jsapi_ticket 用于签名的 jsapi_ticket
* @param url 用于签名的 url ，注意必须动态获取，不能 hardcode
*
* @returns
*/
var sign = function (jsapiTicket, url) {
var ret = {
"jsapi_ticket": jsapiTicket,
nonceStr: createNonceStr(),
timestamp: createTimestamp(),
url: url
};
var string = raw(ret);
var shaObj = new jsSHA(string, 'TEXT');
ret.signature = shaObj.getHash('SHA-1', 'HEX');
return ret;
};
// 计算signature
// 通过调用计算签名方法
var signatureStr = sign(jsapiTicket, ctx.request.body.url);
5 添加JS接口安全域名（在公众号后台的设置/公众号设置/功能设置中添加）
6 验证生成的signature正确性
https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign
7前端调用案例
// 请求签名
$.ajax({
url: "/signture",
type: 'post',
data: { url: location.href.split('#')[0] },
success:function(res){
wx.config({
debug: false,
appId: 'xxxxxx',
timestamp: res.timestamp,
nonceStr: res.nonceStr,
signature: res.signature,
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ'
]
});
wx.ready(function () {
var shareData = {
title: document.title,
desc: getDesc(),
link: res.url,
imgUrl: getImage()
};
wx.onMenuShareAppMessage(shareData);
wx.onMenuShareTimeline(shareData);
wx.onMenuShareQQ(shareData);
});
wx.error(function (res) {
alert(res.errMsg); // 正式环境记得关闭啊！！！！
});
}
});
常见问题
1 config 错误
如果config fail，一般说明存在配置字段遗漏，或者配置字段的值为空（null，undefined，""）。
2 signature错误
如果报invalid signature错误，一般说明签名没有生成正确，再核对一遍规则。可以使用微信 JS 接口签名校验工具，第6步
3 测试环境怎么测试
只需要在微信公众号后台配置微信测试appID和appSecret 就可以了
