实现方法的尝试：（自用方法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);});

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

qtp启动java程序_转： QTP六脉神剑之调用Java程序
查看( 1147 ) / 评论( 21 ) 六脉神剑之调用程序0Xp1zLN_0版权声明:原创作品,转载请以链接方式注明出自http://www.51testing.com/?35,否则将追究法律责 ...
小程序嵌套h5页面_微信小程序内嵌h5页面
概况使用标签能在小程序中打开外部网页,但是要打开的网页的域名必须跟小程序的业务域名(业务域名可以在小程序的后台管理界面添加)一致,否则在真机上是打不开的.如果开发工具上勾选了'不校验域名',在开发 ...
Atitit 使用h5技术( html css js)制作桌面程序gui界面解决方案attilax总结
Atitit 使用h5技术( html css js)制作桌面程序gui界面解决方案attilax总结 1.1. 理解Atwood定律 1 1.2. H5做出个html的ui是很方便的,跨平台 2 1 ...
Atitit 使用h5技术 html css js 制作桌面程序gui界面解决方案attilax总结
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! Atit ...
小程序嵌套h5页面_快速小程序开发之微信小程序内嵌 H5
简介:微信小程序中可以直接运行 web 页面,这一新组件 web-view 的产生,可能直接导致小程序数量迎来一波高峰.本篇博文将从业务选型,微信小程序后台配置,使用 web-view 完成登录业务以 ...
uniapp 小程序嵌套H5开发总结
项目需求是在uniapp小程序项目中嵌套H5页面,H5返回小程序需要传值给小程序进行通信. 好,百度一查确实可以实现用的uniapp提供的web-view(https://uniapp.dcloud ...
微信小程序嵌套h5页面怎么实现小程序支付
微信小程序嵌套h5页面怎么实现小程序支付小程序嵌套h5页面怎么实现小程序支付小程序中嵌套h5页面,但是不能再h5页面拉起小程序支付,这时是需要小程序方拉起支付目前的流程,外链发送订单请求拿到预支付 ...
app vue 真机运行_uni-app黑魔法：小程序自定义组件运行到H5平台
引言移动互联网的初期,囿于设备硬件性能限制,流量以原生App为主,iOS.Android是当时两大平台. 随着硬件及OS的更新换代,H5可承载的体验逐步完善,为提高开发效率.节约资源(复用代码)以及 ...
微信支付，JSAPI支付，APP支付，H5支付，Native支付，小程序支付功能详情以及回调处理
一.支付相关文档地址支付wiki:https://pay.weixin.qq.com/wiki/doc/apiv3/index.shtml 支付api: https://pay.weixin.qq. ...
微信小程序跳转到第三方H5网页
我开发过程中有小程序跳转到网页的需求,下面分享一下我的实现过程: 使用官方文档web-view组件:web-view 1.首先得通过微信公众平台配置业务域名,配置业务域名需要将校验文件上传到网站服务器 ...

小程序嵌套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、拿到扫码内容，根据你的实际需要来截取方法，没必要非按照我的来

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

最新文章

热门文章