小程序内嵌H5那些事儿

什么是小程序内嵌H5

小程序内嵌H5是指将一个H5页面嵌入到小程序中的一种方式

小程序内嵌H5可以让用户在小程序中直接浏览和使用H5网页 同时也可以让开发者在小程序中使用H5网页的某些功能。

当原有的H5转相似业务逻辑的小程序时 除了内嵌H5以外 还可以采用多端编译的方案 但是这样做api兼容处理的成本高 当然开发成纯小程序也行 缺点是工作量大 而内嵌H5用到的web-view需要的基础库支持版本覆盖率已达95%以上 所以选择这个方案

为什么需要内嵌H5

在小程序中，H5页面的外观和交互效果与在浏览器中打开该H5页面相同，同时可以结合小程序自身的API和功能，实现更丰富的应用功能。

参考以下场景:

  • H5页面中包含一些小程序无法实现的功能（如语音识别、图像识别），可以使用H5页面与小程序进行交互来实现这些功能。

  • 在小程序中实现部分功能，但不想使用小程序自带的组件或API，可以借助H5页面来扩展小程序的功能。

  • H5页面中的内容有公用性或者独立性，并且需要使用小程序的授权功能（如QQ、微信等），可以将H5页面嵌入到小程序中进行授权操作。

  • H5中有个问卷页 需要用户登录后填写 但是H5本身登录操作比较麻烦 小程序只需要用户授权一次 之后都会执行自动登录的流程(自己去实现) 这样用户一打开小程序就已经是登录状态了 方便执行后续操作 这样可以通过提高登陆率来实现转化率的提高  

不难看出 小程序内嵌H5在特定的场景下 确实犹如神兵天降起到了意想不到的效果

内嵌H5需要怎么做

说了那么多我们来看看怎么做

域名配置

首先我们需要在公众平台去配置域名

业务域名中配置的就是小程序以及 H5 和 H5 中引用 iframe 的域名。这里要特别注意的是假如 H5 中有内嵌的 iframe 也要配置进去

还需要找服务端朋友帮忙把校验文件放到业务域名的根目录下

具体的在配置域名时会有教程

小程序端的处理

其次在小程序中我们需要使用到web-view组件 

在这个组件上我们需要做两件事

  • 在src属性中传递内嵌H5的URL
  • 设置web-view的组件样式 来适应页面布局等

H5的处理

引入JS-SDK 同样的这也需要在微信公众平台中对JS-SDK安全域名进行配置

具体方法也可以找到 这里贴一个GPT的回答 它很贴心的告诉了我们该方法是用于内嵌的H5

配置好了以后我们就可以放心接入了 

判断宿主环境

<script src="https://res.wx.qq.com/open/js/jweixin-1.5.0.js"></script>
<script>
if (typeof wx !== 'undefined' && typeof wx.miniProgram !== 'undefined') {
  // 当前在小程序环境中
} else {
  // 当前不在小程序环境中
}
</script>

其它API

// javascript
wx.miniProgram.navigateTo({url: '/path/to/page'})
wx.miniProgram.postMessage({ data: 'foo' })
wx.miniProgram.postMessage({ data: {foo: 'bar'} })
wx.miniProgram.getEnv(function(res) { console.log(res.miniprogram) })

HTTPS支持

除此之外H5页面还必须支持HTTPS协议 否则无法在小程序中加载。

HTTPS可以让数据传输更加安全 也可以起到SEO优化的作用

相反如果内嵌的H5是HTTP协议的话则加载时会提示链接不安全的错误

内嵌H5的注意事项

由于内嵌H5后 对于小程序来说页面展示的内容就变得不可控了

所以就会需要在后台完成相关配置 以及需要满足HPPTS协议等

除此之外 还有一些点需要注意

  • 请调用小程序专用的JSSDK 公众号中的JSSDK不通用
  • web-view一定是撑满全屏的 自定义顶部菜单 悬浮的都没用
  • web-view后边跟的h5链接 必须要url转义 否则会和小程序自身的符号定义冲突 可能识别不到？后的参数
  • H5控制小程序的跳转路径必须是“/”开头 如 “/pages/xxx/xxx” 且路径必须在app.json里有地址错误的话 有时不报错
  • 小程序内嵌H5页面不支持所有的小程序能力和能够调用的接口 因此在使用内嵌H5页面时需要考虑不能够调用的接口 并进行特殊处理和适配
  • 小程序内嵌H5页面的性能相对于原生小程序可能会有一些损失 如加载速度和卡顿等问题。

一个实际场景的分享

背景

遇到过一个这样的场景 

H5中有两个页面 一个是活动页 另一个是问卷页

活动页会展示活动相关信息并提供报名按钮 点击后跳转到问卷页去填写报名信息

为了提高登陆率和转化率 遂把这两个页面都进行了改造 内置到小程序中

问题 

当从小程序直接打开活动页或者直接打开问卷页时 OK 两个页面都正常同步了登录状态

但是如果从打开的活动页点击按钮跳转到报名页

就会显示未登录 弹出登录框 登录后又会回到活动页 一直会重复这个过程

分析

在思考解决方法前 我们先过一下同步登录状态的流程

首先对于小程序来说 登录可以分为2种

  • 没有注册过 需要获取手机授权执行登录流程
  • 已经注册过 可以获取wxCode执行自动登录(也就是静默登录)

微信生态是有cookie的 但是小程序的登录跟这个cookie没有关系 小程序也无法操作cookie

小程序不能直接用cookie作为登录的依据是因为小程序登录的用户可能和微信生态里已经有的cookie的用户不一致

微信可以切换登录用户 但小程序不行

如果切换后没有同步登录状态 那此时的拿到的cookie可能是之前保留的

所以靠cookie作为登录依据是不行的

于是换了一种方法 往内嵌的url上拼接username和usertoken

h5端判断如果是小程序环境 并且url中有这两个参数 才会去执行同步流程

这也就导致了背景中的现象 由于活动页和问卷页都完成了改造 所以都会去解析URL中是否包含username与usertoken

而在问卷页时 由于是活动页配置按钮操作的跳转 并没有拼接参数 所以会弹出登录框提示登陆

解决方法

这时候可以考虑在第一个页面登录成功后记录一个状态

该页面跳转到其它页面时 会首先判断是否同步过登录状态

如果同步过则不用去解析URL判断参数  

如果没有同步过 还是去判断URL是否含有对应参数