小程序与H5页面的往来

wubinsheng
585 阅读3分钟

最近产品需要按照小程序与H5的跳转规范来设计产品，于是按照最新的微信开发文档给她整理了一下小程序与H5之间的跳转方式，分享给大家

今天是2021/03/10，可能不到半年，随着腾讯的规则调整，这些内容会有过期的可能，请多多注意。

小程序跳转H5

目前无法通过小程序直接打开浏览器去加载H5。只能通过 web-view 组件来加载 H5 页面。

使用条件
  1. 个人类型的小程序暂不支持使用 web-view，需要企业级小程序
  2. 可直接打开关联的公众号的文章，其他网页需登录小程序后台配置业务域名
  3. 公众号的文章域名长这样：mp.weixin.qq.com/...
  4. 配置业务域名：adm.webportal.top/sys/view.js…

H5跳转小程序—微信浏览器

使用微信开放标签。（开发需要使用 jssdk 申请开放标签权限）

使用条件
  1. 仅限在微信浏览器中使用（微信PC上，管方demo直接报错，需要进一步验证）
  2. H5页面域名必须在已认证的服务号或公众号的“JS接口安全域名”下（或者把H5页面扔到小程序云开发-静态网站中（免鉴权）
  3. 可跳转任意合法合规的小程序

演示demo：postpay-2g5hm2oxbbb721a4-1258211818.tcloudbaseapp.com/jump-mp.htm…

H5跳转小程序—微信外浏览器或短信应用等

使用小程序的 URL Scheme。通过小程序管理后台配置 URL Scheme，或者也可以通过微信API生成。

使用条件
  1. 只能在微信外浏览器或短信等系统应用中跳转，部分APP也可以（比如企业微信、QQ等）
  2. IOS端：浏览器或系统应用可以直接通过URL Scheme 唤起微信打开小程序
  3. 安卓端：非浏览器应用，没法直接唤起微信打开小程序，一般需要加一个 H5 页面中转下（简单地说：应用 → 浏览器打开我们的H5 → 唤起微信打开小程序）
  4. Scheme 数量限制：
  • 每日上限 50万个（永久scheme + 短期scheme）；
  • 31天以上或永久有效的scheme，单个小程序总共上限 10万个；
  • 31天以内的短期有效scheme，总共无上限。

演示demo：postpay-2g5hm2oxbbb721a4-1258211818.tcloudbaseapp.com/jump-mp.htm…

小程序跳小程序

也就是打开另一个小程序。

使用条件

  1. 需要用户点击过页面，也就是无法自动跳转

  2. 系统会统一添加跳转提示，需要用户确认后才能跳

  3. 可跳转任意合法合规的小程序

补充说明

免鉴权—云开发静态网站

微信浏览器中的 H5 打开小程序时，需要使用 JSSDK 申请开放标签的权限之后，才能跳转。因为要使用 JSSDK，所以就要求 H5 的域名，必须在某个公众号的 JS安全域名 内有配置才行。但如果当前 H5 页面是部署在小程序-云开发-静态网站中时，则可以跳过 JS安全域名 这一限制。

公众号H5页面跳转APP

使用微信开放标签

使用条件

  1. 目标移动应用需在微信开放平台账号下审核通过

  2. H5页面的域名在 JS安全域名 下（需要用jssdk）

参考链接

avatar
文章
阅读
粉丝