微信小程序-微信授权登录流程 - (图解+代码流程)
微信小程序-微信授权登录流程 - (图解+代码流程)
微信授权登录页面
一、微信登录布局样式
open-type="getUserInfo"
这个属性用在按钮（如 <button>）上，用于指定当用户点击该按钮时，触发微信提供的获取用户信息的接口。此操作会弹出一个授权框，请求用户同意授予小程序访问其个人信息的权限。
bindtap="getinfo"
这是小程序中绑定事件处理函数的方式。当用户点击这个元素时，会调用对应的 JavaScript 文件里名为 getinfo 的函数。在这个函数中，你可以编写处理用户授权结果的逻辑，比如获取到的用户信息该如何使用或存储。
二、微信授权登录
点击微信授权登录按钮时，触发微信提供的获取用户信息的接口。此操作会弹出一个授权框，请求用户同意授予小程序访问其个人信息的权限。点击拒绝将无事发生。
微信授权登录代码实现
success: function (resinfo) {
console.log(resinfo);
wx.reLaunch({
url: '/pages/userinfo/userinfo?nickName=' + resinfo.userInfo.nickName + '&avatarUrl=' + resinfo.userInfo.avatarUrl
});
}
当用户点击授权框上的“允许”按钮，成功获取到用户信息时，会执行这里的回调函数。resinfo 参数包含了获取到的用户信息对象。
console.log(resinfo);
打印获取到的用户信息到控制台，方便开发者调试查看。
wx.reLaunch({ ... })
成功获取用户信息后，使用 wx.reLaunch 方法重启并跳转到另一个页面。这个方法会关闭所有页面，打开到应用内的某个页面。
resinfo.userInfo.avatarUrl;
指定要跳转的页面路径及传递的参数。这里将用户昵称(nickName)和头像地址(avatarUrl)作为查询字符串参数传递给了 /pages/userinfo/userinfo 页面。
fail: function () {
// 处理授权失败的情况
}
如果用户点击了授权框上的“拒绝”按钮或其他原因导致获取用户信息失败，会执行这里的回调函数。当前代码中，fail 函数内没有具体操作，可以根据需求添加处理逻辑，比如提示用户授权失败。
获取用户昵称和头像并传值给登录页面
data: {
username: '', // 用于存储用户昵称，默认为空字符串
tximg: '' // 用于存储用户头像链接，默认为空字符串
},
onLoad: function (options) {
this.setData({
username: options.nickName,
tximg: options.avatarUrl
});
}
data 属性：定义了页面的初始数据对象。这里有两个属性：
- username：用于存储用户昵称，默认为空字符串。
- tximg：用于存储用户头像链接，默认为空字符串。
onLoad 函数：这是小程序页面的一个生命周期函数，当页面加载时会被调用。它接收一个参数 options，这个对象中包含从上一页面通过 URL 传递过来的参数。
登录后显示头像和昵称
三、退出登录及重新登录
展示模态对话框：通过wx.showModal方法弹出一个对话框，标题为’退出框’，内容为’您确定要退出吗？'。对话框有两个按钮：取消和确认。
点击退出登录，退出用户信息
用户确定退出登录后，退出用户的个人账号信息，若想再次登录就点击重新登录并跳转到登录页面
客服图标动画样式
position: absolute;
是CSS中用来控制元素定位的一个属性值。当一个元素的 position 属性被设置为 absolute 时，会发生以下几点变化：
- 脱离正常文档流：元素会完全从文档流中脱离开，不再影响其他元素的位置。这意味着周围的元素会表现得如同该绝对定位元素不存在一样，不会为它留出位置。
- 相对于最近的非 static 定位祖先元素定位：绝对定位的元素会相对于最近的一个具有定位属性且非 static 的父级元素（即 relative、absolute 或 fixed 定位的祖先元素）进行定位。如果找不到这样的祖先元素，那么它就会相对于 body 或者 html （根元素）定位。
- 定位通过 top、right、bottom、left 属性控制：你可以使用这些属性精确地控制元素在父级容器中的位置。例如，
top: 20px; left: 50px;会将元素置于距离其定位上下文顶部20像素、左边50像素的位置。
opacity: 0;
用于设置元素的不透明度。当元素的 opacity 值设置为0时，意味着元素将完全透明。
@keyframes keftel {
0%, 50%, 100% {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}
keftel 会让元素在动画过程中的25%至75%时间段内逐渐变为透明（不可见），而在动画的开始（0%）、中间（50%）和结束（100%）时恢复为完全可见。这样的效果通常用于制作闪烁或呼吸灯效果，让元素在页面上有一个周期性的显隐变换。
闪烁功能实现
animation: keftel 3s linear infinite;
- animation: keftel: 指定了要使用的动画名称为
keftel，即我们之前定义的关键帧动画。 - 3s: 设置了动画的持续时间为3秒。
- linear: 这意味着动画的速度在整个动画过程中是恒定的，不会有任何加速或减速效果，速度均匀。
- infinite: 表示动画将无限次重复播放。如果没有这个关键字，动画默认只播放一次。