微信小游戏 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 格式,用户点击"拒绝"或"允许"都会对应不同的数据
});

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

猜你喜欢

转载自blog.csdn.net/wangmx1993328/article/details/84315381