uniapp H5扫码解决方案 拼搏现实的明天。 2022-10-20 13:51 197阅读 0赞 # 通过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代码 [地址][Link 1] [Link 1]: https://gitee.com/blueskyliu/scan-html
还没有评论,来说两句吧...