本文要点:
1、微信小游戏创建用户信息按钮;
2、创建的时候万能适配。
一、添加参考目标
创建用户信息按钮的时候,当然可以直接全屏,但是更多的时候是需要覆盖在某个节点(比如按钮)的位置上,全屏的当然是无脑整,所以我们看看覆盖在某节点的。
创建场景,添加参考(下图里面的蓝色方块),添加测试按钮(方便展示效果)。
二、代码部分
绑定节点
properties: {
//用户信息按钮的参考节点
img_auth: {
default: null,
type: cc.Node,
},
},
点击方法
/**
* 点击创建用户信息授权按钮
*/
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、iphone5
2、iphoneX
如有问题,请多指教。