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

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

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

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

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

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

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

所以为了实现 webview 中的页面分享，把 h5 页面地址作为参数传输，在接收的页面中取出并赋值到当前页面 webview 中的 src 中，即可进行展示。

如何拿到 webview 中当前的页面链接，以及一些动态参数如何传递给小程序？

动态参数包括要跳转的 h5 页面地址，分享链接展示的图片这些参数需要通过 h5 页面来进行获取，然后 h5 再传输给小程序，小程序分享的时候进行携带。

查阅开发文档 webview 看到 bindmessage 属性，网页向小程序 postMessage 时，会在特定时机(小程序后退、组件销毁、分享)触发并收到消息。e.detail = { data }，data 是多次 postMessage 的参数组成的数组。

H5 网页需要引入 JSSDK 1.3.2 提供的接口 wx.miniProgram.postMessage 向小程序传输参数。

webview 通过 bindmessage 定义的方法接收 h5 传输的数据，需要注意的是，每次发送数据后数据都会添加到 e.detail.data 中的数组，并不会清除掉上一次传递的数据，所以我们取数组的最后一位元素。

由此，h5 页面引入 JSSDK 1.3.2，使用 wx.miniProgram.postMessage 发送参数，小程序页面使用 webview 的 bindmessage 属性接收参数即可完成动态参数的传递。

小程序内嵌h5页面分享_微信小程序webview内页面分享相关推荐

微信小程序可以用python开发吗_微信小程序可以用python开发吗
现有业务主要包括小程序开发及运营推广,APP开发,公众号开发以及H5开发,提供微信小程序开发.朋友圈广告.微信支付等服务,协助企业数字化转型,打造智能化.智慧化的商业体系尤其是一些品牌的云服务器的价 ...
微信小程序上传图片到服务器总是失败_微信小程序怎么上传图片到服务器?
微信小程序怎么上传图片到服务器?相信很多人都会把小程序图片保存到本地吧,但是把图片上传到服务器就不一定了,下面一起随小编看看微信小程序怎么上传图片到服务器吧. 微信小程序怎么上传图片到服务器? 首先, ...
微信小程序python解析获取用户手机号_微信小程序获取用户手机号
获取微信用户绑定的手机号,需先调用wx.login接口. 小程序获取code. 后台得到session_key,openid. 组件触发getPhoneNumber 因为需要用户主动触发才能发起获取手 ...
微信小程序页面栈_微信小程序之页面传值(路由、页面栈、globalData、缓存)
1. 通过url带参数传递 1.1 固定参数传递例如,从 list 页面到 detail 页面, 传递一个或多个固定值 list页面传值: 点此进入 detail detail页面取值: onLoa ...
vue用公共组件页面传值_微信小程序页面传值、组件间通信总结
小程序是一种新的开放能力,开发者可以快速地开发一个小程序.小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验.对于微信小程序,前端开发应该不陌生,目前也是非常火,很多公司都会进行开发.对 ...
微信小程序页面栈_微信小程序开发中的页面栈及页面路由原理
摘要:小程序的开发方兴未艾,本文以图解的形式详细剖析了小程序开发中的页面栈及页面路由原理,对于该原理的深入理解有助于开发者更好地理解小程序的开发框架,更好地开发出功能强大的小程序. 微信小程序(以下简 ...
微信小程序页面栈_微信小程序使用页面栈改变上一页面的数据
微信小程序中如果从一个页面中进入下一个页面,如果下个页面的数据有删除或者增加再返回上一个页面的时候,就会导致页面不刷新(数据加载函数在onload中),从而造成数据不一致的情况.其实在微信小程序中是可 ...
微信小程序界面从右边滑出_微信小程序页面溢出左右滑动问题
微信小程序页面中view设置width:100%之后,页面右边会多出一块白区域,并且可以左右滑动,解决方法是给这个view加一个box-sizing:border-box; 欢迎使用Markdown ...
微信小程序界面从右边滑出_微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动，右侧滑动)...
本文实例讲述了微信小程序MUI侧滑导航菜单.分享给大家供大家参考,具体如下: 实现的目标--YDUI的Popup组件点击列表图标--左侧的菜单栏显示--点击关闭按钮或者右侧的遮罩层--左侧菜单栏关闭 ...

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

小程序内嵌h5页面分享_微信小程序webview内页面分享相关推荐

最新文章

热门文章