uni-app 微信小程式授權登入

虛乄發表於2021-04-24
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

相關文章