uniapp APPwebviewH5，H5跳转APP内链接

记录：APP端内嵌webview H5页面，H5页面点击事件拿到值，在跳转回APP端

使用uniapp的webview  
 

• uni.webview.js 最新版地址：https://gitcode.net/dcloud/uni-app/-/raw/dev/dist/uni.webview.1.5.6.js

APP端：

<template>
	<web-view :src="to_url" :progress="true" class="web-view" @message="getMessage" ref="webview"></web-view>
</template>

<script>
	export default {
		props: {
			url: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				to_url: ''
			}
		},
		onLoad(options) {
			this.to_url ='http://xxxx:8081/page/page/index'
		},
		onShow() {
			// #ifdef APP-PLUS
			// 设置webview显示时顶部丢失问题
			var height = 0; //定义动态的高度变量，如高度为定值，可以直接写
			uni.getSystemInfo({
				//成功获取的回调函数，返回值为系统信息
				success: (sysinfo) => {
					height = sysinfo.windowHeight -
						40; //自行修改，自己需要的高度 此处如底部有其他内容，可以直接---(-50)这种，如果不减，页面会下沉，看不到底部导航栏
				},
				complete: () => {}
			});
			var currentWebview = this.$scope.$getAppWebview(); //获取当前web-view
			setTimeout(function() {
				var wv = currentWebview.children()[0];
				wv.setStyle({ //设置web-view距离顶部的距离以及自己的高度，单位为px
					top: 40, //此处是距离顶部的高度，应该是你页面的头部
					height: height, //webview的高度
					scalable: false, //webview的页面是否可以缩放，双指放大缩小,
				})
			}, 500); //如页面初始化调用需要写延迟
			// #endif
		},
		methods: {
			customBack() {
				// 在Webview页面中调用uni.navigateBack()  
				uni.navigateBack();
			},
			getMessage(event) { //在H5端使用通信返回App端
				let urlType = event.detail.data[0];
				console.log('urlType', urlType)
				switch (urlType.type) {
					case 'back':
						uni.navigateBack();
						break;
					case 'pageDetail':
						uni.navigateTo({
							url: '/detail/detail?id=' + urlType.data.id
						})
						break;
					default:
				}
			}
		}
	}
</script>

<style scoped>
	.web-view {
		width: 100vw;
		height: 100vh;
		overflow: auto;
	}
</style>

  

H5:

<template>
    <view class="page-index">
        <view class="" @click="back">
            返回
        </view>
        <view class="" @click="godetail(2)">
            返回id
        </view>

    </view>
</template>

<script>
    import webView from '@/utils/uni.webview.1.5.6.js'//引用
    export default {
        data() {
            return {}
        },
        components: {},
        onLoad() {

        },
        onShow() {},
        methods: {
            back() {
                uni.webView.postMessage({
                    data: {
                        data: '', //可自己随意定义，需要与app中接收通信的方法对应
                        type: 'back'
                    }
                });
                return
            },
            godetail(id) {
                uni.webView.postMessage({
                    data: {
                        data: id, //可自己随意定义，需要与app中接收通信的方法对应
                        type: 'pageDetail'
                    }
                });
            }

        }
    }
</script>

<style lang="scss" scoped>
    .page-index{}
</style>