微信小程序webview内嵌h5页面

微信官方文档web-view | 微信开放文档

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

首先登录小程序管理后台，把 web-view 直连的 h5 页面地添加到配置域名白名单中比如我想要小程序直连地址为/weixin_39550080的页面，那就应该把添加到 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./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'

注意事项

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