本篇参考B站视频小程序实战项目-食疗坊_哔哩哔哩_bilibili
目录
方法一
方法二，本例以方法二展示
1.编写contact页面
2.展示效果
3.优化
编写app.js
编写 contact页面
展示效果：
方法一
（1）wxml
<!--pages/contact/contact.wxml-->
获取用户头像和昵称 -->
<!-- <view class="userInfo">
<view class="img"><open-data class="logo" type="userAvatarUrl"></open-data></view>
<open-data type="userNickName"></open-data>
</view>
方法二：本例以方法二展示，通过全局变量globalData进行读取
1.编写contact页面
（1）wxml
<!--pages/contact/contact.wxml-->
<view class="userInfo">
<button wx:if='{{isShow}}' open-type="getUserInfo" bindgetuserinfo="getUserInfo">获取头像和昵称</button>
<view wx:else>
<view class='img'><image class="logo" src="{{userInfo.avatarUrl}}" alt=""/></view>
<view>{{userInfo.nickName}}</view>
</view>
</view>（2）js
// pages/contact/contact.js
Page({
/**
* 页面的初始数据
*/
data: {
isShow: true, // 显示按钮
userInfo: '', // 存储用户信息
},
// 1.点击按钮，授权头像和昵称
getUserInfo(e) {
console.log(e);
this.setData({
userInfo : e.detail.userInfo,
isShow : false
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})（3）wxss
/* pages/contact/contact.wxss */
page {
background: #f5f5f5;
}
.userInfo {
padding: 10px;
background: #fff;
display: flex;
align-items: center;
}
.img .logo {
width: 180rpx;
height: 180rpx;
border-radius: 50%;
overflow: hidden;
border: 1px solid #ccc8c8;
display: block;
}2.展示效果
（1）编译之后，页面展示如下，
（2）点击“获取头像和昵称”按钮，页面展示如下,
问题：每次进入都需要用户进行点击“授权用户头像和昵称”按钮。
3.优化
用户点击：获取头像和昵称
- 1.button触发按钮点击事件
- 2.定义函数，获取e.detail获取头像的昵称
- 3.刷新页面--再次进入还需要点击按钮。希望：之前授权了，直接获取头像和昵称
- （1）本地存储：获取用户头像和昵称之后，把数据存储本地。
- 缺点：数据固定了，不会更新
- （2）重新获取：推荐。在app.js全局获取，页面共享数据。
- 获取用户之前是否以及授权过信息。如果之前已经授权过信息，那么直接获取头像和昵称；否则第一进入使，跳转到获取界面，引导用户授权。
编写app.js
注意：将用户信息存储到全局变量，当前页不能用。也就是说如果我直接进入当前contact页面（不先进入首页），那么当前页contact页面拿不到用户信息。因为请求数据是异步的，如果异步全局读不到，那么就需要在app.js里通过函数返回数据。
（1）打开app.js，进行编写，
// app.js
App({
onLaunch() {
// 展示本地存储能力
const logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
// 进入小程序，获取用户之前是否授权信息
// 1.获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限。
wx.getSetting({
success:res=>{
console.log(res);
// 判断reswx.authSetting是否包含userInfo = true
if (res.authSetting['scope.userInfo']){ // 授权了
console.log("之前已经授权过用户信息，直接获取")
// 获取小程序api，获取用户信息
wx.getUserInfo({
success:result=>{
console.log('用户信息',result)
// 获取用户信息之后，存储到全局变量globalData
this.globalData.userInfo = result.userInfo
// 如果异步全局读不到，那么函数返回数据
if(this.callback){
this.callback(result.userInfo)
}
}
})
} else{
// 没有授权--跳转到授权页面
wx.showToast({
title: '之前没有授权，请授权后查看小程序',
})
// wx.switchTab({
// url: 'pages/contact/contact',
// })
}
}
})
},
globalData:{
userInfo:''
}
})
编写 contact页面
（2）首先在contact.js中添加这一行代码，之后进行编写，
// pages/contact/contact.js
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
isShow: true, // 显示按钮
userInfo: '', // 存储用户信息
},
// 1.点击按钮，授权头像和昵称
getUserInfo(e) {
console.log(e);
this.setData({
userInfo : e.detail.userInfo,
isShow : false
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
// 获取app.js全局变量globalData的用户信息,如果有数据则渲染授权信息，没有不渲染
if (app.globalData.userInfo){
console.log('全局变量授权信息存在')
this.setData({userInfo:app.globalData.userInfo,isShow:false})
}else{
// 如果异步全局读不到，那么通过给app对象定义函数，接收数据
app.callback=res=>{
console.log(res)
this.setData({userInfo:app.globalData.userInfo,isShow:false})
}
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})（3）contact.wxss和contact.wxml不变
/* pages/contact/contact.wxss */
page {
background: #f5f5f5;
}
.userInfo {
padding: 10px;
background: #fff;
display: flex;
align-items: center;
}
.img .logo {
width: 180rpx;
height: 180rpx;
border-radius: 50%;
overflow: hidden;
border: 1px solid #ccc8c8;
display: block;
}<!--pages/contact/contact.wxml-->
<!-- 用户点击：获取头像和昵称
1.button触发按钮点击事件
2.定义函数，获取e.detail获取头像的昵称
3.刷新页面--再次进入还需要点击按钮。希望：之前授权了，直接获取头像和昵称
本地存储：获取用户头像和昵称之后，把数据存储本地
缺点：数据固定了，不会更新
重新获取：推荐
-->
<view class="userInfo">
<button wx:if='{{isShow}}' open-type="getUserInfo" bindgetuserinfo="getUserInfo">获取头像和昵称</button>
<view wx:else>
<view class='img'><image class="logo" src="{{userInfo.avatarUrl}}" alt=""/></view>
<view>{{userInfo.nickName}}</view>
</view>
</view>
展示效果：
（1）进行普通编译，默认先进入首页，可以看到console调试器上打印出了“之前已经授权过用户信息，直接获取”，
（2）再进入contact页面，可以看到“全局变量授权信息存在” ，
文章来源：https://www.toymoban.com/news/detail-491096.html
（3）清空缓存之后，再次进行普通编译，会发现调试器打印的授权信息中没有“userInfo:true”，而且contact页面显示的是“获取用户头像和昵称”按钮。文章来源地址https://www.toymoban.com/news/detail-491096.html
到了这里，关于小程序获取用户头像和昵称的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
