> 文章列表 > uniapp app通过web-view访问h5,h5通知app打开此h5页面

uniapp app通过web-view访问h5,h5通知app打开此h5页面

uniapp app通过web-view访问h5,h5通知app打开此h5页面

1 app调用h5页面如下:

<template>
    <view class="appPage">
        <web-view :src="link" @message="handleMsg"></web-view>
    </view>
</template>

onLoad(opts) {
            this.initPage();
},

    methods: {
            initPageData() {
                let path = `域名/pages/mindmap/index?=a${a}&b=${b}`;
                this.link= path;
            },

}

2 h5 返回app(app跳转到h5页面)--此时是h5页面

 <view class="item"   @click="toNoticeApp()" ></view>
            toNoticeApp(){
                //通知app打开本页面
                webUni.postMessage({
                    data: { //带到app的参数
                           a:a,
                           b:b
                    }
                });
            },

3 返回app 通过h5发出的通知 在app web-view接受此方法

//同1页面 一样

<template>
    <view class="appPage">
        <web-view :src="link" @message="handleMsg"></web-view>
    </view>
</template>

handleMsg(e){
                const a= e.detail.data[0].a;
                const b= e.detail.data[0].b;
                uni.navigateTo({
                    url: `/pages/dzq/index?a=${a}&b=${b}`
                })
            }