登錄流程如下

1. 登錄，wx.login拿到code，調用後端接口
2. 後端通過appId、appsecret、code獲取session_key和openid
3. 後端自定義登錄態，與openid、sessiong_key關聯，返回自定義登錄態給前端
4. 前端拿到登錄態(token)，後續拿token請求接口即可。

登錄的同時要加手機號驗證，流程如下：

1. 前端點擊一鍵登錄按鈕，按鈕綁定open-type="getPhoneNumber"
2. 在@getphonenumber的回調中拿到手機code碼
3. 拿到手機code碼後，接着調用wx.login獲取登錄code碼
4. 調用登錄接口，同時將手機code碼、登錄code碼傳給後端
5. 後端首先拿登錄code碼獲取openid、sessiong_key等信息，然後調用getAccessToken接口獲取access_token
6. 通過access_token調用獲取getPhoneNumber接口獲取手機號
7. 後端自定義登錄態，關聯手機號，邏輯根據實際情況調整
8. 返回登錄態(token)以及其它附帶信息給前端

登錄跟獲取手機號可以拆開，有些類型的小程序僅登錄就好了，不需要手機號參與，這兩個功能在小程序端是分開的模塊，如果你的業務裏需要登錄時驗證手機號，可以將登錄和獲取手機號的邏輯整合到一起。

參考文檔：
小程序登錄文檔
wx.login
手機號快速驗證組件
快速驗證-獲取手機號
獲取接口調用憑據getAccessToken
通過code獲取網站授權 access_token
小程序帳號登錄規範要求與修改指引

獲取手機號code

通過開放能力open-type實現 open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
需要注意，微信小程序開發者賬號必須認證且隱私協議完善後才可以調用該API

<button type="primary" :style="customStyle.sure" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
一鍵登錄
</button>

const getPhoneNumber = (e) => {
    try {
        if (e.detail.errno == 112) { 
            // 獲取失敗的狀態，自定義處理
            return getApp().errFeedback(e.detail);
        }
        if(e.detail.errMsg == 'getPhoneNumber:fail user deny'){
            uni.showToast({
                title: '您已拒絕授權，相關功能將不可用',
                icon: 'none',
                duration: 1000
            });
            return;
        }
            console.log('獲取手機號', e.detail.code);
    } catch (err) {
        console.log(err);
    } finally {
    }
};

同意授權的返回

如果拒絕授權，則返回：

獲取AccessToken

在這裏生成AppSecret

const getAccessToken = async (code) => {
    return new Promise((resolve, reject) => {
        uni.request({
            method: 'GET',
            url: `https://api.weixin.qq.com/cgi-bin/token`,
            data: {
                grant_type: 'client_credential', // 固定值
                appid: '你的appid',
                secret: '你的AppSecret'
            },
            dataType: 'json',
            success: (response) => {
        console.log('獲取access_token', response);
                if (response.statusCode != 200) {
                    uni.showToast({
                        title: '獲取登錄憑證失敗~',
                        icon: 'none',
                        duration: 1000
                    });
                    return;
                }
                let { data } = response;
                resolve(data.access_token);
            },
            fail: (err) => {
                console.log('請求失敗', err);
            }
        });
    });
};

成功的響應：