支付宝小程序跳转H5的详细说明

[shiiiiiiji]

随着小程序的流行，大家都能大概理解“小程序”和传统“程序”之间的差别，其“无需下载”、“近原生体验”等核心能力深受大家追捧。但在使用过程中，其中一些细微的{差别}却不得不需要我们重新去理解和思考小程序的定位。

本文着重讲解小程序提供的“跳转H5”能力。也是最容易被大家误解和滥用的一个功能。

原理

微信小程序和支付宝小程序都提供了“跳转H5”的能力，但是和传统意义上理解的{跳转}并不一致。在传统意义上的跳转，跳转到App或者是跳转H5，跳转过去了可能就和{自己手动打开一个App或者H5}的表现差不多。

但是小程序并非如此，在小程序里跳转H5，本质上是由小程序自身提供的一个叫做<web-view />组件实现的：
支付宝小程序的<web-view />：https://docs.alipay.com/mini/component/web-view
微信小程序的<web-view />：https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

我们都知道，对于H5，我们一般都是通过浏览器{在微信和支付宝里打开也是一种特殊的“浏览器”}打开的，虽然有些差异，但是之间都还是传统的浏览器打开。

但是，对于小程序来说，提供的<web-view />组件只是小程序的一部分。虽然也类似“浏览器”，但是并不提供大部分浏览器的一些功能，而且更受到小程序的一些限制。

打开的H5，仍然还是在小程序的内部，从打开H5的那一刻起，包括在H5内部的点击跳转，都仅仅被认为是小程序的一个页面而已。点击左上角返回，是返回到小程序的上一级页面。

限制

因为实现原理不同，所以在小程序内“跳转H5”还是存在很多限制的，以“支付宝小程序”为例，特此总结如下几条供参考：

• 打开的H5的域名需要预先在小程序管理后台进行配置，目前已知最多配置20个
• 跳转到“生活号”链接需要使用特定的API，而且需要是和小程序同主体下
  webview目前不支持一切alipay.com的域名跳转，包括但不限于：支付宝平台提供的授权页面（即H5弹出的授权页面）
• 无法实现类似医疗健康首页沉浸状态栏式的头部
• H5原先使用的部分JSAPI功能无法使用，包括pushWindow跳转等等
• 尽量不要打开含独立授权体系的页面，否则打开一个H5，就要登录或者授权（有可能依赖的获取授权方式在小程序内无法支持），体验非常不好
• 后续继续补充

建议

综上，其实小程序对于H5的限制还是非常大的，而且小程序和H5之前通信并不友好。

从技术角度上来看，小程序提供的跳转H5功能，目前来看仅适用于一些展示型的、静态的H5页面，否则，在使用过程中可能会出现很多意想不到的bug。