小程序内嵌h5页面分享_微信小程序webview内页面分享

本文介绍了如何在微信小程序中,当webview内嵌的H5页面需要分享时,实现在分享后被分享用户能跳转到相应H5页面的方法。通过H5页面调用wx.miniProgram.postMessage传递参数,小程序页面使用bindmessage接收并更新webview的src,确保动态参数的正确传递。
摘要由CSDN通过智能技术生成

6ef693e7c4fd24981781739ce9c17cb5.png

因为项目原因,之前在微信小程序内部使用 webview 嵌套了 h5 页面,现在要添加一个新的功能,用户在哪个页面进行了分享,被分享的用户从链接进来就跳转到哪个分享页面。

先了解一下 web-view 组件的限制,web-view 是承载网页的容器,会自动铺满整个小程序页面。目前个人类型小程序不支持使用。

src 属性里放置 webview 要打开的网页链接,需要注意的是在管理后台配置要访问网页的域名,否则生产模式无法进行访问。开发版和体验版可以通过点击小程序右上角三个点打开调试来进行访问。

小程序页面转发分享需要自身定义了一个转发的相关事件 onShareAppMessage,这个事件在设置之后可以通过点击小程序右上角的三个点来触发,也可以通过为小程序页面添加 button 标签,设置 button 的属性 open-type=”share” 来触发。

webview 是内嵌的网页,内部页面无法直接调起小程序的转发。

这个需求实现的特殊之处在于要分享的页面为 webview 中的页面,而 webview 作为一个容器,它放在了小程序的一个页面中,我们所看到的页面跳转都是在这个容器中进行的,小程序无法直接获取容器的跳转路径。

所以为了实现 webview 中的页面分享,把 h5 页面地址作为参数传输࿰

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值