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

在微信小程序中，获取用户的头像和昵称通常需要用户授权。从微信小程序的版本更新来看，获取用户信息的方式有所变化，特别是从微信官方加强对用户隐私保护的角度出发，现在更多地依赖于用户主动触发授权。

以下是一个基本的步骤和示例代码，用于在微信小程序中获取用户的头像和昵称：

1. 检查用户是否已授权

首先，你需要检查用户是否已经授权了获取用户信息的权限。可以使用wx.getSetting()方法来检查用户的授权情况。

2. 引导用户授权

如果用户未授权，你需要引导用户进行授权。这通常是通过wx.authorize()方法尝试获取授权，或者在用户界面中显示一个按钮，让用户点击后跳转到授权页面。

3. 获取用户信息

如果用户已授权，你可以使用wx.getUserInfo()或wx.login() + wx.getUserProfile()（注意：wx.getUserInfo()在新版本中可能不再直接返回用户信息，而是需要用户点击按钮触发）来获取用户信息。

示例代码

这里是一个使用wx.getUserProfile()的示例，因为wx.getUserInfo()在新版本的小程序中可能不再直接返回用户信息，而是需要用户点击按钮触发。

xml
<!-- pages/index/index.wxml -->  
<button open-type="getUserProfile" bindgetuserprofile="getUserProfile">获取用户信息</button>  
<image src="{{userInfo.avatarUrl}}" mode="aspectFit"></image>  
<text>{{userInfo.nickName}}</text>

javascript
// pages/index/index.js  
Page({  
  data: {  
    userInfo: {}  
  },  
  getUserProfile: function(e) {  
    // 推荐使用 getUserProfile 获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认  
    // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗  
    if (e.detail.userInfo) {  
      // 用户按了允许授权按钮  
      this.setData({  
        userInfo: e.detail.userInfo  
      })  
    } else {  
      // 用户按了拒绝按钮  
      wx.showToast({  
        title: '用户拒绝授权',  
        icon: 'none'  
      })  
    }  
  }  
})

注意事项

• 确保你的小程序已经申请并使用了scope.userInfo权限。
• 从微信小程序的版本更新来看，wx.getUserInfo()方法的行为可能会变化，建议查阅最新的官方文档。
• 考虑到用户体验，最好在需要用户信息时才请求授权，避免在启动小程序时就请求授权。
• 遵守微信官方的隐私政策，不要滥用用户信息。

手动获取头像和昵称 

手动获取用户的头像和昵称，而不是通过微信小程序的API直接获取（因为直接获取通常需要用户授权），那么你可能需要引导用户手动输入这些信息，或者让用户从相册中选择图片作为头像。这里提供一个基于用户输入和从相册选择图片的简单案例。

用户输入昵称

这个部分相对简单，你只需要在页面上放置一个输入框（<input>或<textarea>），让用户输入昵称即可。

从相册选择头像

对于头像，你可以使用微信小程序的<button>组件，设置open-type="chooseImage"来让用户从相册中选择图片。

示例代码

WXML

<!-- pages/profile/profile.wxml -->  
<view class="container">  
  <view class="input-area">  
    <input type="text" placeholder="请输入昵称" bindinput="handleInputNickname" />  
  </view>  
  <view class="avatar-area">  
    <image src="{{avatarUrl}}" mode="aspectFit" style="width: 100px; height: 100px;"></image>  
    <button open-type="chooseImage" bindchooseimage="handleChooseAvatar">选择头像</button>  
  </view>  
</view>

WXSS

这里简单添加一些样式，以便更好地展示。

/* pages/profile/profile.wxss */  
.input-area {  
  margin-bottom: 20px;  
}  
  
.avatar-area {  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
}  
  
image {  
  margin-bottom: 10px;  
}

JS

// pages/profile/profile.js  
Page({  
  data: {  
    nickname: '',  
    avatarUrl: ''  
  },  
  handleInputNickname: function(e) {  
    // 处理昵称输入  
    this.setData({  
      nickname: e.detail.value  
    });  
  },  
  handleChooseAvatar: function(e) {  
    // 处理头像选择  
    const tempFilePaths = e.detail.tempFilePaths;  
    if (tempFilePaths.length > 0) {  
      this.setData({  
        avatarUrl: tempFilePaths[0]  
      });  
    }  
  }  
})

在这个例子中，用户需要手动输入昵称，并通过点击“选择头像”按钮从相册中选择一张图片作为头像。选择后，图片的路径会被保存在avatarUrl数据字段中，并显示在界面上。

请注意，由于这个方法是基于用户手动选择和输入的，所以不需要额外的用户授权（除了基本的相册访问权限，如果用户从相册选择图片的话）。但是，你需要确保你的小程序已经正确设置了所需的权限，以便用户能够顺利进行这些操作。