uni-app web-view内置浏览器功能（后退、刷新当前页面、关闭等导航栏及进度条显示和subNvue原生窗口）

一、页面布局（自定义导航栏和web-view标签）

// 自定义导航栏
<view class="navBarBox">
		<!-- 状态栏占位 -->
		<view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
		<!-- 真正的导航栏内容 -->
		<view class="navBar">
			<view class="header-l">
				// 后退
				<text @click="backWv" class="iconfont headerIcon backIcon">&#xe6e1;</text>
				// 刷新
				<text @click="reloadWv" class="iconfont headerIcon">&#xe6d4;</text>
			</view>
			// 标题
			<view class="headerText">
			</view>
			// 关闭
			<view class="header-r" @click="close">
				<text class="iconfont headerIcon">&#xe67e;</text>
			</view>
		</view>
	</view>
		// 浏览器加载进度条
		<u-line-progress height="3" :showText="false" :percentage="percentage" v-if="percentage != 100"
			inactiveColor="#ffffff" activeColor="#008750"></u-line-progress>
		<view v-else style="height: 3px;background-color: #fff;"></view>
		// web-view 标签
		<web-view :webview-styles="webviewStyles" :update-title="false" :fullscreen="false"
			:src="shopNowDetails.merchantOfficialWebsiteUrl">
		</web-view>

二、动态计算web-view的高度 适应屏幕

web-view的webview-styles属性有两个属性值分别是top（距离顶部的距离）和height（标签的高度）
其中height属性可以通过获取屏幕的整体高度 - 状态栏的高度 - 自定义导航栏的高度 - 底部tab栏的高度得到的就是剩余web-view的高度
top属性值可以通过状态栏的高度 + 自定义导航栏的高度 得到的就是顶部的偏移量
动态获取元素高度值可通过uni.createSelectorQuery().in(this).select()来获取 代码如下

// 获取dom元素高度
domHeight(classDom) {
	return new Promise(function(resolve) {
		uni.createSelectorQuery().in(this).select(classDom)
			.boundingClientRect(data => {
				resolve(data.height);
				}).exec()
		})
},
// 计算高度 -3px为进度条的高度
async initDom() {
	//获取手机状态栏高度
	this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
	// 安全区
	this.safeAreaInsetsHeight = uni.getSystemInfoSync()['safeArea']["height"]
	// webview top值
	this.webviewStyles.top = this.statusBarHeight + await this.domHeight(".navBar") + 3
	// webview 高度值
	this.webviewStyles.height = this.safeAreaInsetsHeight - await this.domHeight(".navBar") - await this
		.domHeight(".footer") - 3
},

三、获取web-view对象

获取web-view对象 通过web-view对象的方法进行后退、关闭、和刷新的功能

// 如果有时候获取不到对象 可通过setTimeout延时获取
var wv
var currentWebview = this.$scope.$getAppWebview()
// wv为web-view对象
wv = currentWebview.children()[0]
// 后退
backWv() {
	wv.canBack(e => {
	// canBack: 查询Webview窗口是否可后退 
		e.canBack ? wv.back() : uni.navigateBack();
	});
},
// 刷新
reloadWv() {
	wv.reload()
},
// 关闭webview
close() {
	wv.close()
	uni.navigateBack();
},

四、监听当前地址加载进度

progressChanged() {
	//监听窗口加载进度变化事件
	// 更改this指向（必要）
	let that = this
	wv.addEventListener('progressChanged', (e) => {
	that.percentage = e.progress
	// e.progress可获取加载进度
	// this.percentage = e.progress
	}, false);
}

五、subNvue原生窗口

1、配置pages.json，创建原生窗口

文档地址：https://uniapp.dcloud.net.cn/collocation/pages.html#app-subnvues

{
			"path": "pages/webView/index",
			"style": {
				"navigationBarTitleText": "",
				"enablePullDownRefresh": false,
				"navigationStyle": "custom",
				"app-plus": {
					"subNVues": [
						{
							"id": "termsNvue", // 唯一标识 通过 uni.getSubNVueById('id') 获取 subNVues 的实例
							"path": "pages/webView/termsNVue", // 子窗体路径 subNVues 的 path 属性只能是 nvue 文件路径
							"type": "popup", // 原生子窗口内置样式，可取值：'popup',弹出层；"navigationBar",导航栏
							"style": {
								"position": "dock",
								"dock": "bottom",
								"height": "70%",
								"bottom": "0",
								"background": "transparent"
							}
						}
					]
				}
			}
		},

2、控制subNvue显示和隐藏

// 通过 id 获取 nvue 子窗体
subNVue = uni.getSubNVueById("termsNvue")
// 打开 nvue 子窗体  
// slide-in-bottom	是显示动画
subNVue.show('slide-in-bottom', 300)
// 隐藏
subNVue.hide('none', 0);

3、注入iconfont（无法引入本地资源图片）

// 注入iconfont
const domModule = uni.requireNativePlugin('dom')
domModule.addRule('fontFace', {
	'fontFamily': "myIconfont",
	'src': "url('https://at.alicdn.com/t/c/font_3853272_jwzmyv5tdp8.ttf?t=1678436755708')"
});
// 使用
const copyIcon = ref("\ue67f")

注：subNvue有许多需要注意的东西，和普通的vue写法不一样，我找了nvue和subNvue的文档供各位参考。

subNvue文档：https://ask.dcloud.net.cn/article/35948

nvue注意事项文档：https://uniapp.dcloud.net.cn/tutorial/nvue-outline.html