小程序用户名和头像获取完整代码

在小程序的开发中，获取用户的用户名和头像信息是一项常见且重要的功能。这不仅能增强用户体验，还能为个性化服务提供数据支持。以下将为您详细介绍获取小程序用户名和头像的完整代码实现。

我们需要在小程序的配置文件 app.json 中声明获取用户信息的相关权限。

{
  "permission": {
    "scope.userInfo": {
      "desc": "用于获取用户的基本信息"
    }
  }
}

在页面的 js 文件中，通过调用微信提供的接口来获取用户信息。

// 引入微信的相关 API
const wx = require('weixin-js-sdk');

Page({
  onLoad: function () {
    // 调用获取用户信息的接口
    wx.getUserInfo({
      success: (res) => {
        const userInfo = res.userInfo;
        this.setData({
          username: userInfo.nickName,
          avatarUrl: userInfo.avatarUrl
        });
      },
      fail: (err) => {
        console.error('获取用户信息失败', err);
      }
    });
  }
})

上述代码中，通过 wx.getUserInfo 方法获取用户信息。成功获取后，将用户名（nickName）和头像地址（avatarUrl）设置到页面的数据中，以便在页面进行展示和使用。

需要注意的是，获取用户信息需要用户的授权。在用户首次进入小程序时，会弹出授权窗口，只有用户同意授权，才能成功获取到相关信息。

另外，为了确保代码的稳定性和兼容性，还需要对获取用户信息的结果进行适当的错误处理。比如网络异常、用户拒绝授权等情况。

通过以上完整的代码实现，就能够在小程序中顺利获取到用户的用户名和头像信息，为后续的功能开发和用户服务提供有力的支持。

希望上述代码和讲解对您在小程序开发中获取用户信息有所帮助，让您能够更加轻松地打造出功能丰富、用户体验良好的小程序。