小程序web-view和原生程序交互

交互的前提是安装jssdk

npm i weixin-js-sdk

官方手册:开放能力 / web-view

实现跳转到原生程序的某个页面
wx.miniProgram.navigateTo({url: '/pages/xxx/xxx?from=xx&id=xxx&phone=xxx'});//可以携带参数,此外可以支持redirectTo等详见手册
onLoad(options) {}//小程序对应页面拿到参数
实现小程序分享web-view页面
//H5
wx.miniProgram.postMessage({
    data: {
        type: "share",// 标识分享操作
        title: xxx,// 动态标题
        path: "/pages/xxx/xxx?isofficial=1&pageurl=" + pageurl // 目标路径
    }
});
//Mini
<web-view id="webView1" src="{{pageurl}}" bindmessage="handleMessage">
handleMessage(e) {
    const msgData = e.detail.data[e.detail.data.length - 1]; // 取最新一次消息
    if (msgData.type === "share") {
        this.setData({
            shareTitle: msgData.title,    // 更新分享标题
            sharePath: msgData.path       // 更新分享路径
        });
    }
}
onShareAppMessage() {
    return {
        title: this.data.shareTitle,
        path: this.data.sharePath       // 携带动态路径
    };
}
//此时小程序分享的卡片打开就是这个web-view内的H5页面

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注