小程序嵌套h5界面，在h5界面调用小程序的扫一扫功能（自用方法3）

浩星

已于 2022-05-23 19:16:20 修改

阅读量8k

点赞数 1

分类专栏：小程序文章标签：小程序 webview android 扫一扫

于 2022-05-23 19:15:19 首次发布

本文链接：https://blog.youkuaiyun.com/qq_41619796/article/details/124932328

版权

小程序专栏收录该内容

50 篇文章

订阅专栏

本文介绍了在H5页面中实现微信小程序扫码功能的三种方法。方法1通过调用微信官方的小程序API，但存在页面闪烁的问题。方法2是直接使用微信扫一扫，但在小程序内不适用。最后，作者分享了自用的方案3，即手动控制摄像头进行扫码，需要用户授权，但避免了页面闪烁，提供了更好的用户体验。文章提供了详细的操作步骤和代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：

因为小程序对项目要求比较多，我们经常会使用webview嵌套H5界面来，然后在H5界面来实现我们的一些功能页面，这里就会遇到一些问题，比如H5界面的微信扫码功能。

实现方法的尝试：（自用方法3）

方法1：

在h5界面中，点击调用小程序的官方扫一扫功能，点击H5让动态跳转到小程序的组件方法里面，然后调用小程序的官方扫一扫方法，扫码完成以后，在拿到数据跳转到我们的H5界面

弊端：

会出现明显的页面闪烁，我们H5跳转小程序第一次闪烁，小程序跳转回来第二次闪烁，用户体验效果不好。

附官方方法：

小程序官方扫一扫方法：js中调用就行

wx.scanCode({
    success(res) {
        console.log(res)
        console.log(res.result);
    }
})

参数

属性	类型	默认值	必填	说明	最低版本
onlyFromCamera	boolean	false	否	是否只能从相机扫码，不允许从相册选择图片	1.2.0
scanType	Array.<string>	['barCode', 'qrCode']	否	扫码类型	1.7.0
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

object.success 回调函数

...

方法2：

使用微信扫一扫功能，微信公众号的h5使用比较好，但是小程序嵌套的H5无法成功。

wx.scanQRCode({
    desc: 'scanQRCode desc',
    needResult: 1,
    scanType: ['qrCode'],
    success: function(res) {
       let getCode = res.resultStr

      },
    fail: function(res) {
        alert('fail' + res)
      }
})

方法3：（自用）

在调研各种方法以后，最终使用了这个方法。但是点击扫一扫，必须用户授权，才可以打开我们的扫一扫弹框。方法是我们手动控制打开摄像头，然后获取扫码内容，请看下面的操作步骤。

1、界面引入我们的配置文件

scan.js （配置文件）

链接：https://pan.baidu.com/s/1VugLIvaRrTZtokU_-PQBnw

提取码：dyt7

h5scan.js （对扫码方法进行二次封装的js）

核心方法是三个操作摄像头的方法

function H5Scan() {
    var selectedDeviceId = ''; //当前的摄像头
    var resultText = ''; //二维码内容
    var resultError = ''; //二维码报错信息
    var callback;

    //调用我们的scan.js里面的方法
    var codeReader = new ZXing.BrowserMultiFormatReader();


    this.callBack = function (fun) {
        callback = fun;
    };

    /**
     * 初始化摄像头
     */
    this.initFun = function () {
        codeReader.listVideoInputDevices()
            .then((videoInputDevices) => {
                if (videoInputDevices.length >= 1) {
                    //获取最后一个摄像头
                    selectedDeviceId = videoInputDevices[videoInputDevices.length - 1].deviceId
                }
            })
            .catch((err) => {
                console.error(err)
                dialogBox.showMessDialog("扫码失败:" + err);
            })
    };
    /**
     * 打开摄像头
     */
    this.openCodeReader = function () {
        codeReader.decodeFromVideoDevice(selectedDeviceId, 'video', (result, err) => {
            if (result) {
                resultText = result.text;
                this.closeCodeReader('success', result.text); //关闭摄像
            }
            if (err && !(err instanceof ZXing.NotFoundException)) {
                resultError = err;
                this.closeCodeReader('error', err); //关闭摄像
            }
        })
    };

    /**
     *@关闭摄像头
     *  title = 成功/失败
     *  text = 二维码内容/报错信息
     *  resultText 扫码成功以后的内容
     *  resultError 扫码失败以后的报错信息
     * */
    this.closeCodeReader = function (title, text) {
        if (callback) {
            eval(callback(text));
        }
        codeReader.reset()
        $('.modal').hide() //关闭弹框
    };
    /**
     * 打开弹框
     */
    this.openScanFun = function () {
        this.openCodeReader()
        setTimeout(() => {
            $('.modal').show()
        }, 500)

    };
    /**
     * 初始化函数
     * @param callback 回调函数
     */
    this.init = function (callback) {
        this.callBack(callback);
        this.initFun();
        this.openScanFun();
    }
}

var H5Scan = new H5Scan();

2、封装了一个方法 openH5Scan ，根据你的实际需要，如果不要弹框，界面写个video也行。

 //扫一扫弹框封装
    this.openH5Scan = function (callback) {

        //我这里是提前加载两个js，你自己用放script里面也可以
        this.loadJsOrCss("/js/qrcode/scan.js");
        this.loadJsOrCss("/js/qrcode/h5scan.js");




        //我这里是封装的一个弹框+内容
        var html = `
        <div class="modal" style="position: fixed;width: 100vw;height: 100vh;background: rgba(0,0,0,.8);top: 0;display: none;z-index: 100000;">
          <div class="closeImg" onclick="$('.modal').hide()" style="width: 15vw;height: 15vw;float:right;">
              <img src="../../images/close-1.png" alt="关闭" style="width: 100%;height: 100%;cursor: pointer;"/>
          </div>
          <div class="content">


            //***核心内容，如果你不需要弹框，只写video就行***
              <video id="video" autoplay="true" muted="true" playsinline="true" style="width: 90vw;height: 80vh;position: absolute;left: 5vw;top: 10vh;"></video>




          </div>
      </div>
      `;
        var val = $('.modal').html();
        //如果页面没有该dom，添加
        if (!val) {
            $('body').append(html);
        }

        //调用H5scan.js里面封装的方法
        H5Scan.init(callback);


    }

3、拿到扫码内容，根据你的实际需要来截取方法，没必要非按照我的来

/**
   * 扫一扫
   * @param function  回调方法，获取扫码结果
   * @param e 扫码返回值JSON格式
 */
 page.openH5Scan(function (e) {
     $("#result").html(e);
 });