文档地址 

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>

# webview # 前端 # uni-app
Logo
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}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue