最近有个项目是支付宝小程序,其中需要从阿里健康配置的banner图跳转到指定的小程序页面。在开发调试过程中被对方带歪了,遇到各种坑,总结下正确姿势:
阿里健康其实就是H5,从这里跳转到支付宝小程序就是H5跳转到支付宝小程序,在阿里健康配置的时候需要注意。
可参考此官方文档(其实写的很清楚了):https://opensupport.alipay.com/support/helpcenter/142/201602496413?ant_source=manual&recommend=d6cd07a68fd4161c6573bb7773e91068
URL格式
alipays://platformapi/startapp?appId=[appId]&page=[pagePath]&query=[params]
注意:query 后面的内容必须要经过 urlencode,否则无法接收到。
//例子:跳转到小程序(appid=123456),页面路径 pages/luckdraw/index 并带上来源 comefrom=alipay,后面要跟上阿里健康的数据 code=码&uid=用户ID&sign=验签 alipays://platformapi/startapp?appId=123456&page=pages/luckdraw/index&query=comefrom%3dalipay%26code%3d%e7%a0%81%26uid%3d%e7%94%a8%e6%88%b7ID%26sign%3d%e9%aa%8c%e7%ad%be
上面方法仅在外部 APP 唤起小程序。
在手机浏览器调试跳转到支付宝小程序
需要借助:https://ds.alipay.com/?scheme=
注意:scheme 后面的参数必须再次经过 urlencode,否则跳转不到指定小程序页面。
上面例子转换成:
//加入域名,在手机浏览器调试 https://ds.alipay.com/?scheme=alipays%3a%2f%2fplatformapi%2fstartapp%3fappId%3d123456%26page%3dpages%2fluckdraw%2findex%26query%3dcomefrom%253dalipay%2526code%253d%25e7%25a0%2581%2526uid%253d%25e7%2594%25a8%25e6%2588%25b7ID%2526sign%253d%25e9%25aa%258c%25e7%25ad%25be
总结:
1、alipays:// 里面的 query 参数必须经过 urlencode 变成一个独立的值才能保护里面的值不会丢失。
2、https://ds.alipay.com/?scheme= 后面的也必须经过 urlecndoe 变成一个独立的值保护里面的值不丢失。
如何接收值
我只在 onLaunch 获取到了参数,onShow 没有获得参数。
页面 pages/luckdraw/index 代码如下(uni-app 代码):
//直接在页面获取 启动参数,避免本地存储后在获取。 let lanuchOptions = my.getLaunchOptionsSync();
如何获取启动参数,官方文档:https://opensupport.alipay.com/support/helpcenter/142/201602630793?ant_source=antsupport
总结阿里健康 banner 活动处理逻辑,个人猜想:
因为配置的时候,必须配置:
alipays://platformapi/startapp?appId=123456&page=pages/luckdraw/index&query=comefrom%3dalipay
其中 comefrom%3dalipay 是我们自定义参数,在阿里健康页面点击后会在后面带上经过 urlencode 的 uid、code、sign,最终带入我们指定的 pages/luckdraw/index 页面;