javascript - 一文详解｜支付宝小程序跳转（超详细版） - 个人文章

发过程中经常遇到支付宝小程序跳转的问题，这里总结一下支付宝小程序跳转的常见场景和方式，希望可以对大家有所帮助。
话不多说，上干货！

支付宝小程序跳转的三种行为

支付宝小程序跳转可以拆分为三种行为，即：

外部跳转支付宝小程序
支付宝小程序内部页面之间跳转
支付宝小程序内部跳转到外部

一、外部跳转小程序

外部跳转小程序场景有很多种，接下来将对其逐一剖析。

1.二维码跳转小程序

二维码跳转小程序分为「小程序码」与「关联普通链接二维码」。

小程序码：商家通过小程序码（原小程序二维码）可生成跳转自身小程序指定页面二维码，可用于线上线下贴码推广，便捷推广小程序。
普通链接二维码：商家的开发者自行对网页链接进行编码后生成的二维码，也就是我们最常见的二维码。

1.1. 小程序码

适用场景

支付宝首页「扫一扫」跳转小程序。
二维码链接跳转小程序（其它 APP/浏览器、H5 页面，支付宝端内等都可以使用，适用于三方 APP&浏览器跳转小程序）。

参数获取
app.js 中 onLaunch/onShow 启动函数：options.query.key 获取（经验：注意做 热启动和 冷启动 兼容处理）。

冷启动：当用户打开未启动过，或者是已经销毁的小程序时，称为冷启动。此时小程序会执行初始化，初始化完成后，会触发 onLaunch 回调函数。
热启动：当用户打开已经关闭但仍处于后台运行的小程序时，称为热启动。在这种情况下，小程序并不会被销毁后重启，而仅是从后台切换到前台，此时，onShow 函数会触发，onLaunch 回调函数不会被触发。

示例代码

App({
  onLaunch(options) {
my.alert({
  content: '启动参数：'+JSON.stringify(options.query.key),
}); 
console.log('query', options.query);    
console.log('App Launch', options); 
 },
 onShow() {
   console.log('App Show')  
}})

1.2. 关联普通链接二维码

适用场景
只能通过支付宝首页扫一扫跳转小程序。

参数获取
app.js 中 onLaunch/onShow 启动函数：options.query.qrCode 获取（注意做热启动和冷启动兼容处理）。

示例代码

onLaunch(options){
    my.alert({
      title: 'app onLaunch',
      content:  JSON.stringify(options),
      success: (res) => {          //成功处理代码段      },
    });    //获取关联普通二维码的码值，放到全局变量qrCode中
  if (options.query && options.query.qrCode) {
      this.qrCode = options.query.qrCode;
    }
  }

注意：普通关联二维码测试需要先发布配置规则，使用规则自行生成二维码来测试跳转（不要使用配置时的第二步测试二维码测试）。

2.支付宝 URL Scheme 跳转小程序

具体拼接和参数入参/获取可查看如何跳转小程序（启动参数获取和二维码一致，注意做热启动和冷启动兼容处理）。

H5 页面跳转小程序
生活号场景如何跳转小程序
支付宝卡包跳转小程序
其它 APP/浏览器跳转小程序（适用于钉钉、高德、淘宝、其它三方可跳转 APP、浏览器等）
商家会员卡跳转小程序

获取参数示例（与小程序码相同）

App({
  onLaunch(options) {
    my.alert({content: '启动参数：'+JSON.stringify(options.query.key),});
    console.log('query', options.query);
    console.log('App Launch', options);
  },
  onShow() {
    console.log('App Show')
  }})

3.小程序跳转小程序

小程序跳转小程序可使用 my.navigateToMiniProgram 接口。

适用场景

同主体其它小程序跳转小程序：同主体小程序可直接互跳，无需任何设置。支付宝客户端 10.1.10 及以上版本支持。
其它主体小程序跳转小程序：
需对方登录支付宝开放平台在 小程序详情页 > 开发服务 > 开发设置 > 基础设置 > 小程序相互跳转 中设置为 允许所有小程序跳转 或 指定小程序跳转。支付宝客户端 10.1.25 及以上版本支持。

参数获取

在目标小程序的 App.onLaunch()/App.onShow() 启动参数 extraData 中获取数据（注意做热启动和冷启动兼容处理）。

获取示例

App({
  onLaunch(options) {
    my.alert({content: '启动参数：'+JSON.stringify(options.extraData.key),});
    console.log('query', options.extraData);
    console.log('App Launch', options);  },
  onShow() {
    console.log('App Show')
  }})

4.其它场景跳转小程序

4.1. 模板消息跳转小程序

带参
详情可查看模板消息跳转小程序带参。

获取参数
由于模板消息的参数是拼接在 path 后面传入，获取参数和小程序页面之间跳转带参一致，在对应页面 Page.onLoad(query) 启动函数 query 中获取。

获取示例代码

onLoad(query) {
    if (query) {
                my.alert({
            content: '启动参数：' + JSON.stringify(query.x)
        });
        }}

4.2.分享链接跳转小程序

具体接入使用可查看小程序自定义分享，这里只说明带参和获取参数。
注意：如果分享的页面依赖上一页跳转时传递的参数做逻辑运算展示，通过分享链接进入该页面需要自行在自定义分享入参中去拼接该参数，否则分享链接不会带上该参数。

带参
可以在 onShareAppMessage 的 path 路径参数后拼接自定义参数（参数传递遵循 http get 的传参规则），如：pages/index/index?key1=value1

获取参数
path 中的自定义参数可在小程序生命周期的 Page.onLoad(query) 方法中获取，path 路径里不能带根目录 /。

获取示例代码

onLoad(query) {
    if (query) {
                my.alert({
            content: '启动参数：' + JSON.stringify(query.x)
        });
        }}

二、小程序内部页面之间跳转

小程序内页面之间跳转，小程序提供了路由 API 供开发者根据自己的场景选择对应的路由 API，路由 API 具体使用可查看官网 API 文档，这里只说明带参和获取参数。小程序路由 API 带参和获取参数方式一致。

带参

在 URL 入参路径后拼接参数，如：url:"page/index/index?key1=value1&key2=value2"。

获取参数

在对应跳转页面的 Page.onLoad(query) 启动函数中 query 获取。

获取示例代码

onLoad(query) {
    if (query) {
                my.alert({
            content: '启动参数：' + JSON.stringify(query.x)
        });
        }}

小程序页面路由 API 支持带参跳转情况

常用场景中可用路由API

普通页面之间跳转：my.navigateTo、my.redirectTo、my.reLaunch、my.navigateBack。
tab 页面跳转普通页面：my.navigateTo、my.redirectTo、my.reLaunch、my.navigateBack。
tab 页面跳转 tab 页面：my.switchTab。
普通页面跳转 tab 页面：my.switchTab。
小程序页面跳转 web-view 内嵌页面（根据具体跳转的小程序页面选择）：my.navigateTo、my.redirectTo、my.reLaunch、my.navigateBack、my.switchTab。
web-view 内嵌页面跳转小程序页面（内嵌页面跳转小程序页面也是用的小程序路由 API，根据具体跳转的小程序页面选择）：my.navigateTo、my.redirectTo、my.reLaunch、my.navigateBack、my.switchTab。
注意：my.navigateTo最多不能超过 10 层页面栈，建议通过 getCurrentPages 方法判断页面栈峰值，超过后用重定向跳转页面。

三、小程序内部跳转小程序外部

小程序对外跳有限制条件，以下为具体条件说明。

支持外跳

小程序 web-view 内嵌式跳转 H5 页面，不能真正跳出小程序环境。
带参：可以在 URL 后拼接参数和 GET 方式一致（参数传递遵循 http get 的传参规则），如 https://www.baidu.com?key1=value1。
小程序支持通过关注生活号组件关注并跳转生活号（不可带参）。
小程序支持跳转以 https://render.alipay.com/p 域名开头的生活号文章/部分支付宝官方业务页面或者通过固定 appCode 值跳转对应支付宝端页面，详情可查看 my.ap.navigateToAlipayPage。
小程序支持跳转支付宝卡包/商家会员卡，可使用以下接口：
外跳其它小程序。可查看上文外部跳转小程序-小程序跳转小程序。

不支持外跳

小程序不支持外跳其它 APP。
小程序不支持跳转 AppStore。

以上就是关于小程序跳转的所有内容啦，有遗漏的地方大家可以提出来一起探讨~(◕ᴗ◕✿)，一起交流进步～

一文详解｜支付宝小程序跳转（超详细版）