业务需求
为每个用户生成唯一码 微信扫码统一跳转至指定微信小程序页面。支付宝扫码判断用户是否有自己的小程序 有则跳转到用户单独的小程序 没有则统一跳转至固定的小程序中
方案 支付宝先扫码跳转至H5页面 H5中向后台获取要跳转的支付宝小程序相关信息然后进行跳转 微信扫码 ：先在指定小程序配置好二维码跳转规则 此二维码和H5路径规则一样 注：微信扫码会先跳转至配置了规则的小程序中 如果不存在此URL跳转规则 则会跳转到H5
-
支付宝跳转方式
- 官网文档地址 opendocs.alipay.com/mini/0090ty…
- 支付宝小程序scheme链接介绍 opendocs.alipay.com/support/01r…
- opendocs.alipay.com/support/01r…
-
//H5跳转支付宝小程序的链接 appid：小程序ID page：小程序页面路径 let queryUrl = encodeURIComponent(`id=${id}&code=${ code }&scan=true&scan2=1`);//官网说必须要加密一下 不然只能拿到第一个参数 let queryUrl = encodeURIComponent(`id=${id}&code=${ code }&scan=true&scan2=1`); window.location.href=`https://ds.alipay.com/?scheme=` + encodeURIComponent(`alipays://platformapi/startapp?appId=${appid }&page=${page}&query= ${ queryUrl}`);
-
- 获取小程序启动时的参数 (只能在APP的生命周期中拿 页面拿不到)
- opendocs.alipay.com/mini/03durs
- 官网文档链接 opendocs.alipay.com/support/01r…
-
-
在 App 层面（app.js 中）, 通过 onLaunch /onShow 事件获取启动参数 * 如果冷启动，则会在 onLaunch(options) 中获得参数；如果为热启动，则会在 onShow(options) 中获得参数。建议冷启动中获取不了的时候，再尝试在 onShow 中获取，若还是获取不了，则可判定为没有拿到该参数。
-
-
微信跳转方式
- 参考的第三方文档 www.mpgcw.com/8299.html
- 官方文档 developers.weixin.qq.com/miniprogram…
-
获取 URL Scheme (不符合需求 PASS)
- 自 2022 年 4 月 11 日起，URL Scheme有效期最长 30 天，不再支持永久有效的URL Scheme、不再区分短期有效URL Scheme与长期有效URL Scheme。若在微信外打开，用户可以在浏览器页面点击进入小程序。每个独立的URL Scheme被用户访问后，仅此用户可以再次访问并打开对应小程序，其他用户无法再次通过相同URL Scheme打开该小程序。 在本次规则调整生效前已经生成的URL Scheme，如果有效期超过30天或长期会被降级为30天有效，只能被1个用户访问，开始时间从调整日期开始计算
-
云开发跳转 (不想使用)
-
第三方外链平台/工具 (不符合)
-
以上三种方式都不符合条件
最终采用的方式
支付宝扫码跳转H5 由后台返回要跳转的小程序appid page 页面解析需要的参数 code 微信端只跳固定的一个小程序 所以直接在小程序 开发设置中配置 扫普通链接二维码打开小程序
- 调试方面
- 微信配置的二维码链接直接选择开发版、体验版、线上版
- 支付宝
- opendocs.alipay.com/support/01r…
- 简单理解
- 本地编辑器运行点击预览 支付宝扫预览码进入小程序
- 点击小程序右上角的三个点(胶囊) 点击下面的联调设置
- 打开 联调扫码版本选项
- 退出小程序 扫我们制定的二维码就可以进入开发代码联调了
- 简单理解
- opendocs.alipay.com/support/01r…
H5代码
<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
<script>
let type;
function isWxOrAli() {
var ua = window.navigator.userAgent.toLowerCase();
ua && alert(ua)
//判断是不是微信
if (ua.match(/MicroMessenger/i) == "micromessenger") {
return 1;
}
//判断是不是支付宝
if (ua.match(/AlipayClient/i) == "alipayclient") {
return 2;
}
return 3;
}
type = isWxOrAli()
$(() => {
let params = decodeURI(window.location.href).split('?')[1]
if (!params) {
alert('未查询到参数信息')
return
}
let query = {}
if (params) {
params.split('&').forEach(item => {
let par = item.split('=')
query[par[0]] = decodeURI(par[1])
})
}
if (type == 1) {
// 微信
} else if (type == 2) {
// 支付宝
$.get(`https://***.***.com/**/${query.code}`, {}, function (data) {
if (data.code == 0) {
let queryUrl = encodeURIComponent(`code=${query.code}&scan=true`);
window.location.href = `https://ds.alipay.com/?scheme=` + encodeURIComponent(`alipays://platformapi/startapp?appId=${data.result.miniAppId}&page=${data.result.path}&query= ${queryUrl}`);
} else {
alert('接口掉调用失败')
}
})
}
})
</script>
uniapp
- 微信 扫码进来
// 微信扫码的参数 在APP的onLaunch也能拿到 option.query.q 中 和页面onLoad中拿到的参数一样都需要解码
onLoad(option){
if (opt.q) {
let urlStr = decodeURIComponent(opt.q)
if(urlStr.indexOf('判断获取的地址和自己业务地址是否匹配 ') != -1){
let params =urlStr.split('?')[1]
let query = {}//url中携带的所有参数
if (params) {
params.split('&').forEach(item => {
let par = item.split('=')
query[par[0]] = decodeURI(par[1])
})
}
if('查看query中是否有自己要的数据'){
this.utils.toast("未获取到商户标识")
return
}
}
}
}
- 支付宝取参
onLaunch(option){
// 外链跳支付宝小程序自动解码了 我这边就不用解了 直接存到storage中 页面直接从storage中取出来然后做处理
// 处理完根据业务需要 记得将存起来的参数清空！参数清空！参数清空！参数清空！参数清空！ 避免每次进入页面都走了同样的逻辑
if (option.query && option.query.scan ) {
this.$queue.setData("scanMechartHome", option.query.code);
}
}
//onShow 由于热启动只触发onShow 同样的代码在onLaunch中再写一份
// ********在页面的onLoad钩子中的代码
onLoad(){
if('是否存在扫码数据'){
// 支付宝扫码进来的
let MCCode = _this.getData("scanCode");
//业务处理
// 扫码进来后要清空缓存里的数据 不然每次都是这个数据了
_this.removeData("scanCode")
return
}
}
