PHP群:95885625 Hbuilder+MUI群:81989597 站长QQ:634381967
    您现在的位置: 首页 > 开发编程 > HBuilderX教程 > 正文

    uniapp app端一键微信登录和小程序端一键微信登录

    作者:admin来源:网络浏览:时间:2021-07-19 10:11:17我要评论
    导读:uniapp app端一键微信登录和小程序端一键微信登录
    uniapp app端一键微信登录和小程序端一键微信登录

    1. <view class="wx"
    2.             <view class="subtitle">微信快捷登录</view> 
    3.             <!-- #ifdef MP-WEIXIN --> 
    4.             <text class="iconfont icon-weixin" @tap="wxLogin"></text> 
    5.             <text>微信端</text> 
    6.             <!-- #endif --> 
    7.             <!-- #ifdef  H5 || APP-PLUS --> 
    8.             <text class="iconfont icon-weixin" @tap="appLogin"></text> 
    9.             <text>app端</text> 
    10.             <!-- #endif --> 
    11.         </view> 

    //小程序登录 begin登录
    // 逻辑:登录 > 拿到code > 后端通过code获取sessionKey、openid(unionid)等

    1. wxLogin(e) { 
    2.             let _this = this
    3.           uni.login({ 
    4.                     provider: 'weixin'
    5.                     success: function(res) { 
    6.                         console.log(res); 
    7.                         if (res.code) { 
    8.                             let code = res.code; 
    9.                             //将用户登录code传递到后台置换用户SessionKey、OpenId等信息 
    10.                             //...写用code置换SessionKey、OpenId的接口 
    11.                             // _this.$http.post("/api/user/login", {code:code}) 
    12.                             //     .then(res => { 
    13.                             //         let openId= res.openId; 
    14.                             //         _this.wxSubmit(openId) 
    15.                             //     }) 
    16.                             //     .catch(err => { 
    17.                             //         _this.$ant.toast('登录失败') 
    18.                             //     }); 
    19.  
    20.                         } else { 
    21.                             uni.showToast({ 
    22.                                 title: '登录失败!'
    23.                                 duration: 2000 
    24.                             }); 
    25.                             console.log('登录失败!' + res.errMsg) 
    26.                         } 
    27.                     }, 
    28.                 }); 
    29.  
    30.         } 

    // app登录逻辑  app端能直接拿到openId

    1. appLogin() { 
    2.                 var that = this
    3.                 uni.getProvider({ 
    4.                     service: 'oauth'
    5.                     success: function(res) { 
    6.                         console.log(res.provider); 
    7.                         //支持微信、qq和微博等 
    8.                         if (~res.provider.indexOf('weixin')) { 
    9.                             uni.login({ 
    10.                                 provider: 'weixin'
    11.                                 success: function(loginRes) { 
    12.                                     console.log("App微信获取用户信息成功", loginRes); 
    13.                                     // 获取用户信息 
    14.                                     uni.getUserInfo({ 
    15.                                         provider: 'weixin'
    16.                                         success: function(infoRes) { 
    17.                                             console.log('-------获取微信用户所有-----'); 
    18.                                             console.log(infoRes.userInfo.openId); 
    19.                                             console.log(JSON.stringify(infoRes.userInfo)); 
    20.                                                 // 提交信息 
    21.                                                 that.wxSubmit(infoRes.userInfo.openId) 
    22.                                                  
    23.                                         } 
    24.                                     }); 
    25.                                     // that.getApploginData(loginRes) //请求登录接口方法 
    26.                                 }, 
    27.                                 fail: function(res) { 
    28.                                     console.log("App微信获取用户信息失败", res); 
    29.                                 } 
    30.                             }) 
    31.                         } 
    32.                     } 
    33.                 }); 
    34.             }, 







     

    转载请注明(B5教程网)原文链接:https://b5.mxunkeji.com/content-146-6580-1.html
    相关热词搜索: uniapp一键登录