当前位置:   article > 正文

uniapp app通过web-view访问h5,h5通知app打开此h5页面_uniapp 调用h5的方法

uniapp 调用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}`
                })
            }

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/天景科技苑/article/detail/899965
推荐阅读
相关标签
  

闽ICP备14008679号