小程序嵌套h5界面，在h5界面调用小程序的扫一扫功能（自用方法3） |
您所在的位置：网站首页 › 微信小程序实现扫码 › 小程序嵌套h5界面，在h5界面调用小程序的扫一扫功能（自用方法3） |
|
前言：
因为小程序对项目要求比较多，我们经常会使用webview嵌套H5界面来，然后在H5界面来实现我们的一些功能页面，这里就会遇到一些问题，比如H5界面的微信扫码功能。
目录：
实现方法的尝试：（自用方法3） 方法1： 在h5界面中，点击调用小程序的官方扫一扫功能，点击H5让动态跳转到小程序的组件方法里面，然后调用小程序的官方扫一扫方法，扫码完成以后，在拿到数据跳转到我们的H5界面 弊端： 附官方方法： 方法2： 使用微信扫一扫功能，微信公众号的h5使用比较好，但是小程序嵌套的H5无法成功。 方法3：（自用） 在调研各种方法以后，最终使用了这个方法。但是点击扫一扫，必须用户授权，才可以打开我们的扫一扫弹框。方法是我们手动控制打开摄像头，然后获取扫码内容，请看下面的操作步骤。 1、界面引入我们的配置文件 scan.js （配置文件） h5scan.js （对扫码方法进行二次封装的js） 核心方法是三个操作摄像头的方法 2、封装了一个方法 openH5Scan ，根据你的实际需要，如果不要弹框，界面写个video也行。 3、拿到扫码内容，根据你的实际需要来截取方法，没必要非按照我的来 实现方法的尝试：（自用方法3） 方法1： 在h5界面中，点击调用小程序的官方扫一扫功能，点击H5让动态跳转到小程序的组件方法里面，然后调用小程序的官方扫一扫方法，扫码完成以后，在拿到数据跳转到我们的H5界面 弊端：会出现明显的页面闪烁，我们H5跳转小程序第一次闪烁，小程序跳转回来第二次闪烁，用户体验效果不好。 附官方方法：小程序官方扫一扫方法：js中调用就行 wx.scanCode({ success(res) { console.log(res) console.log(res.result); } })参数 属性类型默认值必填说明最低版本onlyFromCamerabooleanfalse否是否只能从相机扫码，不允许从相册选择图片1.2.0scanTypeArray.['barCode', 'qrCode']否扫码类型1.7.0successfunction否接口调用成功的回调函数failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数（调用成功、失败都会执行）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 = ` //***核心内容，如果你不需要弹框，只写video就行*** `; 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); }); |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |