如何使用 button 组件获取用户授权？

推荐答案

<button open-type="getUserInfo" bindgetuserinfo="onGetUserInfo">获取用户信息</button>

// www.javascriptcn.com code example
Page({
  onGetUserInfo(e) {
    if (e.detail.userInfo) {
      // 用户授权成功
      console.log('用户信息:', e.detail.userInfo);
    } else {
      // 用户拒绝授权
      console.log('用户拒绝授权');
    }
  }
});

本题详细解读

1. open-type 属性

open-type 是微信小程序中 button 组件的一个特殊属性，用于指定按钮的开放能力。getUserInfo 是其中的一种开放能力，用于获取用户信息。

2. bindgetuserinfo 事件

bindgetuserinfo 是 button 组件的一个事件，当用户点击按钮并授权后，会触发该事件。事件对象 e 中包含用户信息 e.detail.userInfo。

3. 用户授权流程

• 用户点击按钮后，微信会弹出授权对话框。
• 如果用户同意授权，e.detail.userInfo 会包含用户的昵称、头像等信息。
• 如果用户拒绝授权，e.detail.userInfo 将为 null 或 undefined。

4. 处理用户信息

在 onGetUserInfo 方法中，可以根据 e.detail.userInfo 的值来判断用户是否授权，并相应地处理用户信息或提示用户拒绝授权的情况。

5. 注意事项

• 从微信小程序基础库 2.10.4 开始，getUserInfo 接口需要用户主动触发才能调用，因此必须通过 button 组件的点击事件来获取用户信息。
• 在用户拒绝授权后，开发者应提供友好的提示或引导用户重新授权。