微信JS-SDK如何本地調試

問題描述

在公衆號和後端接口都尚未準備好的前提下，如何調試js-sdk相關接口？本文將介紹如何解決wx.config所需的參數。

wx.config({
  debug: true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
  appId: '', // 必填，公衆號的惟一標識
  timestamp: , // 必填，生成簽名的時間戳
  nonceStr: '', // 必填，生成簽名的隨機串
  signature: '',// 必填，簽名
  jsApiList: [] // 必填，須要使用的JS接口列表
});
複製代碼

公衆號準備

接入js-sdk須要配置公衆號信息，可在 測試號管理 申請使用官方測試帳號

內網穿透獲取外網可訪問的域名

1. 下載 ngrock
2. 找到下載的文件，執行 ./ngrock http 8080(8080是項目運行端口)
3. 瀏覽器訪問得到的域名檢查是否能正常訪問項目內容

配置js域名白名單

在js接口安全域名中配置白名單，其中域名爲上一步內網穿透得到的地址

獲取Access Token

請求接口以下，可直接在瀏覽器拼接請求獲取 access token，appid和secret可在測試號中獲取

https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
複製代碼

獲取 Js Ticket

請求接口以下，可直接在瀏覽器拼接請求獲取 js ticket，其中 access token 爲上一步獲取的的內容

https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
複製代碼

簽名

使用 微信js簽名工具 完成簽名，其中js ticket爲上一步獲取的內容，其餘字段自行隨意配置

引入 js-sdk

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
複製代碼

配置初始化

全部配置都已獲取，直接經過wx.config配置便可（請與上面內容一一對應）。

wx.config({
  debug: true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
  appId: 'wx67d99aa823b30aad', // 必填，公衆號的惟一標識
  timestamp: '1618020077', // 必填，生成簽名的時間戳
  nonceStr: 'test', // 必填，生成簽名的隨機串
  signature: '2c3b95b3c8b2a2d701688e979d8815d63017dee0',// 必填，簽名
  jsApiList: ['getLocation'] // 必填，須要使用的JS接口列表
});
複製代碼

使用 js-sdk 能力

wx.ready(() => {
    wx.getLocation({
        // ...
    })
});
複製代碼

微信公衆號開發工具瀏覽