小程序scheme链接介绍
支付宝小程序不限制来自 H5 页面或者其它 App 的跳转,只要 H5 页面或者其它 App 支持外跳小程序即可跳转。
alipays://platformapi/startApp?appId=60000157&orderStr=alipay_sdk%3Dalipay-sdk-java-4.40.231.ALL%26app_id%3D2021005106669386%26biz_content%3D%257B%2522out_trade_no%2522%253A%2522SVIPRFLK202506061432286683325169%2522%252C%2522total_amount%2522......
在H5中可以直接通过location.href进行跳转
location.href="alipays://platformapi/startapp?appId=20170713077xxxxx&page=x/yz&query=xx%3dxx";
问题
在微信公众号环境中无法直接通过location.href="alipays://platformapi/startapp?appId=.... 的方式直接跳转,经过了解可以已通过“https://ulink.alipay.com/?scheme=”出入对应的支付宝scheme链接进行跳转。
在ios设备中拉起进行跳转会弹出如下弹窗,点击继续即可进行跳转如下左图,但在安卓设备中则会直接被微信拦截跳转失败,如下右图。
那么安卓设备还如何处理呢?
解决方法
现在只要能让微信能跳转到浏览器中打开需要跳转的地址即可在浏览器跳转拉起支付。那么现在的问题是如何让微信提示到浏览器中打开呢?
经过研究了解到安卓设备在打开doc、pdf等特殊文件时会弹出在浏览器中打开的弹窗,点击允许即可在浏览器中访问原来需要跳转的链接
如何让请求变成特殊文件的链接地址呢?
可以通过服务端提供一个接口,传递的参数就是真正需要拉起支付跳转的URL链接,当服务端接收到请求的时候判断当前请求的设备环境信息,如果是安卓微信公众号环境则配置响应头信息为:
{
Content-Type, 'application/octet-stream',
Content-Disposition, 'attachment; filename="file1.doc"'
}
微信检测到该响应头则会认为要访问的是一个doc文件,就好弹出浏览器访问弹窗,点击允许即可在浏览器中正常拉起支付宝支付。
如果服务端检测到非以上环境则直接返回302跳转到请求中携带的真实跳转地址,即可直接跳转到支付宝拉起支付。
具体的代码大致如下:
// 判断是否是安卓微信公众号环境
function isAndroidWechat(userAgent: string) {
const ua = userAgent.toLowerCase();
const isWeXin = ua.includes('micromessenger');
const isAndroid = ua.includes('android');
const isWXWork = ua.includes('wxwork');
return isWeXin && isAndroid && !isWXWork;
}
@Get('/readyToPay/:id')
redirectToUrl(@Res() res, @Req() request: Request, @Query() query: any) {
let userAgent = request.headers['user-agent'];
const targetUrl = query.url;
// 判断是否是微信环境
if ( isAndroidWechat(userAgent)) {
res.setHeader('Content-Type', 'application/octet-stream');
// 强制下载的文件名可以设置为 .doc
res.setHeader('Content-Disposition', 'attachment; filename="file1.doc"');
res.send();
} else {
console.log('非微信环境');
// res.setHeader('Content-Type', 'text/html');
res.redirect(302, targetUrl);
}
}
具体流程根据实际情况处理即可,如访问环境在前端判断也可以,目前只是说明一种解决方式。
非特殊说明,本博所有文章均为博主原创。
如若转载,请注明出处:https://webxbz.com/101
共有 0 条评论