您好,欢迎来到好土汽车网。
搜索
您的当前位置:首页【小程序内嵌H5扫描一维码/二维码】

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

来源:好土汽车网
一. 需求描述:小程序内嵌的H5工程里面扫描快递单上的一维码/二维码,并自动显示在页面上

效果图

二. 实现方式:小程序web-view支持JSSDK接口中包含微信扫一扫接口,小程序内嵌的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:无效签名----->可去微信签名校验网站校验后端返回的签名是否正确,
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赋值给另一个变量

因篇幅问题不能全部显示,请点此查看更多更全内容

Copyright © 2019- howto234.com 版权所有 湘ICP备2022005869号-3

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务