方法一

（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 = trueif (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页面，可以看到“全局变量授权信息存在” ，

（3）清空缓存之后，再次进行普通编译，会发现调试器打印的授权信息中没有“userInfo:true”，而且contact页面显示的是“获取用户头像和昵称”按钮。

小程序获取用户头像和昵称相关推荐

微信小程序—获取用户头像、昵称
博客概要针对使用微信小程序时获取用户头像.昵称的三种方法,做一个简单分享~ 文章目录博客概要 1.wx.getUserInfo接口 2.button触发 3.open-data标签总结 1.wx ...
微信小程序获取用户头像和昵称(填写头像昵称能力)
开放能力调整公告总体来说就是通过按钮来授权获取用户基础信息的能力都没啦(wx.getUserProfile,wx.getUserInfo都不行了),都要使用新版本的 [头像昵称填写能力]啦. 小程序 ...
微信小程序获取用户头像和昵称(头像昵称填写能力)
开放能力调整公告总体来说就是通过按钮来授权获取用户基础信息的能力都没啦(wx.getUserProfile,wx.getUserInfo都不行了),都要使用新版本的 [头像昵称填写能力]啦. 小程序 ...
[小程序] 获取用户头像以及昵称
头像选择需要将 button 组件 open-type 的值设置为 chooseAvatar,当用户选择需要使用的头像之后,可以通过 bindchooseavatar 事件回调获取到头像信息的临时路 ...
微信小程序获取用户头像和昵称
由于微信回收了open-data,头像返回了默认头像,昵称返回了微信用户,大家都骂骂咧咧的把getUserInfo改成了getUserProfile,getUserProfile这个api需要tap才 ...
微信小程序获取个人头像和昵称，和地图选点功能
微信小程序获取个人头像和昵称,有技巧 1.可以直接获取 2.通过用户点击获取过程中,有什么问题,可以加我微信号yizheng369探讨先分析这里面隐含了很多默认的规则,大家要注意: 1.可以直接 ...
微信小程序获取用户头像昵称
微信小程序获取头像昵称问题解决文章目录微信小程序获取头像昵称问题解决前言和传统方法问题描述解决方案实现效果前言和传统方法微信小程序是一种基于微信开发平台的轻应用,用户可以通过微信扫码. ...
微信小程序获取用户头像昵称组件封装（最新版）
一.前言微信小程序将在2022年11月08日对获取用户头像昵称信息的API再一次进行改动,这次的改动比较大. 更多详情查看公告:公告直达链接我的项目比较多,而且大部分都是只需要获取用户的头像以及昵 ...
php实现微信小程序获取用户openid，昵称和头像方法
最近做微信小程序,要做一个排行榜的功能,摸索了一天,终于找到获取用户openid,昵称和头像方法. 先上wxml: <button bindtap="getInfo"> ...

小程序获取用户头像和昵称

方法一