Webview
1、封装组件

<template>
	<view>
			<web-view :src="src"></web-view>
	</view>
</template>

<script>
	export default {
		props: {
			src: {
				type:String,
				default(){
					return ""
				}
			}
		},
		methods: {}
	}
</script>

<style>

</style>

2、引用组件-返回上一页

<template>
	<view class="page">
		<view class="">
			<!-- #ifndef MP-WEIXIN -->
			<yk-web :src="src"></yk-web>
			<view class="chat_fixed"></view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	import ykWeb from '../components/web_view.vue'
	var _self;
	var wv; //计划创建的webview
	export default {
		components:{
			ykWeb
		},
		data() {
			return {
				userinfo: {},
				src: 'XXXXXXX',
				type:'',
				id:''
			}
		},
		onBackPress(option) {
			console.log(option.from)
			if(option.from=="backbutton"){
				this.custom()
				return true
			}
		},
		onLoad(option) {
			_self = this
			
			if(option.type){
				_self.type = option.type
			}
			
		},
		onReady() {
			// #ifdef APP-PLUS
			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.setStyle({bottom:0})
			}, 1000); //如果是页面初始化调用时,需要延时一下
			// #endif
		},
		methods: {
			custom(){
				
				if(this.type=='chat'){
					uni.switchTab({
						url:'xxxxx'//上一页为tab
					})
				}
				if(this.type=="task"){
					uni.redirectTo({
						url:'xxxxx'+ _self.id//上一页为二级页面
					})
				}
			}
		}
	}
</script>

3、返回二级页面,未关闭上一级页面,会增加一层页面
解决方法如下:

//二级页面
<u-navbar :custom-back="customChange" back-icon-color="#fff" title-color="#fff" ></u-navbar>//u-view 自定义导航
	onBackPress(option) {
	//监听返回
					if(option.from=="backbutton"){
					this.customChange()
					return true
		}
	},
	methods: {
	customChange(){
	//返回
			uni.navigateBack({
				delta:2
			})
	},
	}
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐