微信小程序组件 Web-view 定义：承载网页的容器
1.相关 api
| 接口名 | 说明 |
|---|---|
| wx.miniProgram.navigateTo | 参数与小程序接口一致 |
| wx.miniProgram.navigateBack | 参数与小程序接口一致 |
| wx.miniProgram.switchTab | 参数与小程序接口一致 |
| wx.miniProgram.reLaunch | 参数与小程序接口一致 |
| wx.miniProgram.redirectTo | 参数与小程序接口一致 |
| wx.miniProgram.postMessage | H5 向小程序发送消息，会在特定时机（小程序后退、组件销毁、分享）触发组件的 message 事件 |
| wx.miniProgram.getEnv | 获取当前环境 |
2.小程序->H5 通过 URL 拼接参数携带信息 navigateTo、reLaunch、redirectTo
实现方式：
wx.miniProgram.navigateTo({ url: '/h5/loading-page', })
wx.miniProgram.navigateTo({ url: '/h5/loading-page?type=ccccc', })
wx.miniProgram.navigateTo({ url: '/h5/loading-page?type=aaaaaa', })缺点：url 数据量有限，且需要打开界面
3.H5->小程序 wx.miniProgram.postMessage api
H5 页面传参：
//js项目直接引入sdk;
//vue项目使用引入sdk //需要安装依赖 npm install weixin-webview-jssdk
//使用的页面引入 import wx from "weixin-webview-jssdk"; //H5页面
小程序页面接收参数：
优点：接入成本低
缺点：向小程序发送消息，会在特定时机（小程序后退、组件销毁、分享）触发组件的 message 事件，只能这些特定时机；
####
方式三：内存共享
无法实现，原因 wx.setStorage 与 localStorage 隔离
localStorage.setItem('h5key','value')
wx.setStorageSync('wx-key', 'value')4.长连-Websocket
Websocket 简介：WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议；
建立在 TCP 协议之上，服务器端的实现比较容易。
与 HTTP 协议有着良好的兼容性。默认端口也是 80 和 443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
数据格式比较轻量，性能开销小，通信高效。
可以发送文本，也可以发送二进制数据。
没有同源限制，客户端可以与任意服务器通信。
协议标识符是 ws（如果加密，则为 wss），服务器网址就是 URL。
优点：可以实现实时通信
缺点：成本高，服务器压力大等；放弃此方式。
5.现状及其展望
- 微信并不鼓励在小程序中大范围嵌入 H5，为了避免开发者把小程序变成“浏览器”，微信对小程序与内嵌 H5 的通讯做了诸多限制
- 尽量使用单一方式实现，比如纯小程序原生，将 h5 功能移至小程序原生
- 原生页面与 H5 之间通过 URL 进行通信
- 不要尝试越过 wx 限制
- 不得不用混合开发时，尽量做好优化，引入骨架屏等优化方式提高用户体验感
- 以上三种方式均未很好实现 web-view 与 H5 双向通信
