微信小程序webview内嵌h5页面

微信小程序webview内嵌h5页面

微信官方文档
https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

正式上线前准备（前期开发调试可以忽略）

首先登录小程序管理后台，把 web-view 直连的 h5 页面地添加到配置域名白名单中

比如我想要小程序直连地址为https://me.csdn.net/weixin_39550080的页面，那就应该把https://me.csdn.net添加到 webview 业务域名白名单中 (注意不是 request 的域名白名单)。配置完成后，在微信开发者工具配置详情可以看到，如下图

具体实现

使用 web-view 组件时，最好在小程序上单独配置一个页面路由，比如：pages/webview/index。该页面只有一个组件就是 web-view，link就是对应的 h5 页面地址。域名配置完成后，进入小程序pages/webview/index路径，页面就会打开 web-view 从而直连link对应的 h5 页面了。

bindmessage用于监听 web-view 的 h5 页面向小程序发送信息的，对应的处理函数就是在小程序里自己自定义的getMessage。这是 h5 页面向小程序通信的唯一手段，后面会再做介绍

web-view 目前只有 src 和 bindmessage 两个属性。

<web-view src="{{link}}" bindmessage="getMessage"></web-view>

在开发环节，做调试

小程序工具——详情(右上角)——本地设置——勾选 不校验合法域名、web-view、TLS版本以及HTTPS证书

在微信开发者中，打开一个 web-view 页面之后，单击鼠标右键会出现一个 “调试” 按钮，点击会弹出另一个调试窗口。(可以使用本地的地址，例：http://192.168.0.179:8080/)

h5 页面的代码以及调取接口的信息会在新的调试窗口里展示，包括 h5 页面的 debug 断点也要在新的调试窗口里添加，该 web-view 关闭后对应的调试窗口也跟着关闭。

h5 页面与小程序之间通信

首先，在 h5 页面要引入微信的 JSSDK 文件，引入完成后可以调用 wx.miniProgram 暴露的一些接口。

// 导入依赖包
npm i -S weixin-js-sdk 
//或
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

// 页面使用
import wx from 'weixin-js-sdk'

在H5内可通过window.__wxjs_environment变量判断是否在小程序环境，建议在WeixinJSBridgeReady回调中使用，也可以使用 JSSDK 1.3.2 提供的getEnv接口。

// web-view下的H5页面内
function ready() {
  console.log(window.__wxjs_environment === 'miniprogram') // true
}
if (!window.WeixinJSBridge || !WeixinJSBridge.invoke) {
  document.addEventListener('WeixinJSBridgeReady', ready, false)
} else {
  ready()
}
 
// 或者
wx.miniProgram.getEnv(function(res) {
  console.log(res.miniprogram) // true
})

确认在 web-view 环境之后，可以调用wx.miniProgram.postMessage(data{…})接口来向小程序传递数据，调用后会在小程序触发bindmessage的监听。

// H5页面：通过 wx.miniProgram.postMessage 可以向小程序传值
wx.miniProgram.postMessage({
    data: 'foo'
})

// 小程序页面：接收 h5 页面传递过来的参数
getMessage: function (e) {
  const data = e.data;
  console.log(data);
}

wx.miniProgram 还有其他一些接口，比如wx.miniProgram.navigateTo({url: ‘…’})，wx.miniProgram.switchTab({url: ‘…’})就可以直接从当前 web-view 跳转到小程序的其他页面。

wx.miniProgram.navigateTo({url: '...'}), // 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。
wx.miniProgram.switchTab({url: '...'}), // 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

而小程序向 h5 通信，就只能刚打开 web-view 时，把参数从 url 上带过去。

// demo，通过url把小程序token带到H5页面
 link:'http://192.168.0.179:8080/?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.KKKsiM'

注意事项

1、网页内 iframe 的域名也需要配置到域名白名单。
2、开发者工具上，可以在 web-view 组件上通过右键 - 调试，打开 web-view 组件的调试。
3、每个页面只能有一个 web-view，web-view 会自动铺满整个页面，并覆盖其他组件。
4、web-view 网页与小程序之间不支持除 JSSDK 提供的接口之外的通信。
5、在 iOS 中，若存在 JSSDK 接口调用无响应的情况，可在 web-view 的 src 后面加个 #wechat_redirect 解决。
6、避免在链接中带有中文字符，在 iOS 中会有打开白屏的问题，建议加一下 encodeURIComponent。