通过uni-app 把 h5 (vue.js) 转 App

公司项目，之前的h5（vue.js开发），想着用 uni-app 直接打包生成app。

使用 web-view <web-view v-if="h5Url" :src="h5Url"></web-view> 嵌入h5页面

代码

pages/index/index.vue

<template>
	<view class="content">
		<web-view v-if="h5Url" :src="h5Url"></web-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				h5Url: 'http://192.168.3.41:38080'
			}
		},
		onLoad() {
		},
        onReady() {
			// #ifdef APP-PLUS
			// app初始化时,获取web-viewe对象
			let currentWebview = this.$scope.$getAppWebview();
			// 此对象相当于html5plus里的plus.webview.currentWebview()。
			// 在uni-app里vue页面直接使用plus.webview.currentWebview()无效，
			// 非v3编译模式使用this.$mp.page.$getAppWebview()
			this.webview = currentWebview.children()[0];
			// #endif
		},
		// 触发返回行为的来源：'backbutton' ——左上角导航栏按钮及安卓返回键
		onBackPress(options) {
			this.backButtonPress++;
			if (this.backButtonPress > 1) {
				// 双击退出应用
				plus.runtime.quit();
			} else {
				// 单击返回, evalJS 在Webview窗口中执行JS脚本
				// web-view对象函数讲解 https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject
				this.webview.evalJS('window.history.back()')
			}
			setTimeout(() => {
				this.backButtonPress = 0;
			}, 600);
			return true;
		},
		methods: {
		
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>

pages.json

{
	"pages": [ 
        //pages数组中第一项表示应用启动页，参https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "解算",
				"navigationStyle": "custom"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "解算",
		"navigationStyle": "custom",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	}
}

问题一 原生h5页面嵌入uni-app后使用 h5（vue.js）的导航

继续使用 h5 之前自己的导航；

uni-app 内设置 页面 "navigationStyle": "custom"；取消原生导航栏

app 页面导航栏会出现塌陷

h5内 title 状态栏的高度 使用原生方式获取

let immersed = 0;
let ms = (/Html5Plus\/.+\s\(.*(Immersed\/(\d+\.?\d*).*)\)/gi).exec(navigator.userAgent);
if (ms && ms.length >= 3) { // 当前环境为沉浸式状态栏模式
	immersed = parseFloat(ms[2]); // 获取状态栏的高度
}

取消原生导航栏 具体介绍

CSS 变量 | uni-app-x

问题二 安卓设备返回键 webview h5 页面返回

因为 page/index/index 为应用入口页（即首页）内直接为 webView 导致底部按钮返回键单击无法返回

实现 安卓设置 底部返回键 单击h5页面正常回退 双击退出app

官方文档：

        onReady() {
			// #ifdef APP-PLUS
			// app初始化时,获取web-viewe对象
			let currentWebview = this.$scope.$getAppWebview();
			// 此对象相当于html5plus里的plus.webview.currentWebview()。
			// 在uni-app里vue页面直接使用plus.webview.currentWebview()无效，
			// 非v3编译模式使用this.$mp.page.$getAppWebview()
			this.webview = currentWebview.children()[0];
			// #endif
		},
		// 触发返回行为的来源：'backbutton' ——左上角导航栏按钮及安卓返回键
		onBackPress(options) {
			this.backButtonPress++;
			if (this.backButtonPress > 1) {
				// 双击退出应用
				plus.runtime.quit();
			} else {
				// 单击返回, evalJS 在Webview窗口中执行JS脚本
				// web-view对象函数讲解 https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject
				this.webview.evalJS('window.history.back()')
			}
			setTimeout(() => {
				this.backButtonPress = 0;
			}, 600);
			return true;
		},

安卓打包证书

推荐：香蕉云编 - 创建证书