React（h5掉微信扫一扫功能）

主要就是移动端的h5项目调用微信扫一扫功能，这个官方文档时在“微信开发文档---公众号”中，文档中写的很清晰，但是实际开发中会遇到很多问题，例如调用扫一扫接口后测试，这个是必须在手机上测试的，我记得那天我打了几十个包，然后放在了公众号上面进行测试，主要还是得细心，不然一个小差错就得重新打包，（说到这儿还是很惭愧的，还好后端小哥哥心态好，一直在陪着我弄，感谢好队友）

1、首先，调用微信扫一扫功能，是需要使用 JS-SDK的（https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html）
附带连接

2、配置JS安全域名（在公众号上）；

3、（后端）写一个接口给给前端，获取使用扫一扫功能的当前页url，通过access_token获取jsapi_ticket,然后生成JS-SDK权限验证的签名（具体看文档了）

（前端）将当前页url传给后端，下面获取当前页url

let codeurl =window.location.href.split('#')[0]

再引入JS文件（http://res.wx.qq.com/open/js/jweixin-1.6.0.js），官方文档是这样的，我是直接npm i weixin-js-sdk ,下载的包然后直接引入的

import wx from 'weixin-js-sdk'

4、（后端）返回以下参数给前端

appId: ‘公众号appid’,
timestamp: ‘ 时间戳 ’
nonceStr: ‘ 生成签名的随机串 ’
signature :‘签名’

5、前端拿到以上参数，调用wx.config

wx.config({ //通过config接口注入权限验证配置
     appId: param.appId,
    timestamp: param .timestamp,
     nonceStr: param .noncestr,
    signature: param .signature,
     jsApiList: ['scanQRCode'] //需要使用的JS接口列表，这里是微信的扫一扫
})

      wx.ready(() => { //通过ready接口处理成功验证
    wx.scanQRCode({
            needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
             scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
             success: function (res) {
                 var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
                result = result.split(',')[1] //处理返回的upcCode码
        },
         error: function (error) {
             Toast.fail(error) }
         })
})

      wx.error(res => {
        Toast.fail(res)
          })

好了，本文到这里就结束了，其实说简单也简答说难也难，之前没弄过，大家都是摸着石头过河，写的不好的地方请多见谅！