微信小程序H5调用扫一扫等微信JS-SDK

1.先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”

2.我这里是使用react框架开发，在html文件中引入下面这个文件

3.配置config

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

首先要准备好公众号的APPID和AppSecret，不是小程序的。然后调用下面这个接口。

https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET 调用成功后会返回access_token这个值

用access_token请求下面接口。

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

这里返回一个ticket

获得jsapi_ticket之后，就可以生成JS-SDK权限验证的签名了。

签名算法

签名生成规则如下：参与签名的字段包括noncestr（随机字符串）, 有效的jsapi_ticket, timestamp（时间戳）, url（当前网页的URL，不包含#及其后面部分） 。对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。对string1作sha1加密，字段名和字段值都采用原始值，不进行URL 转义。

即signature=sha1(string1)。 示例：

noncestr=Wm3WZYTPz0wzccnW
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
timestamp=1414587457
url=http://mp.weixin.qq.com?params=value

步骤1. 对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1：

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW&timestamp=1414587457&url=http://mp.weixin.qq.com?params=value

步骤2. 对string1进行sha1签名，得到signature：

0f9de62fce790f9a083d5c99e95740ceb90c27ed

 可以在文档中下载示例代码 其中有nodejs的，直接复制下来在本地新建一个js文件粘贴使用即可

这里后端写了接口直接给我返回了需要的数据

4.部署到你配置安全域名的服务器后，才可以正常使用

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

在wx.reacdy成功后调用扫一扫功能

// 扫一扫
    const gotoScan = () => {
        wx.scanQRCode({
            needResult: 1,
            scanType: ['qrCode', 'barCode'],
            success: function (res) {
                Notify.danger(JSON.stringify(res))
                console.log(res)
            },
            fail: function (res) {
                Notify.danger('扫描失败',res)
            },
        });
    }

模拟器执行返回这个就成功了 使用真机调试查看效果

还是踩了很多坑踩完事的o(╥﹏╥)o