uniapp 的app嵌套 uniapp的h5 交换及 webview动态设置高度

文档地址uni-app官网1 利用nvue的好处是webview页面不再是固定全屏可以设置是否有头，然后可以自己设置沉浸模式的颜色等2 动态设置高度就是通过api 获取设备高度利用里面的利用statusBarHeight 获取状态栏高度利用windowHeight 获取屏幕高度。然后相减去设定 webview去掉沉浸模式的高度statusbar =sysinfo.statusBarHei

gaoqiang1112

5641人浏览 · 2021-10-21 09:04:22

gaoqiang1112 · 2021-10-21 09:04:22 发布

文档地址

uni-app官网

1 需要页面是nvue 因为这样webview页面不再是固定全屏可以设置是否有头，然后可以自己设置沉浸模式的颜色等

2 动态设置高度就是通过api 获取设备高度利用里面的
利用 statusBarHeight 获取状态栏高度

利用 windowHeight 获取屏幕高度。然后相减去设定 webview去掉沉浸模式的高度

                    statusbar = sysinfo.statusBarHeight;
                   height = sysinfo.windowHeight;
                   this.height = height - statusbar
                   this.statusbarHeight = statusbar

3 uniapp的app套uniapp的h5的时候要具备以下条件

1) webview要是nvue

2）webview 组建上监听 @onPostMessage="onPostMessage" 返回值的结构如下图1

3）uniapp 的h5 项目要用h5模版也就是 template.h5.html 然后在模版页面下面 body标签的下面添加script标签引入 uniapp的 webviewapi

<script type="text/javascript" src="./static/uni.webview.1.5.2.js"></script>

4）h5 项目调用 uni 的跳转方法时如果要去 app 的跳转页面。需要这么写。

goback(){
	uni.webView.reLaunch({
		url: '/pages/mine/login/index'
	});
},

需要 uni去点一层 webview对象

5）h5 项目调用 app方法进行交互的写法

uni.webView.postMessage({
	data:{
		action,
		data
	}
})

app利用以下代码进行接收

<web-view :style="{height:height}" :webview-styles="webviewStyles" :src="webUrl"  @onPostMessage="onPostMessage"	></web-view>

       methods:{
			onPostMessage(res){
				console.log(res);
				let {action,data} = res.detail.data[0]
				switch(action){
					case 'console':
						console.info(data)
						break;
					case 'setTitleColor':
						this.colorValue =  data.color
						break;
					case 'hideLoading':
						uni.hideLoading()
						break;
				}
			},
		}

对应进行操作

整体代码 app端如下

<template>
	<view>
		<view :style="{height:statusbarHeight,'background-color':colorValue}">
		</view>
		<web-view :style="{height:height}" :webview-styles="webviewStyles" :src="webUrl" @onPostMessage="onPostMessage"	></web-view>
	</view>
</template>

<script>
	export default {
		data() {
		    return {
		        webUrl: "",
				height:0,
				statusbarHeight:0,
				webviewStyles:{
					progress:false
				},
				colorValue:'#9E000C'
		    };
		},
		onLoad(options) {
			uni.showLoading({
				title:'加载中',
				mask:true
			})
			this.webUrl = options.webUrl;
			let height = 0; //定义动态的高度变量
			let statusbar = 0; // 动态状态栏高度
			uni.getSystemInfo({ // 获取当前设备的具体信息
				success: (sysinfo) => {
					statusbar = sysinfo.statusBarHeight;
					height = sysinfo.windowHeight;
					this.height = height - statusbar
					this.statusbarHeight = statusbar
				}
			});
		},
		methods:{
			onPostMessage(res){
				console.log(res);
				let {action,data} = res.detail.data[0]
				switch(action){
					case 'console':
						console.info(data)
						break;
					case 'setTitleColor':
						this.colorValue =  data.color
						break;
					case 'hideLoading':
						uni.hideLoading()
						break;
				}
			},
		}
	}
</script>

<style>
</style>

整体h5代码如下 template.h5.html

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<meta name="apple-mobile-web-app-title" content="共享乡村">
		<link rel="apple-touch-icon" href="<%= BASE_URL %>static/image/favicon.ico" >
		<!-- 正式发布的时候使用，开发期间不启用。↓ -->
        <!-- <script src="/h5/touch-emulator.js"></script>
		<script>
            TouchEmulator();
			if (document.documentElement.clientWidth > 1024) {
				window.location.href = '/h5/pcguide.html#'+location.pathname+location.search;
			}
		</script>
        <style>
            ::-webkit-scrollbar{
                display: none;
            }
        </style>
        <script>
            var _hmt = _hmt || [];
            (function() {
                var hm = document.createElement("script");
                hm.src = "https://hm.baidu.com/hm.js?";// 百度统计key
                var s = document.getElementsByTagName("script")[0];
                s.parentNode.insertBefore(hm, s);
            })();
        </script> -->
        <!-- 正式发布的时候使用，开发期间不启用。↑ -->
		<script>
			document.addEventListener('DOMContentLoaded', function() {
				document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'
			})
		</script>
		<link rel="stylesheet" href="<%= BASE_URL %>static/index.css" />
	</head>
	<body>
		<!-- 该文件为 H5 平台的模板 HTML，并非应用入口。 -->
		<!-- 请勿在此文件编写页面代码或直接运行此文件。 -->
		<!-- 详见文档：https://uniapp.dcloud.io/collocation/manifest?id=h5-template -->
		<noscript>
			<strong>Please enable JavaScript to continue.</strong>
		</noscript>
		<div id="app"></div>
		<!-- built files will be auto injected -->
		<script>
			/*BAIDU_STAT*/
		</script>
	</body>
	<script type="text/javascript" src="./static/uni.webview.1.5.2.js"></script>
	
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^