uniapp H5扫码解决方案

最新推荐文章于 2025-04-03 23:35:46 发布

BLUESKYHOST

最新推荐文章于 2025-04-03 23:35:46 发布

阅读量4.1k

点赞数

分类专栏： uniapp 基础文章标签： uniapp/h5扫码 h5扫码

本文链接：https://blog.youkuaiyun.com/BLUESKYHOST/article/details/116980816

版权

基础同时被 2 个专栏收录

34 篇文章

订阅专栏

uniapp

3 篇文章

订阅专栏

本文介绍了一个使用WebView实现二维码扫描的应用案例。通过HTML、JavaScript及uni-app SDK，详细展示了如何设置扫描按钮并处理扫描结果，同时提供了前端与原生应用间通信的具体实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过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代码地址