微信公众号 h5 中 获取 微信JS-SDK

首先放上官方文档

微信JS-SDK是用于调用微信提供的一些方法，比如拍照、上传图片、分享、等功能（微信虽然提供了自己的一套功能，但比如原生的上传图片、分享等功能再微信浏览器中仍然使用(实际使用体验欠佳)，所以如果遇到无法兼容的问题，可以直接使用原生的方法）

1、首先是绑定js安全域名，在微信公众平台中左侧菜单拉到底，选择公众号设置

输入js接口安全域名，需要注意三点

1. 安全域名是要“掐头去尾”的，比如添加百度（https://www.baidu.com）要写成（www.baidu.com）
2. 不要忘记把js接口安全域名设置中的文件扔给后端，放在服务器上
3. 该域名每个月只能修改5次，谨慎修改

2、引入js文件

按照官方要求引入<script src='https://res.wx.qq.com/open/js/jweixin-1.6.0.js'></script>即可

3、wx.config

虽然我们已经引入了wx的js文件，并且可以获取到wx.xxxx相关的方法，但是在调用微信的方法前，还是需要使用wx.config接口来获取调用的权限（部分接口不需要获取权限）

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [] // 必填，需要使用的JS接口列表
});

config中各种字段的算法一般都是后端处理，所以我们可以写一个函数专门来获取微信权限

/**
 * 获取wx方法权限
 * @param {*} type 需要获取的权限list
 */
getWxType(jsApiList) {
    let _this = this
    console.log('开始获取权限', jsApiList)
    return new Promise((resolve, reject) => {
        // 1、获取请求微信权限前需要的数据
        _this.$api.common
            .jssdkConfig()
            .then((res) => {
                console.log('1、获取请求微信权限前需要的数据成功', res)
                // 2、获取微信加入的权限
                wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: res.app_id, // // 必填，公众号的唯一标识
                    timestamp: res.timestamp, // 必填，生成签名的时间戳
                    nonceStr: res.noncestr, // 必填，生成签名的随机串
                    signature: res.signature, // 必填，签名
                    jsApiList: jsApiList, // 必填，需要使用的JS接口列表
                });
                wx.ready((_) => {
                    console.log('2、权限获取成功')
                    resolve()

                });
                wx.error((res) => {
                    console.log('2、权限获取失败',res)
                    reject({title:'2、权限获取失败',err: res})
                });
            }).catch(err => reject({title:'1、获取请求微信权限前需要的数据',err: err}));
    })
}

上边我写了一个异步函数，在函数执行成功后的回调中调用我们需要使用的微信方法就可以了

需要注意，微信提供的方法中，很多方法都不只有两个回调函数

end