在微信小程序中展示 H5 页面

<web-view></web-view> ：承载网页的容器，会自动铺满整个小程序页面。

web-view 中导航栏的标题是取的页面 <title> 标签的内容。

web-view 中无法调起微信支付。

实现方法：

1. 登录小程序管理后台配置业务域名，并且需要上传一个验证文件到要跳转的外链的服务器上的根目录里。

   可直接打开关联的公众号的 文章 （以 http://mp.weixin.qq.com/s 开头），模板链接（以 https://mp.weixin.qq.com/mp 开头）无法打开。

   

   其他网页，包括网页内 iframe 的域名也都需要配置到域名白名单。

   

   

2. 新建 outer 页面。

   // outer.wxml
   <web-view src="https://test.com/"> </web-view>

3. 点击 index 页面的按钮跳转到 outer 页面，即可访问外部链接。

   // index.wxml
   <button bindtap="handleNav">跳转外链</home>
   
   // index.js
   handleNav(){
   	wx.navigateTo({
   		"url": "../outer/outer"
   	})
   }

通信：

微信小程序主动与 H5 通信：

微信小程序提供了 postMessage 方法，用于从小程序向 H 5页面发送消息；H5 页面则可以通过监听 message 事件来接收这些消息。

// 小程序向 H5 发送消息
const webViewContext = wx.createSelectorQuery().select('#web-view').context()
webViewContext.postMessage()

// H5接收小程序消息
window.addEventListener('message', function(event) {})

H5 主动与微信小程序通信：

1. 使用官方提供的 SDK。

   wx.miniProgram.postMessage 方法只能在特定时机（如小程序后退、组件销毁、分享等时）触发小程序的 message 事件，因此并不是即时通信的。

   // H5 中引入 SDK
   <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
   // H5 向小程序发送消息
   window.wx.miniProgram.postMessage()

   // 小程序监听消息
   <web-view src="https://192.168.2.32:9530" bindmessage="onMessage"></web-view>

2. H5 页面也可以使用 window.parent.postMessage 向小程序发送消息，小程序通过监听 web-view 组件的 message 事件来接收。

   // H5 向小程序发送消息
   window.parent.postMessage()

   // 小程序监听消息
   <web-view src="https://192.168.2.32:9530" bindmessage="onMessage"></web-view>

调试：

在微信开发者工具上调试：

微信开发者工具打开一个 webview 页面后，点击模拟器右下角七星瓢虫模样的按钮，将会打开一个新的调试窗口，就可以查看到嵌入的 H5 页面的调试信息了。

真机调试：

可以借助微信 Web 开发者工具来调试基于微信内置浏览器的网页。

下载地址： https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Web_Developer_Tools.html 。

存在的问题：

1. 访问的外链运行在微信内置的浏览器上，会存在缓存问题，有可能导致无法访问到最新的页面。

   想要清除微信内置的浏览器的缓存，可以：

   1. 在设置中清空存储空间。
   2. 退出微信账号重新登录。

   解决方法：

   • 前端设置不缓存资源；后端也设置每次请求都不缓存，强制更新资源。
   • 可以在链接后面添加随机数， https://test.com/?timestamp=123456 ；或者在链接中加入版本号，每次发布都更新版本号， https://text.com/v1/ 。