微信小程序web-view：网页与小程序间通信限制

当前微信小程序的调试基础库最新版本为2.3.0。

web-view可用于在小程序中内嵌网页。只要符合官方的条件，为web-view设置src属性来指定网页即可在小程序中显示。一个页面只能有一个web-view，且会自动铺满整个小程序页面。

因此，对于那些只需要进行显示的页面，例如公司官网等，该组件省去了小程序开发的麻烦，直接内嵌显示即可。当然页面最好对移动端做了适配。

 

然而，若希望与小程序进行通信交互，限制就比较大了。

当前有个需求，需要制作一个微信小程序，一方面需要调用小程序的蓝牙功能，另一方面需要使用一些小程序已删除的js功能。

于是有了如下思路：

• 使用常规网页实现小程序删除的那部分js功能。
• 使用web-view将网页内嵌到小程序中显示。
• 网页与小程序之间进行数据的交互。
• 使用小程序调用蓝牙功能。

思路正常，但无法实现，关键卡在网页与小程序之间进行数据的交互这一步上。

网页与小程序之间进行数据的交互有两部分：

1. 小程序→网页

官网没有提供发送的接口，只能通过修改web-view的src属性，使用&来附加参数，并在网页中解析参数。

这一点可以做到。只是这意味着小程序每次向网页传参，都要刷新一次网页。

1. 网页→小程序

官方文档只提供了一种方式：

• 在web-view中添加bindmessage属性，并绑定一个函数，用于监听网页发来的消息。
• 在网页中引入jweixin-x.x.x.js，然后调用wx.miniProgram.postMessage()来向小程序发送数据。

然而，实际上官方文档特意对bindmessage进行了说明：网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。

也就是说，这唯一的一种通信方式，并不是按照常规的思路“网页向小程序发送数据，然后小程序监听到并执行回调”运作的，只有（小程序后退、组件销毁、分享）这三种情况下，bindmessage才会被触发并接收消息。

所以，即使在网页中调用了wx.miniProgram.postMessage()，小程序也不会立即响应，bindmessage所绑定的函数不会执行。

 

虽然网页和小程序之间即时传参无法实现，不过小程序可以通过web-view的src属性来切换网页，网页也可以通过wx.miniProgram.navigateTo()来切换小程序的页面。这些功能都是微信通过JSSDK为web-view所内嵌的网页提供的支持，但仅仅是提供了一部分JSSDK的功能，限制同样很多。