一、背景
小程序在運行過程中難免會遇到一些異常情況，將會給用戶帶來不好的體驗。針對於此，我們總結出一些常見的case，總結成最佳實踐，幫助開發者合理處理異常，提升小程序體驗。
二、最佳實踐
場景一：用戶拒絕授權定位，二次進入頁面不友好
一些小程序需要在進入首屏的時候，需向用戶獲取地理位置權限，但是若用戶一旦誤點擊【拒絕】按鈕，那麼下次再次進入該小程序時，頁面直接顯示無法定位。那麼對於一般用戶，很難知道如何再次開啓權限，並因此無法使用小程序，給用戶造成了不好的體驗。
首次進入小程序時，會彈出獲取地理位置信息的對話框，用戶點擊拒絕。
再次進入小程序時，頁面會如右圖所示，整個頁面無內容。
那我們如何解決這個場景的問題呢？這裏提出一種優化建議：
- 在用戶進入頁面時，對當前用戶的權限進行判斷；
- 若用戶沒有對應權限，則彈出設置頁面來引導用戶開啓權限。
Page({
onLoad() {
swan.authorize({
scope: 'scope.userLocation',
fail(err) {
// 更多錯誤碼請查看官方文檔：https://smartprogram.baidu.com/docs/develop/api/open/authorize_swan-authorize/
// 以 10003 用戶拒絕授權爲例
if (err.errCode === 10003) {
swan.openSetting({
success(res) {
// 彈出開啓異常提示toast
swan.showToast({
title: '請點擊權限設置->地理位置 開啓地理位置權限',
icon: 'none'
});
},
});
}
});
}
});
這樣用戶在進入界面中，可以收到友好的提示，通過重新開啓權限使用該功能。
場景二：獲取用戶信息及異常處理
在業務開發中，經常會有獲取用戶信息、地址等需求；我們發現有些開發者，依舊在使用以下兩個廢棄的api，這是我們不提倡的。
|
api
|
功能
|
官網地址
|
|---|---|---|
| swan.chooseAddress |
獲取收貨地址 | https://smartprogram.baidu.com/docs/develop/api/open/chooseaddress_swan-chooseAddress/ |
| swan.getUserInfo | 獲取用戶信息 | https://smartprogram.baidu.com/docs/develop/api/open/userinfo_swan-getUserInfo/ |
官方文檔中提供了一種通過 button 調用的方式，具體使用方式如下：
<!-- index.swan -->
<button type="primary" class="middle-btn" open-type="getUserInfo" bindgetUserInfo="getUserInfo">獲取用戶信息</button>
<button type="primary" class="middle-btn" open-type="openSetting" bindchooseAddress="chooseAddress">獲取用戶地址</button>
// index.js
Page({
getUserInfo(e) {
console.log('用戶信息:', e);
},
chooseAddress(e) {
console.log('收貨地址:', e);
}
});
用button 的方式來調用API有一系列好處：
- 在獲取信息前，自動進行用戶鑑權處理。
- 使用方式簡單，更易於維護。
同時，爲了更好的處理調用api的錯誤場景，下方列出了可能會出現的錯誤，以及對應的解決方案：
| API | errcode | errMessage | 解決方案 |
|---|---|---|---|
| getUserInfo |
10005 | system deny | 沒有權限，需申請權限後調用 |
| 402 | 訪問控制校驗失敗 | 遊客賬號登錄，調用login解決 | |
| 10001 | internal error | 小程序服務器異常，可重試一次解決 | |
| chooseAddress |
1003 | close failed | 執行異常，可重試一次解決 |
| 10001 | Internal error | 小程序不在前臺，禁止調用ui相關api。開發者調用前需要判斷小程序前後臺狀態。 | |
| 10002 | 網絡異常 |
開發者可以在錯誤回調中，通過錯誤碼來處理不同類別的錯誤。
場景三： 支付及異常處理
在很多的小程序中，需要接入支付功能，官網上提供了百度收銀臺這樣的功能，可以直接接入業務，具體的使用方式見：
https://smartprogram.baidu.com/docs/introduction/pay-intro/
在開發中，我們會使用 swan.requestPolymerPayment 這個 api 來打開百度收銀臺。這個方式有兩個好處：
- 它聚合了多種主流的支付方式，包括：百度錢包、微信、支付寶、網銀等，方便開發者一站式快速接入多種支付渠道。
- 就是全流程的支付環節的錯誤都會被收集到，這樣有利於對整理支付閉環的監控。
官網地址見：https://smartprogram.baidu.com/docs/develop/api/open/payment_swan-requestPolymerPayment/
所以，針對於使用了這種方式來實現支付功能的小程序，我們可以獲取更完整的與支付相關的錯誤信息。
以下列出了調用 swan.requestPolymerPayment 會返回的錯誤碼和錯誤信息：
| api | errorCode | errMsg |
|---|---|---|
| requestPolymerPayment
|
0 | 支付成功 |
| 1 | 支付中 | |
| 2 | 支付取消 | |
| 3 | 支付狀態不支持 | |
| 4 | 支付token不合法 | |
| 5 | 支付登錄錯誤 | |
| 6 | 支付錯誤 |
開發者可以在錯誤回調中，通過錯誤碼來處理不同類別的錯誤，給予用戶更友好的體驗。