相關鏈接：

1. 微信JS-SDK說明文檔

2. 微信測試號管理

3. 微信接口調試工具

有一點希望注意：在寫代碼的時候，要時刻明白寫的是前端還是后端。比如某些網頁用手機打開，寫前端時使用alert調試比較方便，因為瀏覽器中的console也看不到，特別是在手機端運行時，如果分不清自己寫的前后端代碼，盯著控制臺也是不會有什么輸出的。

以下內容均以測試號為例

綁定域名

測試號界面有

• 測試號信息 appID和appsecret
• 接口配置信息

  //微信服務器校驗 返回echostr才能配置成功
  if (req.query.echostr) {
    console.log('收到微信校驗',req.query);
    res.send(req.query.echostr);
    return;
  }

• JS接口安全域名
• 模板消息接口
• 體驗接口權限表

綁定域名就是在JS接口安全域名點擊修改，修改域名即可

引入js文件

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

配置驗證信息

所有需要使用JS-SDK的頁面必須先注入配置信息，否則將無法調用,通過config接口注入權限驗證配置

wx.config({
    debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
    appId: '', // 必填，公眾號的唯一標識
    timestamp: , // 必填，生成簽名的時間戳
    nonceStr: '', // 必填，生成簽名的隨機串
    signature: '',// 必填，簽名，見附錄1
    jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
});

這里有幾個重點，

1. 就是簽名生成。

• 確認簽名算法正確簽名算法校驗
• 確認config中nonceStr（js中駝峰標準大寫S）, timestamp與用以簽名中的對應noncestr, timestamp一致。
• 確認url是頁面完整的url(請在當前頁面alert(location.href.split('#')[0])確認)，包括'http(s)://'部分，以及'？'后面的GET參數部分,但不包括'#'hash后面的部分。沒有參數，基本應該以/結束 例如：https://www.baidu.com/
• 確認 config 中的 appid 與用來獲取 jsapi_ticket 的 appid 一致。
• 確保一定緩存access_token和jsapi_ticket。例如存入本地JSON文件
• 用來簽名的url要動態生成，否則簽名會失效，尤其是分享出去的網頁會被添加額外的參數

官方demo找到nodejs的案例，里面有sign.js含有簽名算法，把它放到自己的項目中，以供使用。案例中用到的第三方庫是哪個版本，如果使用新版本有問題，就用案例中的版本。

//獲取token的url地址
var token_url = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${secret}`;
//獲取ticket的url地址
var jsapi_ticket = `https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=${token}&type=jsapi`;

//注意拿到 token和ticket 一定要保存起來，方便后續使用。微信說2個小時 token失效，可以設置個定時器 比如1.8小時請求一次

// 先執行一次
refesh_token_tickte();
// 創建定時器 每隔1.8小時 刷新一次 token 和ticket
var timer = setInterval(refesh_token_tickte,1000 * 60 * 60 *1.8);

/**
 * 獲取token和ticket并存儲
 */
function refesh_token_tickte() {
    getaccess_token(token_url, getjsapi_ticket);
}

/**
 * 獲取token
 * @param {*url} 獲取token的url地址 
 * @param {*callback} callback 
 */
function getaccess_token(url, callback) {
  console.log("正在請求token");
  axios
    .get(token_url)
    .then(function(response) {
      if (!response || !response.data || !response.data.access_token) {
        console.log("未獲取到token");
        callback(null, null);
        return;
      }
      callback(null, response.data.access_token);
    })
    .catch(function(err) {
      callback(err, null);
    });
}

/**
 * 回調函數 
 * 根據token獲取jsapi_ticket
 * 同時 會生成 簽名 并保存到本地
 * @param {*} err 
 * @param {*} token 
 */
function getjsapi_ticket(err, token) {
  if (err || !token) {
    console.log("獲取token失敗");
    return;
  }
  var jsapi_ticket = `https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=${token}&type=jsapi`;
  axios
    .get(jsapi_ticket)
    .then(function(response) {
      if (!response || !response.data || !response.data.ticket) {
        console.log("未獲取到jsapi_ticket", response.data.errmsg);
        return;
      }
      //只存儲簽名
      try {
          var signjson = "./serverjs/sign.json";
        jsonfile.writeFileSync(signjson, {
            access_token:token,
            jsapi_ticket:response.data.ticket
        }, { spaces: 2 });
        console.log("token寫入成功");
      } catch (error) {
        console.log("寫入文件失敗", error.message);
      }

    })
    .catch(function(error) {
      if (error) {
        console.log("獲取jsapi_ticket失敗", error.message);
      }
    });
}
/**
 * 根據url動態生成簽名
 * @param {*configurl} url 
 */
function createCoinfDynamic(url) {
    console.log('要配置的url是',url);
  try {
    //1. 從文件中讀取 ticket
    var signinfo = jsonfile.readFileSync(signjson);
    var ticket = signinfo.jsapi_ticket;
    var token = signinfo.access_token;
    //2. 生成簽名
    //sign 是引入的sign.js中的函數
    var signature = sign(ticket, url);
    //3. 補充參數 并返回
    signature.appId = appid;
    signature.jsApiList = [
      "chooseImage",
      "uploadImage",
      "getNetworkType",
      "onMenuShareTimeline",
      "onMenuShareAppMessage",
      "hideMenuItems",
      "checkJsApi"
    ];
    signature.token = token;
    return signature;
  } catch (err) {
    console.log("動態生成簽名出錯",err.message);
    return null;
  }
}

我的url也不是動態生成的，我是收到客戶端請求時，生成一個網頁，在網頁中向服務器發起請求，拿到配置信息，然后去注冊?？雌饋砗苈闊?，但是工作正常。

router.get('/wechatconfig',function (req,res) {
// 獲取微信注冊配置信息
  var requesturl = req.url;
  var configurl = requesturl.split("xxconfigurl=")[1].split('#')[0];
  var config = get_config(configurl);
  res.send(config);
});

我本來想的是，收到請求時，直接生成配置信息，然后傳遞給網頁，到時候網頁不用向服務端請求，直接就拿到數據了。我用的是ejs模板，的確可以把數據傳遞過去，但是拿到的數據會有轉碼，我已經<%- %>但似乎還是不行。所以最后還是用的之前的方法。
因為剛接觸這些，應該是用后臺數據渲染網頁時，掌握的不好。不知道用vue可不可以完成服務器把數據帶到網頁中。

2. 接口列表

   像朋友圈是 onMenuShareTimeline 而不是 menuItem:share:appMessage，千萬不要寫錯了，
   寫錯了就不能響應事件。

3. 微信的事件最好放在ready里面

wx.ready(function(){
    // config信息驗證后會執行ready方法，所有接口調用都必須在config接口獲得結果之后，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對于用戶觸發時才調用的接口，則可以直接調用，不需要放在ready函數中。

//分享到朋友圈的事件
wx.onMenuShareTimeline({
    title: '', // 分享標題
    link: '', // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
    imgUrl: '', // 分享圖標
    success: function () { 
        // 用戶確認分享后執行的回調函數
    },
    cancel: function () { 
        // 用戶取消分享后執行的回調函數
    }
});

});