【经验分享】支付宝小程序如何获取外部链接携带的参数

由于很久没分享文章了，然后在社区又常常回复相同的问题，这边就整理一下相关内容分享给大家。

在常给运营同学的链接或者码中，不可避免的会遇到我们这次分享会遇到的问题，小程序码和链接中的参数如何获取，有的同学会回答在onLoad中获取，有的同学会说在onLaunch中以及onShow中获取，那为啥会有差异呢，那么这里我们就得从小程序的运行机制中的冷启动以及热启动说起了。

引申下官方的定义：

热启动和冷启动

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

前台 / 后台运行

• 前台运行： 当用户首次打开小程序时候，小程序会处于前台运行状态。
• 后台运行： 用户点击右上角关闭按钮关闭小程序，或者按下设备 Home 键离开支付宝 App 时，小程序并不会直接销毁，而是进入后台运行状态。
• 从后台运行切换为前台运行： 当未被系统销毁的小程序再度被打开或者激活时，会从后台运行切换为前台运行。

可在 app.js 中注册前台 / 后台切换的回调函数。当小程序从后台进入前台显示时会触发 onShow，当小程序从前台到后台时会触发 onHide。

简单的说下就是：

冷启动为：首次进入或者首次进入后一段时间内再次进入已经销毁了的小程序。

冷启动生命周期：

app.js的onLaunch > app.js的onShow > 页面onLoad > 页面onShow。

热启动为：我们访问过该小程序，并且小程序并没有被销毁（也就是在几分钟里退出又重新进来了）。

热启动生命周期：

app.js的onShow > 页面onLoad > 页面onShow，不触发onLaunch

至于以上的两种区别就是小程序的加载动画：

冷启动，是一定可以看到该动画的。

而热启动打开后不会有上面的动画，直接加载小程序。

那么既然知道流程我们也有对应的方案了。

对于外部链接或者二维码，链接内的参数属于全局参数。

冷启动的时候在onLaunch里获取参数，热启动在onShow里获取参数。

至于页面正常跳转携带参数，则在页面onLoad里获取，那操作如下：

// app.js处理。
onLaunch(options) {
  // 冷启动时在该处获取参数，将参数传递到globalData全局对象下。
  this.globalData.query = options.query || {}
  if (options.referrerInfo) { // 小程序跳小程序有的同学会使用extraData，有的同学会直接拼接在path上
    this.globalData.query = Object.assign(this.globalData.query, options.referrerInfo.extraData)
  }
},
onShow(options) {
  // 热启动时在该处获取参数，将参数传递到globalData全局对象下。
  this.globalData.query = options.query || {}
  if (options.referrerInfo) { // 小程序跳小程序有的同学会使用extraData，有的同学会直接拼接在path上
    this.globalData.query = Object.assign(this.globalData.query, options.referrerInfo.extraData)
  }
},
globalData: {
  query: {}
}。
// 页面onLoad处理。这里举个例子，完整链接：https://render.alipay.com/p/s/i/?scheme=alipays://platformapi/startapp?appId=2018082861168647&page=pages/partdetails/partdetails&query=partJobId%3D123456
// 可以看到query=partJobId%3D123456, 解码后拿到query=partJobId=123456
// 该处的参数，不管冷启动或者热启动，我们都存储在globalData的query下。所以获取方式如下，先从上个页面获取（options.xxx），用户外部链接或者二维码跳转过来的参数从globalData获取（getApp().globalData.query.xxx）, 上述链接参数我们可以用getApp().globalData.query.partJobId获取到。
const app = getApp()
onLoad(options) {
  this.setData({
    partJobId: options.partJobId || app.globalData.query.partJobId || ''
  })
}

如何测试自己获取的参数是否正确？

首先开发者工具上页面代码里复制上面 app.js里的处理代码。

第一种方式：

• 开发者工具模拟：开发者工具选择编译里的自定义编译，全局参数处填写：partJobId=123456

第二种方式：

• 真机扫码开发版：点击右上角三个点开启联调设置，这个时候，外部链接打开就可以访问我们的开发版本代码了。如下图：

接下来在页面onLoad里打印下app.globalData.query.参数名，如果能获取则正常。

以上就是参数获取的简单分享，希望能帮助遇到该问题的同学~