一、web-view 组件：

  1. 定义与作用：承载网页的容器。会自动铺满整个小程序页面，并且处于最高层级！个人类型的小程序暂不支持使用。小程序插件中不能使用。

  2. 官方文档：web-view

使用注意事项：新项目记得添加业务域名！小程序处于调试状态下会忽略域名校验！！

二、web-view 属性：

  1. src：webview 指向网页的链接。可打开关联的公众号的文章，其它网页需登录小程序管理后台配置业务域名。应用场景：可将小程序身份验证信息通过 src 参数传递给 H5；

  • 配置业务域名：

    • 业务域名需经过 ICP 备案，新备案域名需 24 小时后才可配置。域名格式只支持英文大小写字母、数字及“- ”，不支持 IP 地址。配置业务域名后，可打开任意合法的子域名。

    • 下载文件请下载校验文件，并将文件放置在域名根目录下，例如 wx.qq.com，并确保可以访问该文件。如配置中遇到问题，请查看具体指引。

  • 开发模式下可以忽略域名验证

  1. bindmessage：网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。具体业务场景很少，个人觉得目前只能用于相关页面的埋点

  2. bindload：网页加载成功时候触发此事件。e.detail = { src }

  3. binderror ：网页加载失败的时候触发此事件。e.detail = { src }

三、web-view 常用方法：

方法都由 JSSDK 提供！H5 页面记得引用！地址：JSSDK 1.3.2

常用接口（1）类别：

  • 路由跳转相关--可跳转到小程序页面（参数与小程序接口一致）

  • 数据传递方法--向小程序传递消息，只能在特定时机触发

  • 获取当前 H5 页面的环境--判断是否是在小程序页面打开

支持以下 JSSDK 接口：具体见：web-view

  • 判断客户端是否支持 js

  • 图像接口

  • 音频接口

  • 智能接口

  • 设备信息

  • 地理位置

  • 摇一摇周边

  • 微信扫一扫

  • 微信卡券

  • 长按识别

四、web-view 具体需求场景

场景一：授权--H5 页面需要获取小程序的身份授权相关信息

方案：通过参数 src 进行传递身份信息

场景二：分享--H5 页面需要进行分享

方案：在小程序页面定义 onShareAppMessage 方法，整个小程序页面就可以分享（右上角菜单分享）；onShareAppMessage 方法接收参数对象包含 webViewUrl；webViewUrl 此参数只在页面存在 web-view 组件时返回； 注意事项：H5 页面内没办法触发页面分享，只能使用右上角菜单分享功能（定义 onShareAppMessage 方法）

场景三：订阅消息--H5 页面需要触发订阅消息

方案：没有很好的方案满足需求，目前使用方案：通过 H5 跳转到小程序原生页面，再进行订阅消息的触发

场景四：动态分享--需要通过 H5 页面具体操作或状态进行动态分享信息配置

难点：由于小程序只能在特定场景才能获取到 H5 发送的信息，在我们想要的场景很难拿到 H5 传递的数据 解决思路：由于小程序分享的时候可以通过 onShareAppMessage 获得 webViewUrl 参数；所以唯一方法就是想办法将参数又通过页面 url 传递给小程序，这样就能在分享时候拿到参数进行判断

方案：通过 window.history 的 replacestate（History API - Web API 接口参考 | MDN (mozilla.org)）方法更改当前页面的 url 地址（页面不会刷新），分享时通过 onShareAppMessage 获得 webViewUrl 参数，通过参数判断输入不同分享信息

注意事项：replacestate 的第三个参数 url 特殊的限制

URL — 该参数定义了新的历史 URL 记录。注意，调用 pushState() 后浏览器并不会立即加载这个 URL，但可能会在稍后某些情况下加载这个 URL，比如在用户重新打开浏览器时。新 URL 不必须为绝对路径。如果新 URL 是相对路径，那么它将被作为相对于当前 URL 处理。新 URL 必须与当前 URL 同源（同一个域名），否则 pushState() 会抛出一个异常。该参数是可选的，缺省为当前 URL。