H5獲取JSSDK權限

官網文檔地址:  https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#1

1. 首先需要在公眾號設置安全域名(開發者需要有對應的權限).

 

2. 引入js文件, 我使用的是npm里的 'jweixin-module'  (npm install --save jweixin-module)

所有使用JSSDK的頁面都需要進行config配置 (同一個url僅需調用一次,若是多個,則在每次url變化時進行調用).

 

3. 從后台取到需要的相關信息進行配置,傳入需要調用的url.

url 需要動態獲取,可以使用  window.location.href.split("#")[0] 獲取,需要取到 '?' 后面攜帶的所有參數,不需要 '#' hash后面的參數,並且需要使用 encodeURIComponent 進行編碼

(因為頁面一旦分享，微信客戶端會在你的鏈接末尾加入其它參數，如果不是動態獲取當前鏈接，將導致分享后的頁面簽名失敗)

　　 遇到問題:  不知道為啥,不能用局域網url(https://192.168.10.100:8080),最好有一個可以訪問的域名用來臨時使用.

getJsConfig(url) {
      let params = { url };
      http.getJsConfig(params).then(res => {
        this.$wx.config({
          debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來,如果是在PC上打開的話會直接打印log。
          appId: "******************", // 必填，公眾號的唯一標識
          timestamp: res.timestamp, // 必填，生成簽名的時間戳
          nonceStr: res.nonceStr, // 必填，生成簽名的隨機串
          signature: res.signature, // 必填，簽名
          jsApiList: [
            "updateAppMessageShareData",
            "chooseImage",
            "getLocalImgData",
            "previewImage",
            "uploadImage"
          ] // 必填，需要使用的JS接口列表
        });
      });
    }

 所有的接口都需要在config成功后調用,如果是交互式的觸發相應接口,可以不用放在ready方法中.

如果是要在頁面一加載就調用的接口方法,就可以放在ready方法中,,config配置成功后會執行ready方法.