小程序使用web-view实现与H5交互

在小程序端使用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'} })

小程序端：

扫描二维码关注公众号，回复： 13311469 查看本文章

<!-- 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>