結合上文全局登陸校驗，實現微信授權登錄
官方手冊地址： https://uniapp.dcloud.io/api/plugins/login?id=getuserinfo
一、書寫兩個界面
- login.vue 用於用戶登陸
- my.vue 我的界面，存放校驗登陸的函數
1.1 my.vue
<script>
var loginRes;
export default {
onLoad:function(){
loginRes = this.checkLogin('../my/my', '2');
if(!loginRes){
return;
}
}
}
</script>
如果登陸過，則不發生跳轉，直接 return;，否則跳轉至 login.vue 並攜帶兩個參數（登陸成功后的跳轉界面、跳轉方式），完成登陸操作。
1.2 login.vue
<script>
var _self;
export default {
data() {
return {
backpage:'',
backtype:''
};
},
onLoad:function(options){
_self = this;
/* #ifdef APP-PLUS */
uni.login({
success: (res) => {
/* console.log(JSON.stringify(res))
第三方登陸
res 對象格式
{"code":"***",
"authResult":{
"openid":"***",
"scope":"snsapi_userinfo",
"refresh_token":"**",
"code":"****",
"unionid":"***",
"access_token":"***",
"expires_in":7200
},
"errMsg":"login:ok"} */
uni.getUserInfo({
success: (info) => {
/* console.log(JSON.stringify(info))
info 對象格式
{"errMsg":"getUserInfo:ok",
"rawData":"...
"userInfo":{
"openId":"***",
"nickName":"***",
"gender":1,
"city":"Xi'an",
"province":"Shaanxi",
"country":"China",
"avatarUrl":"頭像",
"unionId":"oU5Yyt_agt547zWyA0v0eLfFPqxo"
},"signature":""} */
/* 與服務器交互將數據提交到服務端數據庫 */
uni.request({
url: _self.apiServer+'member&m=login',
method: 'POST',
header: {'content-type' : "application/x-www-form-urlencoded"},
data: {
openid: info.userInfo.openId,
name: info.userInfo.nickName,
face: info.userInfo.avatarUrl,
},
success: res => {
console.log(JSON.stringify(res))
res = res.data;
if(res.status == 'ok'){
uni.showToast({
title: '登陸成功',
mask: false,
duration: 1500
});
uni.setStorageSync('SUID' , res.data.u_id + '');
uni.setStorageSync('SRAND', res.data.u_random + '');
uni.setStorageSync('SNAME', res.data.u_name + '');
uni.setStorageSync('SFACE', res.data.u_face + '');
/* 判斷跳轉方式 */
if(options.backtype == '1'){
uni.redirectTo({url:options.backpage});
}else{
uni.switchTab({url:options.backpage});
}
}else{
uni.showToast({title:res.data});
}
},
fail: () => {
console.log('登陸失敗')
},
complete: () => {}
});
},
fail: () => {
uni.showToast({title:"微信登錄授權失敗"});
}
})
},
fail: () => {
uni.showToast({title:"微信登錄授權失敗"});
}
})
/* #endif */
console.log(options)
}
}
</script>
主要涉及到3個方法：
- uni.login
- uni.getUserInfo
- uni.request
01、uni.login
用於觸發第三方登陸，調起微信登陸，登陸成功后返回對象格式如下：
{
"code":"***",
"authResult":{
"openid":"***",
"scope":"snsapi_userinfo",
"refresh_token":"**",
"code":"****",
"unionid":"***",
"access_token":"***",
"expires_in":7200
},
"errMsg":"login:ok"
}
02、uni.getUserInfo
獲取用戶信息，通過上方的 uni.login 方法會得到用戶 access_token，故 uni.getUserInfo 在此基礎上獲取用戶的 openid、userInfo(頭像、昵稱) 等信息。
{
"errMsg":"getUserInfo:ok",
"rawData":"...
"userInfo":{
"openId":"***",
"nickName":"***",
"gender":1,
"city":"Xi'an",
"province":"Shaanxi",
"country":"China",
"avatarUrl":"頭像",
"unionId":"oU5xxxxxxxxxxeLfFPqxo"
},
"signature":""
}
03、uni.request
此方法為 uni-app 中用於網絡請求，詳細見官方手冊：uni.request
二、效果
點擊 my.vue 將會觸發 微信登陸授權界面，如下：
登陸成功后，向遠程服務器發送一個保存用戶信息的請求
18年專科畢業后一度迷茫，創建了一個用來記錄自己成長的公眾號，感興趣的小伙伴可以關注一下~
