uni-app 微信小程序授權登錄

1.微信小程序 獲取用戶信息 與獲取手機號

詳細信息看官方公告：https://developers.weixin.qq.com/community/develop/doc/000cacfa20ce88df04cb468bc52801

回收uni.getUserInfo接口可獲取用戶授權（返回的全部是匿名數據）

4月28日24時后發布的新版本小程序，開發者調用wx.getUserInfo或<button open-type="getUserInfo"/>將不再彈出彈窗，直接返回匿名的用戶個人信息，獲取加密后的openID、unionID數據的能力不做調整。

采用uni.getUserProfile 來授權返回微信用戶信息

具體變化如下表：

 

2.uni.getUserInfo 接口調用方式

起初通過button 來獲取用戶信息， 設置 open-type="getUserInfo"

<button  open-type="getUserInfo" @getuserinfo="getUserInfo">微信授權登錄（open-type 獲取）</button>

js部分
getUserInfo(e) {
    if (e.detail.errMsg == 'getUserInfo:ok') {
            //對數據進行操作
            console.log(e)
    } else {
        this.$operate.toast({
                title: '授權失敗無法登錄！'
            })
        }
},

或者 直接調用 uni.getUserInfo 來獲取信息 在當前微信更新接口后，這2個接口將直接返回匿名用戶數據，不在彈窗提示

//js 部分 通過 @tap="userInfo" 調用
userInfo() {
    //獲取code
    uni.login({
        provider: 'weixin',
        success(login) {
            console.log(login);
            //獲取用戶信息
            uni.getUserInfo({
                    provider: 'weixin',
                    lang: 'zh_CN',
                    success(user) {
                        console.log(user);
                }
            })
        }
    })
}

3.采用uni.getUserProfile 獲取信息

不通過open-type 調用 而是使用 @tap=“goLogin” 或 bindtap="goLogin"調用的

<button  @tap="goLogin">微信uni.getUserProfile 登錄</button>

//js
goLogin() {
    // 獲取code 小程序專有，用戶登錄憑證。
        uni.login({
            provider: 'weixin',
            success(login) {
                console.log(login);
            }
        })
        // desc: '用於完善會員資料'  必填 聲明獲取用戶個人信息后的用途，后續會展示在彈窗中
        uni.getUserProfile({
            desc: '用於完善會員資料',  
            lang: 'zh_CN',
            success(user) {
                console.log(user);
            }
        })
},

4.獲取手機號 登錄

獲取手機號 ，只能通過 button 按鈕點擊來獲取 信息 ，傳給后台解析數據

<button open-type="getPhoneNumber" @getphonenumber="getUserPhone">微信手機號登錄</button>

js部分
//獲取用戶手機號
getUserPhone(e) {
    // 獲取code 小程序專有，用戶登錄憑證。
    uni.login({
            provider: 'weixin',
            success(login) {
                console.log(login);
            }
    })    
    //手機號加密數據
    if (e.detail.errMsg == 'getPhoneNumber:ok') {
        // 獲取 encryptedData 與 iv 傳給后台進行解析
        console.log(e)
        //傳給后端的參數
        let data = {
                session_key: '后端返回微信 openid ',
                encryptedData: e.detail.encryptedData,
                iv: e.detail.iv,
        }
    } else {
        this.$operate.toast({
            title: '授權失敗無法登錄！'
        })
    }
}

在解析 加密信息時，需先通過 uni.login獲取code並上傳給后台，用來獲取微信 openid

4.驗證碼倒計時登錄

項目有時會用到驗證碼倒計時，增加一個小玩意，有需要自取

css 樣式采用 ColorUI-UniApp

案例地址：https://gitee.com/jielov/uni-app-tabbar/blob/master/pages/wx_login/wx_login.vue