【小程序内嵌H5扫描一维码/二维码】-Toy模板网

这篇具有很好参考价值的文章主要介绍了【小程序内嵌H5扫描一维码/二维码】。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一. 需求描述：小程序内嵌的H5工程里面扫描快递单上的一维码/二维码，并自动显示在页面上

效果图 【小程序内嵌H5扫描一维码/二维码】

二. 实现方式：小程序web-view支持JSSDK接口中包含微信扫一扫接口，小程序内嵌的H5页面可以直接调起扫码功能，参考文档如下：文档链接

【小程序内嵌H5扫描一维码/二维码】

三. 代码实现：

1. 先安装jssdk（我是用的公司公共的sdk包，用法一样）

npm install weixin-js-sdk

2.在mounted调用权限配置方法，appId、timestamp、nonceStr、signature的值通过后端接口返回

   // 获取微信签名信息
    getWeChatInfo(){
        return new Promise((resolve,reject) => {
            let params = {
             //这里的url一定传当前页面路径
                url: window.location.href
            }
            this.$ajax("getWechatInfo",params).then((res)=>{
                let result = res.data;
                if(result.code === 0){
                    this.appId =result.data.appId
                    this.nonceStr =result.data.nonceStr
                    this.signature =result.data.signature
                    this.timestamp =result.data.timestamp
                    resolve();
                }else{
                    reject();
                }
            })
        })
    },

3.拿到微信相关信息，初始化微信配置

     initWeChat(){
           return new Promise((resolve,reject)=>{
            window.wx.config({
               debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
               appId: this.appId, // 必填，公众号的唯一标识
               timestamp: this.timestamp, // 必填，生成签名的时间戳
               nonceStr: this.nonceStr, // 必填，生成签名的随机串
               signature: this.signature,// 必填，签名
               jsApiList:[
                   'scanQRCode'
               ]
          });
          //如果要在微信初始化之后立马执行的行为就写ready里面，如果是需要用户触发的行为，可在用户触发的函数里去执行相关操作，无需写在ready里面
           window.wx.ready(()=>{
              window.wx.checkJsApi({
                   jsApiList:[
                            'scanQRCode'
                   ],
                   success:res=>{
                      resolve();
                   } 
               });
          });
            window.wx.error(res=>{
                 reject();
             });
          });
        },

注意点1：一定要从后端拿到正确的签名信息后，再进行微信初始化，否则config没拿到数据会报错
注意点2：开启调试模式，看config的返回：
config：ok----->微信初始化配置成功
config：无效签名----->可去微信签名校验网站校验后端返回的签名是否正确，微信 JS 接口签名校验工具；
config：无效路径----->后端检查是不是域名没有加入白名单

   async mounted() {
        //一进页面拿到签名信息后就进行微信初始化
       await this.getWeChatInfo();
       this.initWeChat ()
    },

4.点击扫一扫按钮：执行扫一扫scanQRCode方法

 //扫一扫的点击事件
   scanFun(){
               //这个赋值很重要很重要，一定不能少，已踩坑
               let that = this
               window.wx.scanQRCode(
                    {
                      needResult:1, // 当needResult 为 0 时，微信处理扫码结果
                      scanType: ["barCode"],//一维码barCode,二维码qrCode
                      success: function (res) {
                           let result = res.resultStr; 
                          //扫描返回的成功结果
                           console.log('扫描成功的结果',result); 
                        //    处理二维码扫描结果
                        //    let MMM = result.split('=')[1]
                        //    that.express_id = eval('(' + MMM + ')')['k5']
                        //    处理一维码扫描结果
                        that.express_id = result.split(',')[1]
                       },
                       fail:function(err){
                         console.log('扫描失败',err);
                       }
                 }
              )
            },

注意点：因为success方法指向闭包，所以this属于闭包，由此在success回调函数里是不能直接通过this.express_id 去赋值，如果我们要使用的话，可以在闭包之外先把this赋值给另一个变量文章来源地址https://www.toymoban.com/news/detail-488607.html

到了这里，关于【小程序内嵌H5扫描一维码/二维码】的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！