webview 嵌入 h5 页面互相通信

webview 嵌入 h5 页面互相通信,第1张

应用场景:小程序webview加载一个h5广告页,倒计时结束或者点击跳过按钮,跳转指定小程序某个页面(如首页)

第一步:H5页面引入小程序微信sdk

第二步:

第三步:小程序新建一个页面调用webview组件(暂时用ip地址测试,上线请配置业务域名等信息)

h5跳转小程序就是这么简单,但有一点要注意,那就是h5页面跳转小程序页面路径得是相对路径。

错误示例:

正确示例:

PS:作为一个小白,被这块坑了一天才发现问题所在,只有相对路径才会跳转成功,绝对路径是不会跳转的。

在微信小程序里,webviewH5向miniProgram通讯只能通过 postMessage 函数

然而这个函数却很鸡肋,小程序官方文档是这样描述的: 向小程序发送消息,会在特定时机(小程序后退、组件销毁、分享)触发组件的message事件

而且小程序官方文档里没有提到miniProgram如何向webviewH5通讯

在这个demo中, 展示了我是如何让webviewH5和miniProgram互相通讯

其实原理很简单:

success

failure

cancel

https://github.com/abu3389/wx_app_webview

附加: Uniapp与webview通信用法

在web-view加载的本地及远程HTML中调用uni的API及网页和vue页面通讯

https://ask.dcloud.net.cn/article/id-35083__page-9


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/11430609.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-16
下一篇 2023-05-16

发表评论

登录后才能评论

评论列表(0条)

保存