uniapp引入uniapp打包的H5跳转H5以及H5返回app方法

  1. 在app项目添加webview文件夹添加gridWebview.vue文件。代码如下




2. app跳转H5使用如下方法:

//跳转到对应的webview页面并传入url和其他参数
uni.navigateTo({
						url: item.url.startsWith('http') ? `/pages/webview/gridWebview?title=${item.name}&src=${item.url}` : item.url
					})

3.H5返回app使用如下方法:

app.vue页面需要引入uni.webview.1.5.2.js文件 (目前此方法只能在真机上返回,H5上目前点击无效)

 
onLaunch: function() {
			this.initScript()
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		},
		methods: {
			initScript() {
				var script = document.createElement('script');
				script.type = "text/javascript";
				script.async = true;
				script.src = "./static/js/uni.webview.1.5.2.js";
				document.head.appendChild(script);
				console.log(wx, "wx");
			}
		}

在需要返回的页面添加返回方法:

goBack() {
				console.log('0000000', uni, )
				uni.webView.postMessage({
					data: {
						action: 'uni-app', //可自己随意定义,需要与app中接收通信的方法对应
					}
				});
}

uniapp引入uniapp打包的H5跳转H5以及H5返回app方法_第1张图片

 

你可能感兴趣的:(uni-app,webview,前端)