uni-app第三方登陸-微信

結合上文全局登陸校驗，實現微信授權登錄
官方手冊地址： 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>

主要涉及到2個方法：

• uni.login
• uni.getUserInfo

uni.login

用于觸發第三方登陸，調起微信登陸，登陸成功后返回對象格式如下：

{????
????"code":"***",
????"authResult":{
????????"openid":"***",
????????"scope":"snsapi_userinfo",
????????"refresh_token":"**",
????????"code":"****",
????????"unionid":"***",
????????"access_token":"***",
????????"expires_in":7200
????},
????"errMsg":"login:ok"
}

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":""
}

uni.request

此方法為 uni-app 中用于網絡請求。詳細見官方手冊：https://uniapp.dcloud.io/api/request/request?id=request

二、效果

點擊 my.vue 將會觸發 微信登陸授權界面，如下：

登陸成功后，向遠程服務器發送一個保存用戶信息的請求

posted @ 2019-03-30 09:56 niceyoo 閱讀(...) 評論(...) 編輯 收藏

總結

以上是生活随笔為你收集整理的uni-app第三方登陆-微信的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。