前言：
因为小程序对项目要求比较多，我们经常会使用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);
}
})
参数
|
属性 |
类型 |
默认值 |
必填 |
说明 |
最低版本 |
|
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);
});
