微信小程序与H5相互跳转场景及实现方案

本文整理微信小程序与H5页面之间相互跳转的各种应用场景。

一、微信小程序内嵌H5页面的场景

• 1. 从微信小程序跳转至内嵌的H5页面

<web-view :src="loadUrl"></web-view>

在微信小程序中编写webview组件，利用该组件加载H5地址，其中loadUrl参数指定H5的具体链接。

• 2. 从嵌套的H5页面返回微信小程序内部

 import wx from 'weixin-js-sdk';
 wx.miniProgram.navigateTo({
  	url: "/pages/index/index",
 });

在H5页面中引入微信JS-SDK，调用wx.miniProgram.navigateTo方法，即可返回至微信小程序内部指定页面。

二、非嵌套场景：H5页面跳转打开特定微信小程序

在此场景下，可通过wx-open-launch-weapp开放标签、URL Scheme以及URL Link三种方式实现。需注意，每日生成URL Scheme和URL Link的总数量上限为50万条。

• 开放标签：wx-open-launch-weapp

参考文档：wx-open-launch-weapp

• URL Scheme

URL Scheme为服务端API接口，用于获取小程序scheme码，适用于短信、邮件、外部网页及微信内等拉起小程序的业务场景。目前该功能仅针对国内非个人主体注册的小程序开放。 注意事项： 1. 若需在微信内网页打开小程序，建议使用微信开放标签（小程序跳转按钮）。即使无公众号，也可使用小程序身份开发网页并免鉴权跳转，具体可参考云开发静态网站跳转小程序。符合开放范围的小程序支持下发可打开小程序的短信。 2. 该功能基本覆盖当前主流微信版本，开发者无需进行低版本兼容处理。 3. 仅能生成已发布状态的小程序URL Scheme。 4. 通过URL Scheme跳转至微信时，可能会触发系统询问弹窗。若用户选择不跳转，则无法打开小程序，开发者需妥善处理此类用户交互场景。部分浏览器可能限制直接跳转网页，建议参考示例网页设置跳转按钮。

通过后端接口生成的URL Scheme格式如下所示：

weixin://dl/business/?t= *TICKET*

iOS系统支持识别URL Scheme，可在短信等应用场景中直接通过Scheme跳转至小程序。Android系统不支持直接识别URL Scheme，用户无法通过Scheme正常打开小程序，开发者需使用H5页面作为中转，再跳转至Scheme以实现打开小程序。跳转代码示例如下：

location.href = 'weixin://dl/business/?t= *TICKET*'

效果展示：

该跳转方法既可在用户打开H5页面时立即调用，也可在用户触发特定事件后调用。

• URL Link

URL Link为服务端API接口，用于获取小程序URL Link，适用于短信、邮件、网页及微信内等拉起小程序的业务场景。目前该功能仅针对国内非个人主体注册的小程序开放。 注意事项： 1. 仅能生成已发布状态的小程序URL Link。 2. 在微信内或安卓手机打开URL Link时，默认会先跳转至官方H5中间页。如需定制H5内容，可使用云开发静态网站。 通过后端接口生成的URL Link格式如下所示：

https://wxaurl.cn/TICKET 或 https://wxmpurl.cn/TICKET

效果展示：

至此，关于微信小程序与H5相互跳转场景的分析介绍完毕。更多相关微信小程序跳转内容，请搜索本站以往文章或继续浏览后续相关文章，希望大家以后多多支持本站！