小程序-微信登录
uni-app 2021-09-10 10:29:28 小程序   微信登录   

 

XML/HTML Code复制内容到剪贴板
  1. <button type="default" :plain="true" @click="login">  
  2.     <text class="login-btn-text gui-color-white">微信登录</text>  
  3. </button>  

 

JavaScript Code复制内容到剪贴板
  1. methods: {    
  2.             async login() {  
  3.                 let userInfo = await this.mpGetUserInfo();  
  4.                   
  5.                 // console.log("用户信息",userInfo)  
  6.                 uni.login({  
  7.                     provider: this.loginProvider,  
  8.                     // #ifdef MP-ALIPAY  
  9.                     scopes: 'auth_user', //支付宝小程序需设置授权类型  
  10.                     // #endif  
  11.                     success: async (res) => {  
  12.                         // console.log('login success:', res);  
  13.                         this.Toast({  
  14.                             title: '登录成功'  
  15.                         })  
  16.                           
  17.                         // #ifdef MP-WEIXIN  
  18.                         let loginRes = await this.$store.dispatch("user/login",{  
  19.                             ...userInfo,  
  20.                             code:res.code  
  21.                         })  
  22.                         console.log(loginRes)  
  23.                         // #endif  
  24.                     },  
  25.                     fail: (err) => {  
  26.                         console.log('login fail:', err);  
  27.                         // 一键登录点击其他登录方式  
  28.                         if (err.code == '30002') {  
  29.                             uni.closeAuthView();  
  30.                             this.Toast({  
  31.                                 title: '其他登录方式'  
  32.                             })  
  33.                             return;  
  34.                         }  
  35.                     },  
  36.                     complete: () => {  
  37.                         this.univerifyBtnLoading = false;  
  38.                     }  
  39.                 });  
  40.             },  
  41.             async mpGetUserInfo() {  
  42.                 return await new Promise((resolve, reject) => {  
  43.                     console.log(11)  
  44.                     // 获取用户信息  
  45.                     uni.getUserProfile({  
  46.                         desc: "仅获取您的昵称、头像等",  
  47.                         lang: "zh_CN",  
  48.                         success: (result) => {  
  49.                             // console.log("用户信息",result)  
  50.                             const userInfo = {...result.userInfo}  
  51.                             userInfo.avatar = userInfo.avatarUrl  
  52.                             delete userInfo.avatarUrl  
  53.                             // console.log(userInfo)  
  54.                             resolve(userInfo)  
  55.                         },  
  56.                         fail: (error) => {  
  57.                             console.log('getUserInfo fail', error);  
  58.                             let content = error.errMsg;  
  59.                             if (~content.indexOf('uni.login')) {  
  60.                                 content = '请在登录页面完成登录操作';  
  61.                             }  
  62.                             uni.getSetting({  
  63.                                 success: (res) => {  
  64.                                     let authStatus = res.authSetting['scope.userInfo'];  
  65.                                     if (!authStatus) {  
  66.                                         uni.showModal({  
  67.                                             title: '授权失败',  
  68.                                             content: 'Hello uni-app需要获取您的用户信息，请在设置界面打开相关权限',  
  69.                                             success: (res) => {  
  70.                                                 if (res.confirm) {  
  71.                                                     uni.openSetting()  
  72.                                                 }  
  73.                                             }  
  74.                                         })  
  75.                                     } else {  
  76.                                         // 拒绝后的回调，这个弹窗应该关掉  
  77.                                         // uni.showModal({  
  78.                                         //  title: '获取用户信息失败',  
  79.                                         //  content: '错误原因' + content,  
  80.                                         //  showCancel: false  
  81.                                         // });  
  82.                                     }  
  83.                                 }  
  84.                             })  
  85.                             reject(error.errMsg);  
  86.                         },  
  87.                         complete: () => {  
  88.                             this.btnLoading = false;  
  89.                         }  
  90.                     });  
  91.                 })  
  92.             },  
  93.             Toast(data, duration = 1000) {  
  94.                 uni.showToast(Object.assign({}, data, {  
  95.                     duration  
  96.                 }))  
  97.             },  

 

 

本文来自于：http://www.yoyo88.cn/study/uniapp/595.html

上一篇 uniapp小程序对接腾讯云直播
下一篇 点赞、收藏，放大缩小动画三端通用
相关的文章
Powered by yoyo苏ICP备15045725号