微信小程序获取微信昵称 type=“nickname“ 点击后，获取不到最新值，第一次的值得不到

### 微信小程序中通过用户手动点击获取昵称的实现方式 在微信小程序开发过程中，为了遵循用户隐私保护原则并满足最新版微信小程序的要求，获取用户昵称的操作需要依赖于用户的主动触发授权行为。以下是具体的实现细节： #### 1. 使用 `wx.getUserProfile` API 实现用户授权 从最新的微信小程序版本来看，推荐使用 `wx.getUserProfile` 方法来获取用户信息[^3]。此方法会在用户点击按钮或其他交互事件时弹出授权窗口，只有当用户明确同意后才会返回其头像、昵称等相关信息。 代码示例如下： ```javascript Page({ data: { userInfo: null, hasUserInfo: false }, getUserProfile(e) { wx.getUserProfile({ desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写 success: (res) => { console.log(res.userInfo); // 输出用户信息到控制台 this.setData({ userInfo: res.userInfo, // 将用户信息存储到页面数据中 hasUserInfo: true }); }, fail: () => { wx.showToast({ title: '授权失败', icon: 'none' }); } }); wx.showToast({ icon: "loading", title: '正在登录...' }); } }); ``` 上述代码片段展示了如何通过 `wx.getUserProfile` 接口获取用户昵称和其他基本信息，并将其绑定至页面中的某个按钮上。 #### 2. 页面 WXML 配置 为了让用户能够手动点击以触发授权操作，在页面布局文件（WXML）中需配置相应的按钮组件，并指定该按钮绑定了哪个处理函数。例如： ```xml <view> <!-- 如果尚未获取用户信息，则显示“获取头像和昵称”的按钮 --> <button bindtap="getUserProfile" hidden="{{hasUserInfo}}">获取头像和昵称</button> <!-- 显示已获取的用户信息 --> <block wx:if="{{userInfo}}"> <image src="{{userInfo.avatarUrl}}" mode="aspectFit"></image> <!-- 头像 --> <text>{{userInfo.nickName}}</text> <!-- 昵称 --> </block> </view> ``` 此处的关键在于设置 `hidden="{{hasUserInfo}}"` 属性以及确保按钮点击事件被正确映射到了 JavaScript 文件内的 `getUserProfile` 函数[^4]。 #### 3. 注意事项 - **权限声明**：务必清晰描述请求用户信息的目的（即参数 `desc` 的值），以便提升用户体验并增加他们接受的概率。 - **错误处理**：考虑到部分场景可能因网络状况或者个人偏好而导致授权失败的情况发生，因此建议加入适当的反馈机制通知用户当前状态。 - **兼容性考虑**：尽管目前提倡采用 `wx.getUserProfile` 替代旧有的 `wx.getUserInfo` 方式，但在实际项目迁移期间仍需要注意两者之间的差异性和潜在影响[^2]。 --- ###