微信小程序开发之——用户登录-获取用户信息(5)(2)

}

.userinfo-avatar {

overflow: hidden;

width: 128rpx;

height: 128rpx;

margin: 20rpx;

border-radius: 50%;

}

2.3 效果图

三 点击获取用户信息

---

3.1 布局文件(pages/user/user.wxml)

获取头像昵称

{{userInfo.nickName}}

{{userInfo.city}}

{{userInfo.gender 0?“未知”:userInfo.gender1?“男”:“女”}}

说明：

• open-type=“getUserInfo”：获取用户信息，可以从bindgetuserinfo回调中获取到用户信息（小程序插件中不能使用）

3.2 样式文件(pages/user/user.wxss)

.container{

height: 100%;

display: flex;

flex-direction: column;

align-items: center;

justify-content: space-between;

padding: 200rpx 0;

box-sizing: border-box;

}

.userinfo{

display: flex;

flex-direction: column;

align-items: center;

}

.userinfo-avatar{

width: 128rpx;

height: 128rpx;

margin: 20rpx;

border-radius: 50%;

}

.userinfo-nickname{

color:#f00;

}

3.3 逻辑文件(pages/user/user.js)

const app = getApp();

Page({

/**

• 页面的初始数据

*/

data: {

userInfo: {},

hasUserInfo: false

},

getUserInfo: function (e) {

console.log(e.detail.userInfo)

if (e.detail.userInfo) {

this.setData({

userInfo: e.detail.userInfo,

hasUserInfo: true

})

}

},

})

3.4 效果图

输出信息说明

| 取值 | 说明 |

| :-: | :-: |

| avatarUrl | 用户头像的URL地址 |

| nickName | 用户昵称 |

| gender | 用户的性别，0表示未知，1表示男，2表示女 |

| country | 用户所在的国家 |

| provice | 用户所在的省份 |

| city | 用户所在的城市 |

四 登录获取用户信息优化

---

4.1 问题

• 需要在pages/user/user.wxml中点击按钮才能获取用户信息

• 小程序启动时应用授权后，保存用户信息

• 指定页面的onLoad函数，调用app.js中保存的用户信息

4.2 app.js 授权时保存用户数据

App({

onLaunch() {

wx.getSetting({

success: res => {

if (res.authSetting[‘scope.userInfo’]) {

//执行到此处表示用户已经授权，可以直接获取到用户信息

wx.getUserInfo({

success: res => {

console.log(res.userInfo);

this.globalData.userInfo = res.userInfo

if (this.userInfoReadyCallback) {

this.userInfoReadyCallback(res)

}

}

})

}

}

})

},

globalData: {

userInfo: null,

token: null //保存token

},

})

4.3 pages/user/user.js中onLoad中获取用户授权

onLoad: function (options) {

if (app.globalData.userInfo) {

this.setData({

userInfo: e.detail.userInfo,

hasUserInfo: true

})

总结

写到这里也结束了，在文章最后放上一个小小的福利，以下为小编自己在学习过程中整理出的一个关于Flutter的学习思路及方向，从事互联网开发，最主要的是要学好技术，而学习技术是一条慢长而艰苦的道路，不能靠一时激情，也不是熬几天几夜就能学好的，必须养成平时努力学习的习惯，更加需要准确的学习方向达到有效的学习效果。
由于内容较多就只放上一个大概的大纲，需要更及详细的学习思维导图的
还有高级UI、性能优化、架构师课程、NDK、混合式开发（ReactNative+Weex）微信小程序、Flutter全方面的Android进阶实践技术资料，并且还有技术大牛一起讨论交流解决问题。

《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！
一时激情，也不是熬几天几夜就能学好的，必须养成平时努力学习的习惯，更加需要准确的学习方向达到有效的学习效果。
由于内容较多就只放上一个大概的大纲，需要更及详细的学习思维导图的
还有高级UI、性能优化、架构师课程、NDK、混合式开发（ReactNative+Weex）微信小程序、Flutter全方面的Android进阶实践技术资料，并且还有技术大牛一起讨论交流解决问题。**

[外链图片转存中…(img-b0UuErUm-1715266223286)]
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！