E企盈营销工具技术服务商 热线:4006-838-530

小程序中的webview与h5网页之间的交互

E企盈直播平台营销卖货系统

官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/web-view.htmlweb-view基础库 1.6.4 开始支持,低版本需做兼容处理web-view 组件是一个可以用来承载网页的容器,会自动铺满整个小程序页面。个人类型与海外类型的小程序暂不支持使用。客户端 6.7.2 版本开始,navigationStyle: custom 对 web-view 组件无效属性名类型默认值说明srcString webview 指向网页的链接。可打开关联的公众号的文章,其它网页需登录小程序管理后台配置业务域名。bindmessageEventHandler 网页向小程序 postMessage 时,会在特定时机(小程序后退、组件销毁、分享)触发并收到消息。e.detail = { data } 示例代码:!– wxml –!– 指向微信公众平台首页的web-view –web-view src=”https://mp.weixin.qq.com/”/web-view阅读文档发现,其实小程序的通过将h5的网址放在web-view标签的src 属性上即可打开,不过这h5的网址需要在微信后台设置为白名单。那么小程序与网页之间如何交互呢:1.小程序向网页传值小程序内打开网页的话,有时需要向网页内传递参数。可将需要带向网页的值通过拼接参数方式实现,然后再在网页内截取即可!– 小程序page –web-view src=”http://a.html?id=123″/web-view!– 网页 a.html–script    let id = getUrlParam(‘id’); /script2,网页向小程序传值 网页像小程序传值的 有两种方式可以实现,一种是通过url和小程序的转发方法,将需要传给小程序的值当做参数放在当前url上,小程序中通过点击转发即可获取。这种方法缺点是只能在点击转发时才可传 onShareAppMessage: function (options) {    let webViewUrl = options.webViewUrl;//web-view当前的网址}另外一种是通过使用微信sdk的postMessage方法,然后小程序web-viewd中的bindmessage方法会在特定时机(小程序后退、组件销毁、分享)触发并收到消息。e.detail = { data }  !– html –script type=”text/javascript” src=”https://res.wx.qq.com/open/js/jweixin-1.3.2.js”/script// javascriptwx.miniProgram.postMessage({ data: ‘foo’ })wx.miniProgram.postMessage({ data: {foo: ‘bar’} })  !– wxml –web-view src=”http://a.html?id=123″ bindmessage=”postMessage”/web-view// javascriptpostMessage(e) {    console.log(e)},

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 小程序中的webview与h5网页之间的交互
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏