通过webview来解决这个问题
webView引入的代码案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>二维码扫描</title>
<link rel="stylesheet" type="text/css" href="lib/my.css">
</head>
<body>
<div>
<div class="qr-btn" node-type="qr-btn">扫描二维码1
<input node-type="jsbridge" type="file" name="myPhoto" value="扫描二维码1" />
</div>
</div>
<div>
<div class="qr-btn" node-type="qr-btn">扫描二维码2
<input node-type="jsbridge" type="file" name="myPhoto" value="扫描二维码2" />
</div>
</div>
<div class="result-qrcode">
</div>
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
<script src="lib/zepto.js"></script>
<script src="lib/qrcode.lib.min.js"></script>
<script src="lib/qrcode.js"></script>
<script>
//初始化扫描二维码按钮,传入自定义的 node-type 属性
$(function() {
Qrcode.init($('[node-type=qr-btn]'));
});
</script>
</body>
</html>
qrcode.js webView 发送消息核心操作
uni 是上面的html引入的uniapp的sdk
oFReader.onload = function(oFREvent) {
qrcode.decode(oFREvent.target.result);
qrcode.callback = function(data) {
//得到扫码的结果
// $('.result-qrcode').append(data + '<br/>');
uni.postMessage({
data: {
action: data
}
});
};
};
uniapp页面监听消息操作
<template>
<view class="content">
<!-- #ifdef H5 -->
<web-view
src="http://192.168.1.21/"></web-view>
<!-- #endif -->
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
},
mounted() {
// #ifdef H5
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event)
{
// For Chrome, the origin property is in the event.originalEvent
// object.
// 这里不准确,chrome没有这个属性
// var origin = event.origin || event.originalEvent.origin;
var origin = event.data
console.log(origin);
}
// #endif
},
methods: {
}
}
</script>
webView代码 地址