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)
          })

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

你可能感兴趣的:(React(h5掉微信扫一扫功能))