小程序中的web-view与h5网页之间的交互

Posted 我若亦如风

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了小程序中的web-view与h5网页之间的交互相关的知识,希望对你有一定的参考价值。

 

官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

web-view

  • 基础库 1.6.4 开始支持,低版本需做兼容处理

web-view 组件是一个可以用来承载网页的容器,会自动铺满整个小程序页面。个人类型与海外类型的小程序暂不支持使用。

 

属性名 类型 默认值 说明
src String   webview 指向网页的链接。可打开关联的公众号的文章,其它网页需登录小程序管理后台配置业务域名。
bindmessage EventHandler   网页向小程序 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); 
</script>


2,网页向小程序传值

 网页像小程序传值的 有两种方式可以实现,一种是通过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>

// javascript
wx.miniProgram.postMessage({ data: ‘foo‘ })
wx.miniProgram.postMessage({ data: {foo: ‘bar‘} })
 

 

 <!-- wxml -->
<web-view src="http://a.html?id=123" bindmessage="postMessage"></web-view>

// javascript
postMessage(e) {
    console.log(e)
},

 


参考链接:https://blog.csdn.net/laishaojiang/article/details/82181952

 

以上是关于小程序中的web-view与h5网页之间的交互的主要内容,如果未能解决你的问题,请参考以下文章

小程序与H5如何互相跳转

小程序总结(十五)- 关于web-view嵌套的H5页面的分享功能

微信小程序和H5之间互相跳转互相传值

微信小程序封装H5使用web-view源码

微信小程序web-view环境下H5跳转小程序页面方法

微信小程序(20)-- 小程序与H5如何互相跳转