wdly-app-shell/pages/index/index.vue

<template>
	<view class="content">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<web-view :src="url" :fullscreen='false' @message="messageData"></web-view>
	</view>

</template>

<script>
	const jpushModule = uni.requireNativePlugin('JG-JPush')
	var wv
	export default {
		data() {
			return {
				title: 'wdly',
				// 正式
				url: 'http://139.9.102.170:10012/#/',
				// 测试
				// url: 'http://139.9.102.170:10011/#/',
				src: "",
				canBack: false,
			}
		},
		onBackPress() {
			if (wv && this.canBack) {
				wv.back();
				return true;
			}
			return false;
		},
		onReady() {
			// #ifdef APP-PLUS
			var self = this;
			var currentWebview = this.$scope.$getAppWebview();
			//此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效，非v3编译模式使用this.$mp.page.$getAppWebview()
			setTimeout(function() {
				wv = currentWebview.children()[0];
				wv.addEventListener(
					"progressChanged",
					function(e) {
						wv.canBack(function(e) {
							self.canBack = e.canBack;
						});
					},
					false
				);
			}, 500); //如果是页面初始化调用时，需要延时一下
			// #endif
		},
		onLoad() {
			var height = 0; //定义动态的高度变量，如高度为定值，可以直接写
			uni.getSystemInfo({
				//成功获取的回调函数，返回值为系统信息
				success: (sysinfo) => {
					console.log(sysinfo)
					height = sysinfo.windowHeight; //自行修改，自己需要的高度 此处如底部有其他内容，可以直接---(-50)这种
				},
				complete: () => {}
			});
			let info = uni.getSystemInfoSync();
			let top = info.statusBarHeight;
			console.log(info, 12312312312);
			var currentWebview = this.$scope.$getAppWebview(); //获取当前web-view
			setTimeout(function() {
				var wv = currentWebview.children()[0];
				wv.setStyle({ //设置web-view距离顶部的距离以及自己的高度，单位为px
					top: top, //此处是距离顶部的高度，应该是你页面的头部
					// bottom:0,//防止输入框被软键盘遮挡
					height: height - top, //webview的高度
					scalable: false, //webview的页面是否可以缩放，双指放大缩小
				})
				// wx.setTitleNViewButtonStyle({
				// 	index:0,
				// 	styles:{
				// 		type:'back'
				// 	}
				// }) 
			}, 1000);
			// 监听极光连接状态
			uni.$on('connectStatusChange', (connectStatus) => {
				if (connectStatus) {
					var currentWebview = this.$scope.$getAppWebview();
					var wv = currentWebview.children()[0];
					// 取得应用程序对应的 RegistrationID。 只有当应用程序成功注册到 JPush 的服务器时才返回对应的值，否则返回空字符串
					jpushModule.getRegistrationID(result => {
						console.log(result, "注册ID.....")
						wv.evalJS(`getVueMessage(${JSON.stringify(result.registerID)})`);
					})
				}
			})
		},
		onUnload() {
			// 移除监听事件  
			uni.$off('connectStatusChange')
		},
		methods: {
			messageData(e) {
				const data = e.detail.data
				let url = data[0].url
				uni.downloadFile({
					url: url, // 文件的下载链接
					success: function(res) {
						// 下载成功
						if (res.statusCode === 200) {
							// 打开文件
							uni.openDocument({
								filePath: res.tempFilePath,
								success: function(res) {},
								fail: function(error) {}
							});
						}
					},
					fail: function(error) {}
				});
			}
		}
	}
</script>

<style>
	.content {}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
</style>sss