最近想在微信平臺嵌入一個H5頁面的DEMO，並想要呼叫微信平臺的jsAPI,但這一操作需要獲取微信的認證，經過一天的不斷除錯，終於攻克了這個問題，現將思路和解決方案記錄下來，以供需要的朋友參考。

使用微信js介面需要配置檔案，

   wx.config({
       debug: true, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，若要檢視傳入的引數，可以在pc端開啟，引數資訊會通過log打出，僅在pc端時才會列印。
       appId: 'wx3b70375e1032772b',    // 必填，公眾號的唯一標識
       timestamp: data.body.timestamp, // 必填，生成簽名的時間戳
       nonceStr: data.body.noncestr,   // 必填，生成簽名的隨機串
       signature: data.body.signature, // 必填，簽名，見附錄1
       jsApiList: ['checkJsApi',
           // 'chooseImage',
           // 'previewImage',
           // 'uploadImage',
           // 'downloadImage',
           // 'getNetworkType',//網路狀態介面
           // 'openLocation',//使用微信內建地圖檢視地理位置介面
           // 'getLocation', //獲取地理位置介面
           // 'hideOptionMenu',//介面操作介面1
           // 'showOptionMenu',//介面操作介面2
           // 'closeWindow' ,  ////介面操作介面3
           // 'hideMenuItems',////介面操作介面4
           // 'showMenuItems',////介面操作介面5
           // 'hideAllNonBaseMenuItem',////介面操作介面6
           // 'showAllNonBaseMenuItem',////介面操作介面7
           'scanQRCode'// 微信掃一掃介面
       ] // 必填，需要使用的JS介面列表，所有JS介面列表見附錄2
   });
 

上面有四個必填項，接下來我們將介紹如何獲取它們：

獲取步驟

第一步，去微信公眾平臺的開發者工具介面，進入公眾平臺測試帳號，獲取測試號資訊，也就是appID 和 appsecret , 填寫JS介面安全域名（設定介面訪問的白名單），注意域名(必須備案)需要填寫埠號，如yangqi.site:1338

第二步，獲取access_token，有效期7200s

const appId = ...      // 第一步獲取
const appSecret = ...  // 第一步獲取
https.get(
  'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='+ appId +'&secret=' + appSecret,
  (backData) => {
    backData.on('data', (d) => {
      process.stdout.write(d);
      accessToken = JSON.parse(d)['access-token'];
      res.send(d);  // (獲取到access-token)
    })
  }
)
 

第三步，根據第二步獲取的access-token，獲取ticket，有效期7200s

const accessToken = ...      // 第二步獲取    
https.get(
  'https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token='+accessToken+'&type=jsapi',
  (back) => {
    back.on('data', (d) => {
      res.send(d);           // 獲取到ticket
    })
  }
)

第四步，根據第三步獲取的ticket，獲取signature。獲取signature需要noncestr 和 timestamp，需要後臺自動生成，與微信介面無關。

var ticket = ...    // 第三步獲取

const createNonceStr = () => Math.random().toString(36).substr(2, 15);
const createTimeStamp = () => parseInt(new Date().getTime() / 1000) + '';
const calcSignature = function (ticket, noncestr, ts, url) {
   var str = 'jsapi_ticket=' + ticket + '&noncestr=' + noncestr + '&timestamp='+ ts +'&url=' + url;  // (第一步設定的域名+介面)
   shaObj = sha1(str);
   return shaObj;
}

const noncestr = createNonceStr();
const timestamp = createTimeStamp();
const signature = calcSignature(ticket, noncestr, timestamp, 'http://yangqi.site:1338/');  // 通過sha1演算法得到

res.send({
  noncestr: noncestr,
  timestamp: timestamp,
  signature: signature,
})

至此，我們就可以完整的得到wx.config中的所有內容。

但僅僅獲取wx.config是不夠的，我們不能每次都將除錯程式碼放到線上，這是不可思議的，我們需要使用本地除錯，電腦端還好說，修改host後使用nginx代理，但手機端不成，我們需要修改手機端網路訪問的代理，這裡介紹使用fiddler。

使用步驟

第一步，手機和fiddler所在電腦必須處於同一無線網中。
第二步，修改電腦的host，如 yangqi.site:1338 10.101.11.11
第三步，手機連線wifi時，設定手動代理，將代理設定為fiddler所在電腦的ip 和 fiddler Tools -> Connections -> listen port 如，8888
第四步，手機必須訪問域名，而非ip才會生效。

最後感謝劉妍小盆友的鼓勵，讓我有了鑽研下去的動力