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

文档地址 

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

   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利用 以下代码进行接收

       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端如下

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

	
		
		
		
		
		static/image/favicon.ico" >
		
        
        
		
		static/index.css" />