uniapp在web-view加载的本地及远程HTML中调用uni的API及网页和vue页面跳转携带参数

uniapp在web-view加载的本地及远程HTML中调用uni的API及网页和vue页面跳转携带参数1.关于web-view的说明web-view 是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面（nvue 使用需要手动指定宽高）。2.怎么使用首先-目录结构如下 loction.html 就是你所需要嵌套的 h5页面在.nuve页面创建一个web-view标签<te

Wen_Luo

3786人浏览 · 2021-09-27 19:51:39

Wen_Luo · 2021-09-27 19:51:39 发布

uniapp在web-view加载的本地及远程HTML中调用uni的API及网页和vue页面跳转携带参数

1.关于web-view的说明

web-view 是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面（nvue 使用需要手动指定宽高）。

2.怎么使用

首先-目录结构如下 loction.html 就是你所需要嵌套的 h5页面
在这里插入图片描述
在.nuve页面创建一个web-view标签

<template>
	<view class="content">
		<web-view  :style="{width: '100%',height:windowHeight+'px' }" :src="src">
		</web-view>
	</view>
</template>
<script>
	export default {
		data() {

			return {
				src:'/hybrid/html/gaode.html',  //这里的地址就是你要内嵌的h5页面路径

		onLoad() {
			var self = this
			uni.getSystemInfo({
				success: function(res) {
					console.log(res);
					self.windowHeight = res.windowHeight  ;
					self.windowWidth = res.windowWidth;
				}
			});

		},

		methods: {

			callouttap() {
				this.show = true
			},
			close() {
				this.show = false
			}

		}
	}
</script>

<!-- nvue文件样式和vue文件样式是存在差异的 -->
<style scoped lang="scss">
.content {
	
}
</style>

h5页面如下

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
		<title>web-view</title>
		
		<style>
			html,
			body,
			.map {
				width: 100px;
				height: 100px;

			}
		</style>
	</head>
	<body>
		<div class="map" tabindex="0">
			<button class="btn btn-red" type="button" data-action="switchTab">switchTab</button>
		</div>
		
		
<!-- 微信 JS-SDK 如果不需要兼容小程序，则无需引用此 JS 文件 -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<!--uni SDK 一定要引入 -->
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js">
		</script>
		<script type="text/javascript">
		// 在引用依赖的文件后，需要在 HTML 中监听 UniAppJSBridgeReady 事件触发后，才能安全调用 uni 的 API。
			document.addEventListener('UniAppJSBridgeReady', function() {
				document.querySelector('.map').addEventListener('click', function(evt) {
					var target = evt.target;
					if (target.tagName === 'BUTTON') {
						var action = target.getAttribute('data-action');
						if (action === 'switchTab') {
						
							uni.webView.navigateTo({
								url: '/pages/statistical/map/managementList?id=1'
							});
						}
					}
				});
			});
		</script>
	</body>
</html>