uniapp创建应用，小程序端，App端，H5端关于使用WebView调用扫码功能的简单实现

最新推荐文章于 2024-09-19 09:58:11 发布

能学到知识吗

最新推荐文章于 2024-09-19 09:58:11 发布

阅读量1.2k

点赞数

文章标签： uni-app 小程序 javascript vue.js

本文链接：https://blog.csdn.net/asdmd11153164/article/details/127105796

版权

小程序端

小程序只能使用webview，不能使用iframe，且webview只能引入网络网页，不能引入本地网页。

src地址为官方示例。需要引入webview的页面
<view class="box">
		<web-view class="webview" src="https://uniapp.dcloud.io/static/web-view.html" 
          @message="handleMessage"> 
        </web-view>
</view>

handleMessage(evt){
				console.log(evt,87878787)
				console.log("接收到数据2："+ JSON.stringify(evt.detail.data))
				if(evt.detail.data[0].action == "message"){
					// 允许从相机和相册扫码
					uni.scanCode({
						success: function (res) {
							console.log('条码类型：' + res.scanType);
							console.log('条码内容：' + res.result);
						}
					});
				}  
			},

H5端

h5端可以引入webview和iframe标签，但是不能调用扫码功能，当年想发消息去实现某些功能时，不能使用uni.postMessage这个方法，按官方推荐可以使用window.postMessage。

App端

App端既能使用webview也能使用iframe。使用webview，可以引入网络网页和本地网页，引入网络网页的方式去触发消息，调用扫码功能和小程序端没多大区别。

引入本地网页，需要在根目录下新建 hybrid 文件，再hybrid文件下新建html文件，在webview引入的src目录为 /hybrid/html/index.html 。保证前两级固定即可。也可以在static下新建文件。详情可以参考官网。以下为引入本地网页示例。

index.html。同时在html文件下新建了css和js文件。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>测试</title>
		<link rel="stylesheet" type="text/css" href="css/index.css" />
	</head>
	<body>
		<div id="app">
			<div class="title">这个是hybrid下的html页面哦！</div>
			<div class="demo-div">
			<button id="postMessage" >点击扫码</button>
			</div>
		</div>
	</body>
    <!-- 引入uniapp的SDK (必须引用)-->
	<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni- 
    app/uni.webview.1.5.2.js">
	</script>
	<!-- 引入vue方法-->
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script type="text/javascript" src="js/index.js"></script>
	<script type="text/javascript">
		// 在引用依赖的文件后，需要在 HTML 中监听 UniAppJSBridgeReady 事件触发后，才能安全调 
           用 uni 的 API。  
		document.addEventListener('UniAppJSBridgeReady', function() {
			uni.getEnv(function(res) {
				console.log('获取当前环境：' + JSON.stringify(res));
			});
            document.getElementById('postMessage').addEventListener('click', function() {
                   uni.postMessage({
                     data: {
                       action: 'message'
                     }
                   });
        });
			
		});
	</script>
</html>

index.css

.title{
	padding: 20px 0;
	font-size: 14px;
	text-align: center;
	background-color: #F1F1F1;
}
.demo-div{
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	padding-top: 30px;
}
.demo-lable{
	text-align: center;
	width: 47%;
	border: 1px solid #f5f5f5;
	margin-top: 10px;
	margin-left: 5px;
	img{
		width: 50px;
		height: 50px;
	}
}

index.js

var app = new Vue({
	el: '#app',
	data: {
		textTip:"提示信息",
	},
	mounted() {
		
	},
	onLoad() {
		
	},
	onShow() {
		
	},
	methods: {
	}
})

在使用webview的页面

	<view class="box">
		<web-view class="webview" src="/hybrid/html/index.html" @message="handleMessage"></web-view>
	</view>

handleMessage(evt){
				console.log(evt,87878787)
				console.log("接收到数据2："+ JSON.stringify(evt.detail.data))
				if(evt.detail.data[0].action == "message"){
					// 允许从相机和相册扫码
					uni.scanCode({
						success: function (res) {
							console.log('条码类型：' + res.scanType);
							console.log('条码内容：' + res.result);
						}
					});
				}  
			},

使用iframe标签，得用load事件去监听，然后再去调用扫码功能。

<view class="box">
		<iframe class="iframe" src="/hybrid/html/local.html" @load="onload"></iframe>
	</view>

总结

这是在三端使用webview或者iframe的用法，一般而言，扫码功能是在点击之后触发。都是会用到uni.scanCode这个API。