uniapp使用web-view传参与回调

139 阅读1分钟

app页面接收子页面参数事件

网页向应用发送消息,在 <web-view> 的 message 事件回调event.detail.data 中接收消息。
父页面

<web-view src="/hybrid/html/map.html" @message="getMessage"></web-view>
    getMessage(evt){
            // 接收嵌套页面返回数据判断是否加载完成,evalJS调用的方法需要在加载完成之后才能找到,不然会报错
            if(evt.detail.data&&evt.detail.data[0].load == '1') {
                    this.getData();
            }
    },
    getTipsData() {
        // 接口请求返回数据
        // #ifdef APP-PLUS
            const currentWebview = this.$scope.$getAppWebview(); //获取当前web-view
            setTimeout(function() {
                    const wv = currentWebview.children()[0];
                    wv.evalJS("getTopData('" + JSON.stringify(data) + "')");
            }, 500);
       // #endif
    }

子页面

mounted: function() {
    // 加载完成给父页面发送消息
    // #ifdef APP-PLUS
       uni.postMessage({
            data : {
              load : '1'
            }
       })
       window.getTopData = (data) => {
            console.log(1111,data);
       };
    // #endif
}