关于如何使用
需要配合支付宝小程序来实现预授权,H5通过scheme的方式调起支付宝中的小程序完成授权
注意点
H5端从服务器获取的orderStr需要进行两次encodeURIComponent操作,然后像如下规则拼接在一起,注意:必须在scheme再次encodeURIComponent一次,否则小程序端onLoad中无法接收到参数
页面参数的方式来传递orderStr
H5端处理代码
let orderStr = res.data //从服务端获取的orderStr
if (orderStr) {
orderStr = encodeURIComponent(orderStr)
orderStr = encodeURIComponent(orderStr)
let scheme =
`alipays://platformapi/startapp?appId=20210xxxxxx&page=pages/index/index?orderStr=${orderStr}`
let url = `https://ds.alipay.com/?scheme=${encodeURIComponent(scheme)}`
//H5 唤起预授权
window.location.href = url
}
支付宝小程序处理代码
Page({
onLoad(query) {
// 页面加载
this.apply(query)
},
//唤起预授权
apply(query) {
let orderStr = query.orderStr //获取传递过来的orderStr
if (!orderStr) {
my.showToast({
type: "none",
content: '订单参数获取失败,请重试'
})
return
}
my.tradePay({
// 调用资金冻结接口(alipay.fund.auth.order.app.freeze),获取支付宝预授权参数
orderStr: orderStr,
success: (res) => {
my.showToast({
type: "none",
content: res.memo
})
},
fail: (res) => {
my.showToast({
type: "none",
content: res
})
}
});
}
});
query启动参数的方式来传递orderStr
H5端处理代码
let orderStr = res.data //从服务端获取的orderStr
if (orderStr) {
orderStr = encodeURIComponent(orderStr)
orderStr = encodeURIComponent(orderStr)
let scheme =
`alipays://platformapi/startapp?appId=20210xxxxxx&page=pages/index/index&query=orderStr=${orderStr}`
let url = `https://ds.alipay.com/?scheme=${encodeURIComponent(scheme)}`
//H5 唤起预授权
window.location.href = url
}
支付宝小程序处理代码
Page({
data: {
orderStr: ''
},
onLoad(query) {
// 页面加载
const options = my.getEnterOptionsSync(); //获取冷、热启动参数
if (options.query && options.query.orderStr) {
this.setData({
orderStr: options.query.orderStr
})
}
this.apply()
},
//唤起预授权
apply() {
let orderStr = this.data.orderStr
if (!orderStr) {
my.showToast({
type: "none",
content: '订单参数获取失败,请重试'
})
return
}
my.tradePay({
// 调用资金冻结接口(alipay.fund.auth.order.app.freeze),获取支付宝预授权参数
orderStr: orderStr,
success: (res) => {
my.showToast({
type: "none",
content: res.memo
})
},
fail: (res) => {
my.showToast({
type: "none",
content: res
})
}
});
}
});
问题记录
我自己是把生成好的scheme传给向下一个页面中的webview中使用,整个url是带参数的,当时未将拼接的url进行encodeURIComponent,导致传递到下一个页面上时参数都丢失了,所以传递参数是带参数的url需经过encodeURIComponent处理一下
encodeURI()和encodeURIComponent()都是Javascript中对URL编码的函数。
区别在于:
encodeURI()着眼于对整个URL进行编码,特殊含义的符号"; / ? : @ & = + $ , #“不进行编码
encodeURIComponent()对URL的组成部分进行个别编码,所以”; / ? : @ & = + $ , #"在这里是可以进行编码
http路径采用encodeURI进行编码,但是在路径中携带的参数采用encodeURIComponent进行编码
参考官方文档
Android端测试scheme是否可用支付宝官方应用
支付宝官方小程序预授权开发文档
支付宝官方文档scheme拼接规则介绍