微信小游戏 UserInfoButton 获取用户信息

迈不过友情╰ 2022-04-15 03:50 777阅读 0赞

# 获取用户信息接口调整 #

小程序与小游戏获取用户信息接口调整，请开发者注意升级，[官宣][Link 1]。

为优化用户体验，原来使用 wx.getUserInfo 接口直接弹出授权框的开发方式将逐步不再支持。从2018年4月30日开始，小程序与小游戏的体验版、开发版调用 wx.getUserInfo 接口，将无法弹出授权询问框，默认调用失败，正式版暂不受影响。

开发者现在可以使用 UserInfoButton 按钮来获取用户信息：[https://developers.weixin.qq.com/minigame/dev/api/open-api/user-info/wx.createUserInfoButton.html][https_developers.weixin.qq.com_minigame_dev_api_open-api_user-info_wx.createUserInfoButton.html]

如上所示，以前的 wx.getUserInfo 接口获取用户信息的方式，现在逐渐开始废弃，而改用 “用户信息按钮 UserInfoButton ”的方式，顾名思义它是一个按钮，只有在用户点击它之后才会被动的获取用户信息。

# UserInfoButton 获取用户信息 #

## 一：使用步骤 ##

>      是：
> 
> 1）使用 wx.createUserInfoButton(Object object); 创建一个按钮，返回 UserInfoButton 对象，此时会在画布上显示按钮
> 
> 2）使用 onTap(function callback) 监听用户信息按钮的点击事件，当用户点击按钮后会自动触发，无论用户点击的是“拒绝”还是“允许”，都会进入回调函数。
> 
> 3）根据需求可以调用 hide() 方法隐藏用户信息按钮，调用后，用户信息按钮将不可见
> 
> 4）在调用 hide() 方法隐藏按钮之后，如果想要是它重新可见，则可以调用 show() 方法。
> 
> 5）根据需求可以调用 offTap(function callback) 方法取消监听用户信息按钮的点击事件
> 
> 6）根据需要可以调用 destroy() 方法销毁用户信息按钮

## **二：注意事项** ##

[wx.createUserInfoButton(Object object)][https_developers.weixin.qq.com_minigame_dev_api_open-api_user-info_wx.createUserInfoButton.html]  创建用户信息按钮，从基础库 2.0.1 开始支持，低版本需做兼容处理。所以在微信开发者工具中需要把 “调试基础库” 调高到 2.0.1 及以上，否则会报错：wx.createUserInfoButton is not a function.![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70][]

## 三：编码实现 ##

这里只做简单的 API 使用测试，应用中根据需求进行合理的设计，比如何时创建用户信息按钮，何时获取用户信息，何时销毁用户信息按钮，出错处理 等等。

这里直接将测试代码放在小游戏的“入口主函数 main.js"中。如下所示：

/**使用 export 命令定义了模块的对外接口以后，其他 JS 文件就可以通过 import 命令加载这个模块
     * import 命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块对外接口的名称相同。
     * 可以参考：http://es6.ruanyifeng.com/#docs/module
     * from 后面表示引用的 js 模块文件，后缀名 .js 要写上
     * */
    import {Main} from "./Main.js"
    
    new Main();
    
    
    // 1）创建用户信息按钮，此时画布上将显示此用户信息按钮
    let button = wx.createUserInfoButton({
      type: 'text',
      text: '获取用户信息',
      style: {
        left: 10,
        top: 76,
        width: 150,
        height: 40,
        lineHeight: 40,
        backgroundColor: '#ff0000',
        color: '#ffffff',
        textAlign: 'center',
        fontSize: 16,
        borderRadius: 10
      }
    });
    
    //监听用户信息按钮的点击事件,用户每点击一次，就会触发一次回答函数
    button.onTap(function (res) {
      console.log(res);//res 为 json 格式，用户点击"拒绝"或"允许"都会对应不同的数据
    });

代码效果如下，

![20181121131541632.gif][]

提示：获取用户信息微信授权，当用户点击"允许"后，之后就不会再弹窗，所以如果开发调试时，想让它再次弹窗呢，可以点击微信开发者工具中的“清缓存”按钮，然后选择“全部清除”，即可以清除缓存的数据，之后便会在再次弹框。

在微信开发者工具以及真机上都是亲测有效的，对于 [wx.createUserInfoButton(Object object)][https_developers.weixin.qq.com_minigame_dev_api_open-api_user-info_wx.createUserInfoButton.html]、[UserInfoButton][] 方法的参数，以及返回值，可以参考官网，都有详细的说明。

用户信息按钮不仅可以使用文字，也可以使用图片作为背景，只需要将 wx.createUserInfoButton(Object object) 参数中的 type 参数值改为 image，同时新加 image 参数，值指向图片即可，如下所示：

/**使用 export 命令定义了模块的对外接口以后，其他 JS 文件就可以通过 import 命令加载这个模块
     * import 命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块对外接口的名称相同。
     * 可以参考：http://es6.ruanyifeng.com/#docs/module
     * from 后面表示引用的 js 模块文件，后缀名 .js 要写上
     * */
    import {Main} from "./Main.js"
    
    new Main();
    
    
    // 1）创建用户信息按钮，此时画布上将显示此用户信息按钮
    let button = wx.createUserInfoButton({
      type: 'image',//类型改为图片
      image: 'res/login.png',//本地资源目录下的图片
      style: {
        left: 10,
        top: 10,
        width: 80,
        height: 80,
        lineHeight: 40,
        backgroundColor: '#ff0000',
        color: '#ffffff',
        textAlign: 'center',
        fontSize: 16,
        borderRadius: 10
      }
    });
    
    //监听用户信息按钮的点击事件,用户每点击一次，就会触发一次回答函数
    button.onTap(function (res) {
      console.log(res);//res 为 json 格式，用户点击"拒绝"或"允许"都会对应不同的数据
    });

真机上调试效果如下，点击左上角图标之后，就会弹窗授权，允许之后，可以看到调试信息：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 1][]

[Link 1]: https://developers.weixin.qq.com/community/develop/doc/0000a26e1aca6012e896a517556c01
[https_developers.weixin.qq.com_minigame_dev_api_open-api_user-info_wx.createUserInfoButton.html]: https://developers.weixin.qq.com/minigame/dev/api/open-api/user-info/wx.createUserInfoButton.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70]: /images/20220415/31562588234b4b1fb550868428db88fd.png
[20181121131541632.gif]: /images/20220415/f47cbc7c79134393ace5b031b98c48fb.png
[UserInfoButton]: https://developers.weixin.qq.com/minigame/dev/api/open-api/user-info/UserInfoButton.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 1]: /images/20220415/6c3eaee6293b41ceae50a987d6e96312.png