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

获取用户信息接口调整

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

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

     开发者现在可以使用 UserInfoButton 按钮来获取用户信息：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)  创建用户信息按钮，从基础库 2.0.1 开始支持，低版本需做兼容处理。所以在微信开发者工具中需要把 “调试基础库” 调高到 2.0.1 及以上，否则会报错：wx.createUserInfoButton is not a function.

三：编码实现

     这里只做简单的 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 格式，用户点击"拒绝"或"允许"都会对应不同的数据
});

代码效果如下，

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

     在微信开发者工具以及真机上都是亲测有效的，对于 wx.createUserInfoButton(Object object)、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 格式，用户点击"拒绝"或"允许"都会对应不同的数据
});

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