因业务需要将app代码兼容到h5端,h5端无法使用二维码扫描的api uni.scanCode 使用选择图片或者调用照相机照相的方式解析二维码,代码如下:

1、引入解析二维码的第三方文件reqrcode.js

request文件参考uniapp中实现h5扫描二维码功能_无名咸鱼的博客-CSDN博客_uniapp扫描二维码

var qrcode = require("@/static/js/reqrcode.js")

2、执行判断

ScanCode() {
        // 判断是浏览器还是app,true为浏览器,false为app
        if (navigator) {
          let that = this
          uni.chooseImage({
            sizeType: ['original'],
            count: 1,
            success: function(res) {
              const tempFilePaths = res.tempFilePaths
              qrcode.decode(tempFilePaths[0]);
              qrcode.callback=function(img){
                if(img=="error decoding QR Code"){
                  uni.showToast({
                    title:"识别二维码失败,请重新上传!",
                    duration:2000,
                    icon:'none'
                  })
                }else{
                  let result = img.split(",");
                  console.log(result,result);
                  uni.navigateTo({
                    url: that.gotoCodeUrl[result[1]] + result[0],
                  });
                }
              }
            }
          });
        }else{
          uni.scanCode({
            success: (res) => {
              let result = res.result.split(",");
              uni.navigateTo({
                url: this.gotoCodeUrl[result[1]] + result[0],
              });
            },
          });
        }
      },

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐