一文詳解|支付寶小程式跳轉(超詳細版)

来源:https://www.cnblogs.com/yjdmx/archive/2023/10/23/17782880.html
-Advertisement-
Play Games

開發過程中經常遇到支付寶小程式跳轉的問題,這裡總結一下支付寶小程式跳轉的常見場景和方式,希望可以對大家有所幫助。 話不多說,上乾貨! 支付寶小程式跳轉的三種行為 支付寶小程式跳轉可以拆分為三種行為,即: 外部跳轉支付寶小程式 支付寶小程式內部頁面之間跳轉 支付寶小程式內部跳轉到外部 一、外部跳轉小程 ...


開發過程中經常遇到支付寶小程式跳轉的問題,這裡總結一下支付寶小程式跳轉的常見場景和方式,希望可以對大家有所幫助。

話不多說,上乾貨!

 

 

 

 

 

支付寶小程式跳轉的三種行為

支付寶小程式跳轉可以拆分為三種行為,即:

  • 外部跳轉支付寶小程式
  • 支付寶小程式內部頁面之間跳轉
  • 支付寶小程式內部跳轉到外部

 

一、外部跳轉小程式

外部跳轉小程式場景有很多種,接下來將對其逐一剖析。

 

1. 二維碼跳轉小程式

二維碼跳轉小程式分為「小程式碼」「關聯普通鏈接二維碼」

  • 小程式碼:商家通過 小程式碼(原小程式二維碼)可生成跳轉自身小程式指定頁面二維碼,可用於線上線下貼碼推廣,便捷推廣小程式。 

 

 

 

 

  • 普通鏈接二維碼:商家的開發者自行對網頁鏈接進行編碼後生成的二維碼,也就是我們最常見的二維碼。

1.1. 小程式碼

  適用場景

  • 支付寶首頁「掃一掃」跳轉小程式。
  • 二維碼鏈接跳轉小程式(其它 APP/瀏覽器、H5 頁面,支付寶端內等都可以使用,適用於三方 APP&瀏覽器跳轉小程式)。

  參數獲取

  app.js 中 onLaunch/onShow 啟動函數:options.query.key 獲取(經驗:註意做 熱啟動和冷啟動 相容處理)。

  • 冷啟動:當用戶打開未啟動過,或者是已經銷毀的小程式時,稱為冷啟動。此時小程式會執行初始化,初始化完成後,會觸發 onLaunch 回調函數。

熱啟動:當用戶打開已經關閉但仍處於後臺運行的小程式時,稱為熱啟動。在這種情況下,小程式並不會被銷毀後重啟,而僅是從後臺切換到前臺,此時,onShow 函數會觸發,onLaunch 回調函數不會被觸發。

App({
  onLaunch(options) {
my.alert({
  content: '啟動參數:'+JSON.stringify(options.query.key),
}); 
console.log('query', options.query);    
console.log('App Launch', options); 
 },
 onShow() {
   console.log('App Show')  
}})

 

1.2. 關聯普通鏈接二維碼

適用場景

只能通過支付寶首頁掃一掃跳轉小程式。

參數獲取

app.js 中 onLaunch/onShow 啟動函數:options.query.qrCode 獲取(註意做熱啟動和冷啟動相容處理)。

示例代碼

onLaunch(options){
    my.alert({
      title: 'app onLaunch',
      content:  JSON.stringify(options),
      success: (res) => {          //成功處理代碼段      },
    });    //獲取關聯普通二維碼的碼值,放到全局變數qrCode中
  if (options.query && options.query.qrCode) {
      this.qrCode = options.query.qrCode;
    }
  }

註意:普通關聯二維碼測試需要先發佈配置規則,使用規則自行生成二維碼來測試跳轉(不要使用配置時的第二步測試二維碼測試)。

 

2. 支付寶 URL Scheme 跳轉小程式

具體拼接和參數入參/獲取可查看 如何跳轉小程式(啟動參數獲取和二維碼一致,註意做熱啟動和冷啟動相容處理)。

獲取參數示例(與小程式碼相同)

App({
  onLaunch(options) {
    my.alert({content: '啟動參數:'+JSON.stringify(options.query.key),});
    console.log('query', options.query);
    console.log('App Launch', options);
  },
  onShow() {
    console.log('App Show')
  }})

 

3. 小程式跳轉小程式

小程式跳轉小程式可使用 my.navigateToMiniProgram 介面。

適用場景

  • 同主體其它小程式跳轉小程式:同主體小程式可直接互跳,無需任何設置。支付寶客戶端 10.1.10 及以上版本支持。
  • 其它主體小程式跳轉小程式:
    • 需對方登錄支付寶開放平臺在 小程式詳情頁 > 開發服務 > 開發設置 > 基礎設置 > 小程式相互跳轉 中設置為 允許所有小程式跳轉指定小程式跳轉。支付寶客戶端 10.1.25 及以上版本支持。

參數獲取

在目標小程式的 App.onLaunch()/App.onShow() 啟動參數 extraData 中獲取數據(註意做熱啟動和冷啟動相容處理)。

獲取示例

App({
  onLaunch(options) {
    my.alert({content: '啟動參數:'+JSON.stringify(options.extraData.key),});
    console.log('query', options.extraData);
    console.log('App Launch', options);  },
  onShow() {
    console.log('App Show')
  }})

 

4. 其它場景跳轉小程式

4.1. 模板消息跳轉小程式

帶參

詳情可查看 模板消息跳轉小程式帶參

獲取參數

由於模板消息的參數是拼接在 path 後面傳入,獲取參數和小程式頁面之間跳轉帶參一致,在對應頁面 Page.onLoad(query) 啟動函數 query 中獲取。

獲取示例代碼

onLoad(query) {
    if (query) {
                my.alert({
            content: '啟動參數:' + JSON.stringify(query.x)
        });
        }}

4.2. 分享鏈接跳轉小程式

具體接入使用可查看 小程式自定義分享,這裡只說明帶參和獲取參數。

註意:如果分享的頁面依賴上一頁跳轉時傳遞的參數做邏輯運算展示,通過分享鏈接進入該頁面需要自行在自定義分享入參中去拼接該參數,否則分享鏈接不會帶上該參數。

帶參

可以在 onShareAppMessage 的 path 路徑參數後拼接自定義參數(參數傳遞遵循 http get 的傳參規則),如:pages/index/index?key1=value1

獲取參數

path 中的自定義參數可在小程式生命周期的 Page.onLoad(query) 方法中獲取,path 路徑里不能帶根目錄 /。

獲取示例代碼

onLoad(query) {
    if (query) {
                my.alert({
            content: '啟動參數:' + JSON.stringify(query.x)
        });
        }}

 

二、小程式內部頁面之間跳轉

小程式內頁面之間跳轉,小程式提供了路由 API 供開發者根據自己的場景選擇對應的路由 API,路由 API 具體使用可查看官網 API 文檔,這裡只說明帶參和獲取參數。小程式路由 API 帶參和獲取參數方式一致。

帶參

在 URL 入參路徑後拼接參數,如:url:"page/index/index?key1=value1&key2=value2"。

獲取參數

在對應跳轉頁面的 Page.onLoad(query) 啟動函數中 query 獲取。

獲取示例代碼

onLoad(query) {
    if (query) {
                my.alert({
            content: '啟動參數:' + JSON.stringify(query.x)
        });
        }}

小程式頁面路由 API 支持帶參跳轉情況

路由 API

是否支持帶參

my.switchTab

不支持

my.reLaunch

支持

my.redirectTo

支持

my.navigateTo

支持

my.navigateBack

不支持

常用場景中可用路由API

  • 普通頁面之間跳轉:my.navigateTo、my.redirectTo、my.reLaunch、my.navigateBack。
  • tab 頁面跳轉普通頁面:my.navigateTo、my.redirectTo、my.reLaunch、my.navigateBack。
  • tab 頁面跳轉 tab 頁面:my.switchTab。
  • 普通頁面跳轉 tab 頁面:my.switchTab。
  • 小程式頁面跳轉 web-view 內嵌頁面(根據具體跳轉的小程式頁面選擇):my.navigateTo、my.redirectTo、my.reLaunch、my.navigateBack、my.switchTab。
  • web-view 內嵌頁面跳轉小程式頁面(內嵌頁面跳轉小程式頁面也是用的小程式路由 API,根據具體跳轉的小程式頁面選擇):my.navigateTo、my.redirectTo、my.reLaunch、my.navigateBack、my.switchTab。

註意:my.navigateTo最多不能超過 10 層頁面棧,建議通過 getCurrentPages 方法判斷頁面棧峰值,超過後用重定向跳轉頁面。

 

三、小程式內部跳轉小程式外部

小程式對外跳有限制條件,以下為具體條件說明。

支持外跳

  • 小程式 web-view 內嵌式跳轉 H5 頁面,不能真正跳出小程式環境。
    帶參:可以在 URL 後拼接參數和 GET 方式一致(參數傳遞遵循 http get 的傳參規則),如 https://www.baidu.com?key1=value1
  • 小程式支持通過 關註生活號 組件關註並跳轉生活號(不可帶參)。
  • 小程式支持跳轉以 https://render.alipay.com/p 功能變數名稱開頭的生活號文章/部分支付寶官方業務頁面或者通過固定 appCode 值跳轉對應支付寶端頁面,詳情可查看 my.ap.navigateToAlipayPage
  • 小程式支持跳轉支付寶卡包/商家會員卡,可使用以下介面:

介面名稱

介面描述

my.openCardList

打開支付寶卡包中的“卡”列表

my.openMerchantCardList

打開當前用戶領取某個商家的“卡”列表

my.openCardDetail

打開當前用戶領取某張卡的詳情頁

my.openVoucherList

打開支付寶卡包中的“券”列表

my.openMerchantVoucherList

打開當前用戶領取某個商戶的“券”列表

my.openVoucherDetail

打開當前用戶領取某張券的詳情頁(非口碑券)

my.openKBVoucherDetail

打開當前用戶領取某張券的詳情頁(口碑券)

my.openTicketList

打開支付寶卡包中的“票”列表

my.openMerchantTicketList

打開當前用戶領取某個商家的“票”列表

my.openTicketDetail

打開當前用戶領取某張票的詳情頁

  • 外跳其它小程式。可查看上文 外部跳轉小程式-小程式跳轉小程式

不支持外跳

  • 小程式不支持外跳其它 APP。
  • 小程式不支持跳轉 AppStore。

 

以上就是關於小程式跳轉的所有內容啦,有遺漏的地方大家可以提出來一起探討~(◕ᴗ◕✿),一起交流進步~


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 導讀: 本文系原創,歡迎規範轉載。 本文描述瞭如何處理linux虛擬機從xen虛擬化遷移kvm虛擬化遇到問題,包括重建initramfs,處理未卸載的tools等。 系列文章: xen2kvm遷移-Windows篇 xen2kvm遷移-Linux篇 遷移環境: 源平臺:華為FusionCompute ...
  • 痞子衡嵌入式半月刊: 第 83 期 這裡分享嵌入式領域有用有趣的項目/工具以及一些熱點新聞,農曆年分二十四節氣,希望在每個交節之日準時發佈一期。 本期刊是開源項目(GitHub: JayHeng/pzh-mcu-bi-weekly),歡迎提交 issue,投稿或推薦你知道的嵌入式那些事兒。 上期回顧 ...
  • 1. on-my-zsh安裝 1.1. 使用curl方式安裝 1.1.1 官方鏡像源 sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)" 1.1.2 國內Git ...
  • 1. 增長 1.1. 在高速的業務環境中,流量可能逐年增長幾個數量級,環境會變得更加複雜,隨之而來的數據需求也會快速增加 1.2. 擴展Web伺服器 1.2.1. 在負載均衡的後端添加更多的伺服器節點,而這通常就是擴展We b伺服器的全部工作 2. 可擴展性 2.1. 系統支撐不斷增長的流量的能力 ...
  • 更多技術交流、求職機會,歡迎關註位元組跳動數據平臺微信公眾號,回覆【1】進入官方交流群 近年來,隨著消費者的心理需求逐步趨向於精神層面、科技的迭代迅速以及市場環境的複雜性逐步上升,我國的廣告行業逐步展開新的投放模式。但流量成本高,企業試錯成本高昂,如何在控製成本的同時實現廣告投放效益最大化,成為廣告投 ...
  • HDFS文件系統基本信息 HDFS作為分散式存儲的文件系統,有其對數據的路徑表達方式。 HDFS同Linux系統一樣,均是以/作為根目錄的組織形式 Linux: /usr/local/hello.txt HDFS: /usr/local/hello.txt 命令行 # 老版本用法 hadoop fs ...
  • 作者:WangMin 格言:努力做好自己喜歡的每一件事 作為前端開發來說,要掌握的CSS基礎一定很多,那麼CSS中盒子模型肯定是必考必問必掌握的前端知識點,因為它是CSS基礎中非常重要的內容,接下來我們就一起來瞭解一下盒子模型吧! 什麼是盒子模型? CSS 所有的HTML 標簽元素在網頁中都生成了一 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 頁面效果 具體實現 新增 1、監聽滑鼠抬起事件,通過window.getSelection()方法獲取滑鼠用戶選擇的文本範圍或游標的當前位置。 2、通過 選中的文字長度是否大於0或window.getSelection().isColla ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...