在小程序端使用web-view内嵌H5网页,web-view通过设置src属性来指定网页即可在小程序中显示。一个页面只能有一个web-view,且会自动铺满整个小程序页面。
web-view官方文档:web-view | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
H5端代码:
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
// javascript
wx.miniProgram.navigateTo({url: '/path/to/page'})
wx.miniProgram.postMessage({ data: 'foo' })
wx.miniProgram.postMessage({ data: {foo: 'bar'} })
wx.miniProgram.getEnv(function(res) { console.log(res.miniprogram) })
小程序端代码:
<web-view src="{{url}}" bindmessage="onLoadMessage" bindload="onWebLoad" binderror="onWebError"></web-view>
web-view组件属性:
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
src | string | 否 | webview 指向网页的链接。可打开关联的公众号的文章,其它网页需登录小程序管理后台配置业务域名。 | 1.6.4 | |
bindmessage | eventhandler | 否 | 网页向小程序 postMessage 时,会在特定时机(小程序后退、组件销毁、分享)触发并收到消息。e.detail = { data },data是多次 postMessage 的参数组成的数组 | 1.6.4 | |
bindload | eventhandler | 否 | 网页加载成功时候触发此事件。e.detail = { src } | 1.6.4 | |
binderror | eventhandler | 否 | 网页加载失败的时候触发此事件。e.detail = { src } | 1.6.4 |
H5网页中可使用JSSDK 1.3.2提供的接口返回小程序页面。 支持的接口有:
接口名 | 说明 | 最低版本 |
---|---|---|
wx.miniProgram.navigateTo | 参数与小程序接口一致 | 1.6.4 |
wx.miniProgram.navigateBack | 参数与小程序接口一致 | 1.6.4 |
wx.miniProgram.switchTab | 参数与小程序接口一致 | 1.6.5 |
wx.miniProgram.reLaunch | 参数与小程序接口一致 | 1.6.5 |
wx.miniProgram.redirectTo | 参数与小程序接口一致 | 1.6.5 |
wx.miniProgram.postMessage | 向小程序发送消息,会在特定时机(小程序后退、组件销毁、分享)触发组件的message事件 | 1.7.1 |
wx.miniProgram.getEnv | 获取当前环境 | 1.7.1 |
小程序向网页传值
小程序向网页内传递参数。可将需要带向网页的值通过拼接参数方式实现,然后再在网页内截取。
<!-- 小程序page -->
<web-view src="http://a.html?id=123"></web-view>
<!-- 网页 a.html-->
<script>
let id = getUrlParam('id');
</script>
网页向小程序传值
- 通过url和小程序的转发方法
将需要传给小程序的值当做参数放在当前url上,小程序中通过点击转发即可获取。这种方法缺点是只能在点击转发时才可传。
onShareAppMessage: function (options) {
let webViewUrl = options.webViewUrl;//web-view当前的网址
}
- 使用微信sdk的postMessage方法
通过使用微信sdk的postMessage方法,然后小程序web-view中的bindmessage方法会在特定时机(小程序后退、组件销毁、分享)触发并收到消息。e.detail = { data }
H5端:
<!-- 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)
},
注意:
网页向小程序 postMessage 时,会在特定时机(小程序后退、组件销毁、分享)触发并收到消息。
也就是说,这唯一的一种通信方式,并不是按照常规的思路“网页向小程序发送数据,然后小程序监听到并执行回调”运作的,只有(小程序后退、组件销毁、分享)这三种情况下,bindmessage才会被触发并接收消息。
所以,即使在网页中调用了wx.miniProgram.postMessage(),小程序也不会立即响应,bindmessage所绑定的函数不会执行。
<!-- html -->
<script type="text/javascript">
wx.miniProgram.navigateBack({delta: 1})
wx.miniProgram.postMessage({ data: '123' })
</script>