小程序内嵌h5

背景了解

小程序web-view组件文档

阅读文档我们发现，要想实现h5页面在小程序的嵌套需要以下几个步骤：

1. 登录小程序管理后台配置域名白名单
2. 要想区分环境做兼容处理可以区分环境
3. 使用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

// wxml
<block 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)}`;
		}复制代码