携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第17天，点击查看活动详情
如果我们需要在微信小程序当中嵌入h5页面，就需要使用小程序提供的webview功能。例如，我们以前已经开发好了一套h5的系统，然后想要在某个小程序中也接入这个系统，如果重新开发就会比较耗费时间，这时候就可以使用微信小程序的webview来嵌入h5页面，然后h5页面在针对与微信小程序的交互做一些兼容即可，比如分享功能等。
webview介绍
webview其实就是用来加载网页的一个容器，微信小程序中的webview会自动铺满整个手机屏幕，需注意的是微信小程序中的自定义导航对webview是不生效的。
微信小程序webview的属性主要有以下几个：
- src：页面链接，需注意这个链接的域名，一定要在该小程序对应的后台管理中的配置在业务域名当中，才可以打开此页面
- bindmessage：网页向小程序发送消息时触发
- bindload：加载成功时的事件
- binderror：加载失败时的事件
// wxml
<web-view src="{{url}}" bindmessage="handlerMsg"></web-view>
// js文件
handlerMsg(e) {
console.log('H5页面发送的消息', e.detail.data);
}
},
需要注意bindmessgae方法并不是h5页面向小程序postmessgae的时候立即触发，而是在小程序后退、组件销毁或分享的时候才会触发bindmessage事件来获取到h5页面发送的数据。
h5对接webview
在h5项目中，需要接入微信的jssdk文件，然后就可以使用其api和小程序进行一些交互，支持的接口如下：
我们可以通过getEnv方法来判断h5页面是不是在微信小程序环境当中，如下：
wx.miniProgram.getEnv(function(res) {
console.log(res.miniprogram) // true
})
如果res.miniprogram为true，则表示此页面在微信小程序环境中，这样就可以针对微信小程序来做一些代码的兼容，例如我们需要设置在小程序中的分享标题，那么就可以先判断页面是否在小程序环境中，如果在的话，就可以使用postMessage方法来向小程序发送消息。
wx.miniProgram.postMessage({ data: {title: '分享标题'} })
