支付宝小程序webview向网页传递参数的两种方法

追格官方小助手/ 2022年05月23日/ 小程序/ 浏览 4482

1.通过在地址后拼接参数。这种方式务必注意编码问题,即:小程序页面需要 encode一下。h5页面decode一下。


let name = xxx
my.navigateTo({
    url: `/pages/webview/webview?name=${encodeURIComponent(name)}`
})

// h5页面
mounted() {
    this.name = decodeURIComponent(util.getQueryString('name'))
}


2. 使用postmessage方式。


web-view 内嵌 H5 内通过 my.postMessage 向小程序 postMessage 消息,通过 my.onMessage 接收来自小程序的消息。


小程序通过 onMessage 属性注册函数接收 H5 发生过来的信息,在接收到信息后可通过 this.webViewContext.postMessage 向 H5 发送 postMessage 消息。


支持 web-view 的 postMessage 传递多个参数。


注意:双向通信能力的流程是 H5 先发消息给小程序,小程序接收到消息后再发消息给 H5。


具体可参考支付宝文档: 小程序与web-view内嵌H5相互通信

发表评论

暂无评论,抢个沙发...

客服 工单