Alice-Ti

Appearance

支付宝常见问题汇总 ​

  • 修改导航栏颜色
  • 支付宝小程序 Scheme 链接
  • 支付宝小程序跳转三方 H5

修改导航栏颜色 ​

两种方式修改：

  1. 修改导航栏背景颜色，文字颜色是自适应的。比如黑色背景，显示的就是白色文字和返回箭头

  2. 使用 api 修改文字颜色：my.setNavigationBar({ frontColor: '#FFFFFF', backgroundColor: '#000000' })

    backgroundColor 必填，否则无效

支付宝小程序 Scheme 链接 ​

生成 Scheme 链接工具

支付宝小程序不限制来自 H5 页面或者其它 App 的跳转，只要 H5 页面或者其它 App 支持外跳小程序即可跳转，本文介绍通过 scheme 链接方式实现跳转。 如需跳转到未上线/体验版小程序，可查看 联调设置。

URL 格式 ​

alipays://platformapi/startapp?appId=[appId]&page=[page]&query=[query]
参数描述示例
appId要跳转的目标小程序 APPID。20170713077xxxxx
page要跳转到目标小程序的具体 page 页面，该值等于 app.json 里面的配置值；如果不带 page 字段，默认跳转到小程序首页。 路径中可以在 ？后面附加跳转后的页面参数。页面参数必须进行 UrlEncode 编码，否则只能获取到第一个页面参数。UrlEncode 编码前：pages/index/index?key1=1&key2=2 UrlEncode 编码后：pages/index/index?key1%3D1%26key2%3D2
query表示从外部 App 携带的参数透传到目标小程序，如果不需要携带参数给小程序，可以不带该参数。 query：启动参数，内容按照格式为参数名=参数值&参数名=参数值 注意： query 携带的启动参数必须进行 UrlEncode 编码否则只能获取到第一个参数。UrlEncode 编码前：key1=value1&key2=value2 UrlEncode 编码后：key1%3Dvalue1%26key2%3Dvalue2

scheme转换成https链接唤起小程序 ​

需要把 scheme 当作参数进行 UrlEncode 编码后，拼接在 https://ds.alipay.com/?scheme= 后。

UrlEncode 编码前：

alipays://platformapi/startapp?appId=202100216xxxxxxx&page=pages/index/index&query=key1=value1&key2=value2

UrlEncode 编码后：

alipays://platformapi/startapp?appId=202100216xxxxxxx&page=pages/index/index&query=key1%3Dvalue1%26key2%3Dvalue2

以下是 JS 方式进行拼接示例：

使用 encodeURIComponent 函数先对query携带的启动参数进行 UrlEncode 编码，再使用 encodeURIComponent 对整体 scheme 链接进行 UrlEncode 编码。

javascript
<script>
window.location.href=`https://ds.alipay.com/?scheme=` 
                    + encodeURIComponent(`alipays://platformapi/startapp?appId=202100216xxxxxxx&page=pages/index/index&query=${encodeURIComponent('key1=value1&key2=value2')}`) 
</script>

商家可以通过 H5/Android/iOS 应用使用 scheme 链接来跳转到支付宝小程序。

H5 跳转小程序 ​

js
window.location.href="alipays://platformapi/startapp?appId=20170713077xxxxx&page=x/yz&query=xx%3dxx";

前台/后台运行 ​

  • 前台运行： 当用户首次打开小程序时候，小程序会处于前台运行状态。

  • 后台运行： 用户点击右上角关闭按钮关闭小程序，或者按下设备 Home 键离开支付宝客户端时，小程序并不会直接销毁，而是进入后台运行状态。只有当小程序进入后台一定时间，或者系统资源占用过高，才会被真正的销毁。

  • 从后台运行切换为前台运行： 当未被系统销毁的小程序再度被打开或者激活时，会从后台运行切换为前台运行。

应用逻辑 ​

每次通过 scheme 调用，前端表现是重新触发 onLaunch 和 onShow，都会传参给 app.js 的 onLaunch 和 onShow，基础页面会重新触发 onLoad 和 onShow 方法。 在保活期间（5分钟），例如锁屏之后，会重新触发 onShow 方法，但是却无法获取参数，即传参 scheme 只会在调用的时候触发一次，再次启动只是触发 onShow 不会传参。只能前端在 onShow 里做相应的业务逻辑。

页面的逻辑 ​

当小程序用 scheme 从后台唤起的时候，其实相当于重新被打开了onLoad，还有 onShow 都会被触发。 在保活期间（5分钟）被重新唤起的时候，就只会触发 onShow 。

支付宝小程序跳转三方h5 ​

基础API跳转

web-view ​

支付宝小程序想要跳转H5页面，之前只用过 web-view，内嵌H5，这种方式需要配置域名白名单，并且在外链域名的根目录放置校验文件，H5不是自有页面的话，就不能这样去实现。

wiki
<web-view
    src="https://render.alipay.com/p/s/web-view/index"
    onMessage="onmessage">
 </web-view>

my.ap.openURL ​

相对于 web-view，还有一种跳转H5的方式， my.ap.openURL，不需要配置域名，但是非支付宝官网页面只有部分符合开放类目的小程序可以使用，且需要到开放平台配置 openURL 白名单。已知目标页面的 URL 或 scheme，可以使用 my.ap.openURL。 跳转到支付宝官方 H5 页面是不需要配置白名单的。

wiki
my.ap.openURL({
  // 请将 url 替换为后台加白过的跳转地址
  url: 'https://please.replace.me/page',
  success: (res) => console.log('openURL success'),
  fail: (err) => my.alert({ title: 'openURL fail: ' + JSON.stringify(err) })
});

my.ap.navigateToAlipayPage（已不在维护） ​

my.ap.navigateToAlipayPage 是用于跳转到支付宝官方业务或运营活动页面的 API。利用不需要配置白名单的域名和scheme语法可以实现跳转。

javascript
// 支付宝客户端的标准scheme为：alipays://platformapi/startapp?appId=H5App自身的appId
// 但如果是某些运营页之类的单独页面，没有自己的appId，
// 可以使用Nebula容器的通用浏览器模式appId=20000067 来启动，
// 同时将需要打开的H5页面url经过encode编码后设置到url参数内

const url = 'https://www.baidu.com';
// https://render.alipay.com/p/ 不需要配置白名单
// 开了个后门，在不需要配置白名单的链接后面拼上自己的链接
const link = 'https://render.alipay.com/p/s/i/?scheme=' + encodeURIComponent('alipays://platformapi/startapp?appId=20000067&url=' + encodeURIComponent(url));
my.ap.navigateToAlipayPage({
  path: link
});

修改导航栏文字颜色

支付宝小程序跳转第三方H5页面