hg_zlxc_h5/pages/application/webView.vue

<template>
	<view class="page-web">

		<!-- <uni-nav-bar left-icon="back"  title="签署" left-text="返回" @clickLeft="navigateBack" statusBar="true"></uni-nav-bar> -->

		<view class="page-inner">
			<web-view :src="$store.state.webViewUrl" @message="message" @onPostMessage="handlePostMessage"></web-view>
		</view>

	</view>
</template>

<script>
	import learnDriveApi from '@/api/learnDrive.js'
	export default {
		data() {
			return {
				title: '加载中...',
				trainingApplyId: ''
			}
		},
		onLoad(options) {
			this.trainingApplyId = options.id
			let _this = this
			// const currentWebview = _this.$mp.page.$getAppWebview();

			this.shang()
		},
		mounted() {

		},
		methods: {
			shang() {
				let _this = this
				var currentWebview = this.$scope.$getAppWebview();
				setTimeout(()=>{
					console.log('currentWebview')
					console.log(currentWebview)
					let wv = currentWebview.children()[0]
					wv.addEventListener('loaded',  async function () {
						let webVeiwUrl = wv.getURL()
						console.log(webVeiwUrl)
						var reg = RegExp(/wait/i);
						if(reg.test(webVeiwUrl)){
							console.log('匹配成功了')
						// const [err, res] = await learnDriveApi.getTrainingApplyDetails({ trainingApplyId: _this.trainingApplyId })
						// let newTrainingOrderId = res.data.trainingApplyId
						// // 创建订单
						// let obj = {
						// 	trainingApplyId: res.data.trainingApplyId,
						// 	trainingClassId: res.data.trainingClassId,
						// 	trainingSchoolId: res.data.trainingSchoolId,
						// }
						// console.log(res1)
						// const [err2, res2] = await learnDriveApi.createOrder(obj)
						// console.log(res2)
						// if(!res2.data||!res.data2.trainingOrderId) return _this.$u.toast('创建订单失败')
						 uni.navigateTo({
							 url: '/pages/learnDriveStep/payMoney/payMoney?trainingApplyId='+_this.trainingApplyId
						 })
						}
						
						console.log('监听到了————————————————————')
						console.log(wv.getURL()) //获取url
						console.log(wv.getTitle()) //获取标题
					}, false);
				},500)
				
			},
			// 监听title是安卓原生事件
			shang1() { // 上传
				let _this = this
				// 获取所有的webview对象
				const currentWebview = _this.$mp.page.$getAppWebview();
				setTimeout(function() {
					// 获取当前页面的webview对象
					var web = currentWebview.children()[0];
					// 监听当前页面webview对象的title
					web.addEventListener('titleUpdate', (e) => {
						console.log('titleUpdate监听的什么呀', )
						let webVeiwUrl = web.getURL()
						console.log(webVeiwUrl)
						var reg = RegExp(/signaturecallback/i);
						if(reg.test(webVeiwUrl)){
						 uni.redirectTo({
							 url: '/pages/learnDriveStep/learnDriveStep?id='+_this.trainingApplyId
						 })
						}
					}, false)
					
					web.addEventListener('loaded', (e) => {
						console.log('loaded监听的什么呀', )
						let webVeiwUrl = web.getURL()
						console.log(webVeiwUrl)
						var reg = RegExp(/signaturecallback/i);
						if(reg.test(webVeiwUrl)){
						 uni.redirectTo({
							 url: '/pages/learnDriveStep/learnDriveStep?id='+_this.trainingApplyId
						 })
						}
					}, false)

				}, 200)
			},

			navigateBack() {
				uni.navigateBack()
			},
			onPullStateChange(e) {
				console.log('onPullStateChange 事件' + e)
			},
			onOverride() {
				console.log('onOverride 事件' + e)
			},
			message(e) {
				console.log('消息' + e)
			},
			handlePostMessage(e) {
				console.log('好消息' + e)
			}
		},
		onReady() {
			// #ifdef APP-PLUS
			var wv;
			var height = 0;

			uni.getSystemInfo({
				//成功获取的回调函数，返回值为系统信息
				success: (sysinfo) => {

					height = sysinfo.windowHeight; //自行修改，自己需要的高度 此处如底部有其他内容，可以直接---(-50)这种
				},
				complete: () => {}
			});
			var currentWebview = this.$scope
			.$getAppWebview() //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效
			console.log(height)
			setTimeout(function() {
				wv = currentWebview.children()[0]
				wv.setStyle({
					top: 70,
					height: height
				})
			}, 1000); //如果是页面初始化调用时，需要延时一下
			// #endif
		}
	}
</script>

<style>
	.page-web {
		flex: 1;
		width: 100%;
		flex-direction: column;
	}

	.page-inner {
		flex: 1;
	}
</style>