fans-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: 'sanfan',
				url: 'http://175.178.26.5:20011/#/',
				// url: 'http://139.9.102.170:20011/#/',
				src: "",
				wv: null,
				canBack: false,
				top: 0, //webview 头部高度
				height: 0, //webview 高度
				kbHeight: 0 //键盘高度
			}
		},
		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() {




			uni.getSystemInfo({
				//成功获取的回调函数，返回值为系统信息
				success: (sysinfo) => {
					this.height = sysinfo.windowHeight; //自行修改，自己需要的高度 此处如底部有其他内容，可以直接---(-50)这种
				},
				complete: () => {}
			});
			let info = uni.getSystemInfoSync();
			this.top = info.statusBarHeight;

			var currentWebview = this.$scope.$getAppWebview();
			setTimeout(() => {
				this.wv = currentWebview.children()[0];
				this.wv.setStyle({ //设置web-view距离顶部的距离以及自己的高度，单位为px
					top: this.top, //此处是距离顶部的高度，应该是你页面的头部
					// bottom: 0, //防止输入框被软键盘遮挡
					height: this.height - this.top, //webview的高度
					scalable: false, //webview的页面是否可以缩放，双指放大缩小
				})
				// wx.setTitleNViewButtonStyle({
				// 	index:0,
				// 	styles:{
				// 		type:'back'
				// 	}
				// }) 
			}, 1000);



			// 监听键盘高度
			uni.onKeyboardHeightChange((obj) => {
				// 获取系统信息
				let _sysInfo = uni.getSystemInfoSync();
				let _heightDiff = _sysInfo.screenHeight - _sysInfo.windowHeight
				let _diff = obj.height - _heightDiff
				// 键盘高度
				this.kbHeight = (_diff > 0 ? _diff : 0) - 2;
				this.wv.setStyle({
					top: this.top,
					// webview的高度动态修改为减去键盘高度后的
					height: this.height - this.kbHeight,
					// bottom: 0,
					scalable: false,
				})
			})

			// 同时监听页面变化
			uni.onWindowResize(res => {

				if (res.size.windowHeight < this.height) {

					setTimeout(() => {
						this.wv.setStyle({
							top: this.top,
							// webview的高度动态修改为减去键盘高度后的
							height: this.height - this.kbHeight,
							// bottom: 0,
							scalable: false,
						})
					}, 50)
				} else {
					setTimeout(() => {
						this.wv.setStyle({
							top: this.top,
							// 这里可以根据自己情况微调
							height: this.height - this.top,
							bottom: 0
						})
					}, 50)
				}
			})


			// 监听极光连接状态
			uni.$on('connectStatusChange', (connectStatus) => {
				if (connectStatus) {

					// 取得应用程序对应的 RegistrationID。 只有当应用程序成功注册到 JPush 的服务器时才返回对应的值，否则返回空字符串
					jpushModule.getRegistrationID(result => {
						console.log(result, "注册ID.....")
						this.wv.evalJS(`getVueMessage(${JSON.stringify(result.registerID)})`);
					})
				}
			})
		},
		onUnload() {
			// 移除监听事件  
			uni.$off('connectStatusChange')
		},
		methods: {
			messageData(e) {
				const data = e.detail.data
				// 文件
				if (data[0].type == 'file') {
					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) {}
					});
					//扫码
				} else if (data[0].type == 'scanCode') {
					// 允许从相机和相册扫码
					uni.scanCode({
						success: (res) => {
							this.wv.evalJS(
								`getVueMessage(${JSON.stringify(res.result)} , ${data[0].scanType})`);
						}
					});
				} else if (data[0].type == 'push') {
					uni.createPushMessage({
						title: "通知",
						content: data[0].content
					})
				} else if (data[0].type == 'message') {
					plus.runtime.setBadgeNumber(data[0].count)
				}


			}
		}
	}
</script>

<style>
	.content {}

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