背景了解
小程序web-view组件文档
阅读文档我们发现，要想实现h5页面在小程序的嵌套需要以下几个步骤：
- 登录小程序管理后台配置域名白名单
- 要想区分环境做兼容处理可以区分环境
- 使用postMessage实现h5页面向小程序的数据传递
准备工作
配置业务域名
到这里，你可以随意写个h5页面在小程序中打开了，但是真正做需求的时候可能会遇到一些问题，如下：
开发中的一些经验
url中带着参数
请务必给对url进行encode, 否则url中带的参数解析不出来
区分h5和小程序做兼容
例如我的h5页面带着header,但小程序中自带header,这是就要区分环境，在小程序的环境中把header去掉。
在你的h5项目中引入小程序提供的js，并根据API区分环境
script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.3.2.js"/script // 小程序内不显示头wx.miniProgram.getEnv((res) = {if (res.miniprogram) {this.setState({isWXapp: true})} else {this.setState({isWXapp: false})}});复制代码h5页面像小程序发送消息
我的需求有分享给朋友的模块，在h5页面我们只需调用hySDK即可，这是底层封装好的功能。但内嵌入小程序之后就无法实现这一功能，这个内嵌的h5页面想要分享，唯一的办法是指引用户点击小程序右上角的 ... 去分享。
由于分享出去的文案和图片是后端返回的，可配置的，因此，需要使用postMessage
在h5中postMessage 注意，key必须叫做data,否则取不到
// 向小程序传递分享链接wx.miniProgram.postMessage({data:{shareUrl: bgShareUrl,shareDes: bgShareDes}});复制代码
在小程序页面的js中getMessage
// wxmlblock wx:if="{{show}}"web-view src="{{url}}" bindmessage="getMessage"/web-view /block// js getMessage(e) { let {shareUrl, shareDes} = e && e.detail && e.detail.data[0]; this.setData({ shareUrl: shareUrl,shareDes: shareDes }); }复制代码这样就实现了h5向小程序的数据通信
- 登录信息不同步
这个在common模块提供的web-view组件中已经提供了解决思路，如果需要openId会将获取到的openId作为url的参数传递给h5页面
// 如果需要openId 并且已经登录 再传递openId到页面if (this.needOpenId && app.cookies._q && app.user.openId ) {url.search ? url.search += `&openId=${encodeURIComponent(app.user.openId)}` : url.search = `openId=${encodeURIComponent(app.user.openId)}`;}复制代码
