1 引入JS文件http://res.wx.qq.com/open/js/jweixin-1.2.0.js，

2 拿access_token，配置IP白名單才能調(diào)此接口，根據(jù)appID和appSecret進行請求 (有效期7200秒，每次使用前檢查，過期重新獲?。?需要存儲到redis

獲取access_token：

https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='+appID+'&secret='+appSecret;

3 拿jsapi_ticket，根據(jù)上一步的access_token進行請求 (有效期7200秒，每次使用前檢查，過期重新獲?。┬枰鎯Φ絩edis

獲取jsapi_ticket：

https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=' + access_token + '&type=jsapi';

4計算signature，根據(jù)上一步的jsapi_ticket 還有需要用到 jssha npm進行加密

1）排序，參與簽名的字段：noncestr（隨機字符串），有效的jsapi_ticket，timestamp（時間戳），url（不帶#后面部分部分），字典序從小到大排序，

2）拼接，使用URL鍵值對的格式拼接字符串string1，參數(shù)名必須均為小寫字符

3）加密，對string1作sha1加密，字段名和字段值都采用原始值，不進行URL 轉(zhuǎn)義注意：計算簽名必須在服務端完成簽名，返回前端

// 隨機字符串
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 ，注意必須動態(tài)獲取，不能 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
// 通過調(diào)用計算簽名方法
var signatureStr = sign(jsapiTicket, ctx.request.body.url);

5 添加JS接口安全域名（在公眾號后臺的設(shè)置/公眾號設(shè)置/功能設(shè)置中添加）

6 驗證生成的signature正確性

https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign

7前端調(diào)用案例

// 請求簽名
  $.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);  // 正式環(huán)境記得關(guān)閉啊?。。?！
      });
    }
  });

常見問題
1 config 錯誤
如果config fail，一般說明存在配置字段遺漏，或者配置字段的值為空（null，undefined，""）。
2 signature錯誤
如果報invalid signature錯誤，一般說明簽名沒有生成正確，再核對一遍規(guī)則?？梢允褂梦⑿?JS 接口簽名校驗工具，第6步
3 測試環(huán)境怎么測試
只需要在微信公眾號后臺配置微信測試appID和appSecret 就可以了