微信小程序如何获取微信昵称和头像

之前是使用open-data获取微信昵称和头像，但是更新之后，小程序不再支持使用该方法

现在需要用wx.getUserProfile这个API获取用户信息。页面产生点击事件（如 button 上 bindtap 的回调中）后才可调用，每次请求都会弹出授权窗口，用户同意后返回 userInfo。该接口用于替换 wx.getUserInfo。

官方例子：wx.getUserProfile(Object object) | 微信开放文档 (qq.com) 

获取用户信息按官方的来即可。但是在登录小程序获取一次后我们需要把用户信息存起来，不能点击一次获取一次。 

文件： 

       
                  昵称                                    登录  

wxss文件：

.button {  width: 100%;  height: 200px;}.button button {  width: 25%;  height: 100px;  margin-top: 50px;  background-color: #ffffff;}.button image {  width: 150%;  height: 100%;}.name {  width: 100%;  height: 50px;  border: 1px solid #cecccc;  display: flex;}.name_text {  width: 20%;  height: 50px;  line-height: 50px;  padding-left: 5%;}.name input {  width: 80%;  height: 50px;}.enter {  width: 100%;  display: flex;  justify-content: center;  margin-top: 100px;}

js文件： 

这是写一个默认的灰色头像

const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'Page({ data: {    image: defaultAvatarUrl  },})

我们需要点击按钮获取到用户头像，然后把图片存储到本地 wx.setStorageSync() 方法使用

const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'Page({  data: {    image: defaultAvatarUrl  },//用户头像  assd: function (e) {    console.log(e.detail.avatarUrl);    let headimg =e.detail.avatarUrl    // 存储用户头像    wx.setStorageSync('headimg', headimg)    this.setData({      image: e.detail.avatarUrl    })  },//用户名  formSubmit(e) {    let nickname=e.detail.value.input    // 存储用户名称    wx.setStorageSync('nickname', nickname)  },})

如何获取缓存数据：使用 wx.getStorageSync() 这个方法就可以获取本地数据

其他页面js：

Page({  data: {    scrollTop: true  },onShow: function () {     let img = wx.getStorageSync('headimg')          let name = wx.getStorageSync('nickname')    }})

来源地址：https://blog.csdn.net/m0_67063430/article/details/129754644