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方法.