通过二维码访问支付宝小程序内页

发表于 | 分类于
通过二维码访问支付宝小程序内页

前言

如果我们向扫码跳转到支付宝小程序的内页，是不需要在小程序的管理页面配置的，直接生成URL即可。

仅支付宝访问

URL的格式

1
alipays://platformapi/startapp?appId=[appId]&page=[page]&query=[query]

其中

page和query的参数值要UrlEncode

假如

appId为2021004153612039

page为/pages_a/goods/goodsdetail?goodsId=10

1
2
let url = `alipays://platformapi/startapp?appId=2021004153612039&page=${encodeURIComponent("/pages_a/goods/goodsdetail?goodsId=46")}`
console.info(url);

注意页面的参数没有放在query中

这样的URL只支持支付宝扫码访问

支持浏览器/支付宝

上面的地址只能在支付宝中扫码访问，如果想在浏览器中访问可以这样获取

1
2
let url = 'https://ds.alipay.com/?scheme=' + encodeURIComponent(`alipays://platformapi/startapp?appId=2021004153612039&page=${encodeURIComponent("/pages_a/goods/goodsdetail?goodsId=46")}`)
console.info(url);

项目

1
2
let pageUrl = encodeURIComponent("/pages_a/goods/goodsdetail?goodsId=" + goodsId);
qrCodeUrl.value = 'https://ds.alipay.com/?scheme=' + encodeURIComponent(`alipays://platformapi/startapp?appId=2021004153612039&page=${pageUrl}`)

微信扫码访问

微信没法做到扫码跳到支付宝小程序页面

我们可以做一个页面，页面中提示用户用浏览器扫码访问

注意

这种方式使用支付宝访问的时候会提示非支付宝官方网页，请确认是否继续访问。

页面中

mp.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小程序跳转</title>
</head>
<style>
    body{
        padding: 0;
        overflow: hidden;
    }
    #msg{
        width: 100vw;
        height: 100vh;
        align-items: center;
        justify-content: center;
        font-size: 6vw;
        display: none;
    }
</style>
<body>
<div id="msg">请在浏览器中扫码访问</div>
<script>
    function isWeChat() {
        const userAgent = navigator.userAgent.toLowerCase();
        return userAgent.includes('micromessenger');
    }

    if (isWeChat()) {
        document.getElementById("msg").style.display="flex";
    } else {
        const url = new URL(window.location.href); // 获取当前页面的 URL
        const id = url.searchParams.get('id');
        if(id){
            window.location.href='https://ds.alipay.com/?scheme=' + encodeURIComponent(`alipays://platformapi/startapp?appId=2021004153612039&page=${encodeURIComponent("/pages_a/goods/goodsdetail?goodsId="+id)}`)
        }
    }
</script>
</body>
</html>

这样我们的URL可以写为

https://www.psvmc.cn/mp.html?id=10

query参数获取

query传的参数

获取URL

1
2
let url = `alipays://platformapi/startapp?appId=2021004153612039&page=${encodeURIComponent("/pages_a/goods/goodsdetail?goodsId=46")}&query=${encodeURIComponent("test=10")}`
console.info(url);

小程序应该这样获取参数

在 App 层面（app.js 中）, 通过 onLaunch /onShow 事件获取启动参数

onLaunch

1
2
3
4
5
6
onLaunch(options) {
  my.alert({
    content:JSON.stringify(options.query.key)
  })   
  console.log(JSON.stringify(options)) 
},

onShow

1
2
3
4
5
6
onShow(options) {   
  my.alert({    
    content:JSON.stringify(options.query.key)  
  })  
  console.log(JSON.stringify(options)) 
},

在页面层面(page.js中)，通过 my.getLaunchOptionsSync 获取启动参数

1
2
3
4
onLoad: function() {
  let options = my.getLaunchOptionsSync();
  console.log(options)
}