【最佳實踐】小程序重點場景異常處理（一）

1、背景

小程序在運行過程當中不免會遇到一些異常狀況，將會給用戶帶來很差的體驗。針對於此，咱們總結出一些常見的case，總結成最佳實踐，幫助開發者合理處理異常，提高小程序體驗。javascript

2、最佳實踐

場景一：用戶拒絕受權定位，二次進入頁面不友好

一些小程序須要在進入首屏的時候，需向用戶獲取地理位置權限，可是若用戶一旦誤點擊【拒絕】按鈕，那麼下次再次進入該小程序時，頁面直接顯示沒法定位。那麼對於通常用戶，很難知道如何再次開啓權限，並所以沒法使用小程序，給用戶形成了很差的體驗。html

首次進入小程序時，會彈出獲取地理位置信息的對話框，用戶點擊拒絕。java

再次進入小程序時，頁面會如右圖所示，整個頁面無內容。小程序

那咱們如何解決這個場景的問題呢？這裏提出一種優化建議：api

在用戶進入頁面時，對當前用戶的權限進行判斷；
若用戶沒有對應權限，則彈出設置頁面來引導用戶開啓權限。

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有一系列好處：ui

在獲取信息前，自動進行用戶鑑權處理。
使用方式簡單，更易於維護。

同時，爲了更好的處理調用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	支付錯誤