開發過程中經常遇到支付寶小程式跳轉的問題,這裡總結一下支付寶小程式跳轉的常見場景和方式,希望可以對大家有所幫助。 話不多說,上乾貨! 支付寶小程式跳轉的三種行為 支付寶小程式跳轉可以拆分為三種行為,即: 外部跳轉支付寶小程式 支付寶小程式內部頁面之間跳轉 支付寶小程式內部跳轉到外部 一、外部跳轉小程 ...
開發過程中經常遇到支付寶小程式跳轉的問題,這裡總結一下支付寶小程式跳轉的常見場景和方式,希望可以對大家有所幫助。
話不多說,上乾貨!
支付寶小程式跳轉的三種行為
支付寶小程式跳轉可以拆分為三種行為,即:
- 外部跳轉支付寶小程式
- 支付寶小程式內部頁面之間跳轉
- 支付寶小程式內部跳轉到外部
一、外部跳轉小程式
外部跳轉小程式場景有很多種,接下來將對其逐一剖析。
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 跳轉小程式
具體拼接和參數入參/獲取可查看 如何跳轉小程式(啟動參數獲取和二維碼一致,註意做熱啟動和冷啟動相容處理)。
- H5 頁面跳轉小程式
- 生活號場景如何跳轉小程式
- 支付寶卡包跳轉小程式
- 其它 APP/瀏覽器跳轉小程式(適用於釘釘、高德、淘寶、其它三方可跳轉 APP、瀏覽器等)
- 商家會員卡跳轉小程式
獲取參數示例(與小程式碼相同)
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。
以上就是關於小程式跳轉的所有內容啦,有遺漏的地方大家可以提出來一起探討~(◕ᴗ◕✿),一起交流進步~