CocosCreator微信小游戏之创建用户信息按钮_createuserinfobutton

本文要点：
1、微信小游戏创建用户信息按钮；
2、创建的时候万能适配。

一、添加参考目标

创建用户信息按钮的时候，当然可以直接全屏，但是更多的时候是需要覆盖在某个节点（比如按钮）的位置上，全屏的当然是无脑整，所以我们看看覆盖在某节点的。
创建场景，添加参考（下图里面的蓝色方块），添加测试按钮（方便展示效果）。

二、代码部分

绑定节点

properties: {
    //用户信息按钮的参考节点
    img_auth: {
      default: null,
      type: cc.Node,
    },
  },
1
2
3
4
5
6
7

点击方法

  /**
   * 点击创建用户信息授权按钮
   */
  onClickCreateUserInfoButton() {
    //获取视图窗口可见区域尺寸
    let visibleSize = cc.view.getVisibleSize(); 
    //获取系统信息
    let wx_size = wx.getSystemInfoSync();
    //计算实际大小和可见区域尺寸的比例（这里以宽度为准）
    let size_scale_width = wx_size.screenWidth / visibleSize.width;
    //计算创建用户信息按钮需要的属性（img_auth为蓝色参考节点）
    let x = (this.img_auth.x + visibleSize.width / 2 - this.img_auth.width / 2) * size_scale_width;
    let y = (Math.abs(this.img_auth.y) + visibleSize.height / 2 - this.img_auth.height / 2) * size_scale_width;
    let width = this.img_auth.width * size_scale_width;
    let height = this.img_auth.height * size_scale_width;

    this.authorButton = wx.createUserInfoButton({
      type: "text",
      text: "授权按钮",
      style: {
        left: x,
        top: y,
        width: width,
        height: height,
        lineHeight: height,
        backgroundColor: "#ffffff",
        color: "#3296fa",
        textAlign: "center",
        fontSize: 16,
        borderRadius: 0,
      },
    });
    this.authorButton.onTap((res) => {
      if (res.errMsg == "getUserInfo:ok") {
        wx.showToast({
          icon: "none",
          title: "获取用户信息成功",
          duration: 2000,
        });
        this.authorButton.hide(); //获取用户信息成功后隐藏按钮
      } else {
        if (res.errMsg === "getUserInfo:fail auth deny") {
          wx.showToast({
            icon: "none",
            title: "获取用户信息失败",
            duration: 2000,
          });
        } else {
          wx.showToast({
            icon: "none",
            title: res.errMsg,
            duration: 2000,
          });
        }
      }
    });
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

三、运行效果

1、iphone5

2、iphoneX

温馨提示：一定要注意坐标转化，尽量获取相对于根节点的坐标。
如有问题，请多指教。