美文网首页uniApp
小程序中的微信登录在安卓App中的写法

小程序中的微信登录在安卓App中的写法

作者: 千茉紫依 | 来源:发表于2019-04-06 23:03 被阅读0次

    使用uniApp将微信小程序移植到安卓App时,需要做一些改造,才可以实现微信登录。

    微信小程序中的登录写法

    其中,微信小程序中拉取微信信息十分容易,一个简单的onGetUserInfo就可以了

    //使用微信特有的open-type按钮实现登录
     <button open-type="getUserInfo" bindgetuserinfo="onGetUserInfo" class="userinfo-avatar" :style="{ backgroundImage: url(avatarUrl) }"></button>
    
    //onGetUserInfo函数的实现
       onGetUserInfo: function(e) {
                if (!wx.cloud) {  //将登录函数部署在腾讯云上,方便用户状态管理
                    wx.showModal({
                        title: '初始化失败',
                        content: '基础库错误,无法使用云能力',
                        showCancel: false,
                        confirmColor: '#ff0000',
                        success: function(res) {
                            if (res.confirm) {
                                console.log('请使用 2.2.3 或以上的基础库以使用云能力');
                            }
                        }
                    });
                    return;
                }
                let that = this;
                if (!this.data.logged && e.detail.userInfo) { // 若未登录,则登录
                    console.log('[取得用户信息]:', e.detail);
                    this.setData({
                        logged: true,
                        avatarUrl: e.detail.userInfo.avatarUrl,
                        userInfo: e.detail.userInfo
                    });
                } else { //若已登录,则注销登录
                    this.setData({
                        logged: false,
                        avatarUrl: 'user-unlogin.png',
                        userInfo: {}
                    });
                    wx.showToast({
                        icon: 'success',
                        title: '退出登录'
                    });
                    
                    return;
                }
                //GetOpenid ,登录成功后,在腾讯云中login函数获取openid
                wx.cloud.callFunction({
                    name: 'login',
                    data: {},
                    success: res => {
                        console.log('[云函数] [login] user openId: ', res.result.openId);
                        app.globalData.openId = res.result.openId;//将登录状态保存在全局
                        
                    },
                    fail: err => {
                        console.error('[云函数] [login] 调用失败', err);
                    }
                });
            },
    
    安卓中微信登录的写法

    由于在安卓中微信登录属于第三方登录,所以首先必须要在《腾讯开放平台》中申请企业Appid和AppSecret,然后在程序编译时将OAuth模块打包进App中,这样,App便具有了获取用户微信数据的权限。

    //使用普通的按钮实现登录,此处使用条件编译,使其只在App中生效
     <!-- #ifdef APP-PLUS -->
         <view class="userinfo-avatar" :style="{ backgroundImage: 'url(' + avatarUrl + ')' }" @tap="login"></view>
    <!-- #endif -->
    
    //login的实现方法
    //这里比微信多一步,先用uni.login获取微信权限,再用uni.getUserInfo获取微信昵称、头像等信息
     login() {
                let that = this;
                //如果已登录,则执行注销操作
                if(that.logged==true){
                     that.setData({
                        logged: false,
                        avatarUrl: '../../../static/user-unlogin.png',
                        userInfo: {}
                    });
                    
                }else{
                     uni.login({ //uni.login为uniApp中内置方法
                            provider: 'weixin',
                            success: function(loginRes) {
                                //若只需openId,可再次获取,无需执行下面获取用户信息的步骤
                                // let { openId, unionid } = loginRes.authResult;
                                uni.getUserInfo({
                                    provider: 'weixin',
                                    success: function(infoRes) {
                                        // 对象在安卓环境下无法打印,必须现将其JSON化
                                        // console.log(JSON.stringify(infoRes.userInfo));
                                        that.setData({
                                            logged: true,
                                            avatarUrl: infoRes.userInfo.avatarUrl,
                                            userInfo: infoRes.userInfo
                                        });
                                        uni.setStorage({
                                            key: 'userInfo',
                                            data: infoRes.userInfo
                                        });
                                        let openId=infoRes.userInfo.openId
                                        app.globalData.openId = openId;
                                
                                        }
                                    }
                                });
                            }
                        });
                    
                }
             },
      
    

    相关文章

      网友评论

        本文标题:小程序中的微信登录在安卓App中的写法

        本文链接:https://www.haomeiwen.com/subject/txgdiqtx.html