微信小程序——【微信授权登录和退出】

微信登陆授权实现

代码部分
.wxml

open-type：主要通过button组件的open-type属性来实现
getUserInfo：获取用户的基本资料，包括昵称、头像、性别和国家/地区等。常用于登录授权场景。
chooseAvatar：让用户从手机相册选择照片或使用相机拍照
contact：打开客服会话窗口。
getPhoneNumber：获取用户手机号码。
share：分享小程序到聊天界面。
feedback：提交反馈。
chooseAddress：选择收货地址

.wxss部分请看上一篇章

.js

wx.getUserProfile 是微信小程序 API 中用于获取用户个人资料的方法，相比于旧版的 wx.login 和 wx.getUserInfo，wx.getUserProfile 提供了更安全的用户数据获取方式，增加了对 GDPR（欧盟通用数据保护条例）的支持，确保了用户的隐私安全。
wx.getUserProfile 需要用户明确授权后才能获取其个人资料,以上是用法。
参数说明：
desc：必需，字符串类型，用于描述为何需要获取用户信息，以弹窗的形式提示给用户，增加透明度。
success：成功回调函数，参数为一个对象，包含 userInfo 属性，其中包含了用户的信息。
fail：失败回调函数，参数为一个对象，包含错误信息。

---

跳转到个人信息页面

获取个人信息在页面实现昵称和头像

代码部分
.wxml

wx:if是微信小程序中的一个条件渲染指令，类似于HTML中的if语句，用于根据表达式的值来决定元素是否应该被渲染到页面上。当wx:if的值为true时，对应的元素将被渲染；反之，如果值为false，则对应的元素不会被渲染。

.wxss

.js

---

下图实现点击退出登录切换到未登录的个人信息

点击重新登录按钮跳转到下图这个页面

代码部分
.wxml

.js

客服图标动画效果和实现

.wxml

.wxss

open-type：主要通过button组件的open-type属性来实现
contact：打开客服会话窗口。

详细请看微信文档

闪烁功能实现定义一个 @keyframes规则，它将描述元素在动画过程中的不同状态。透明度为0（不可见），在其余时间透明度为1（可见），从而产生闪烁的效果需要定义一个名字。
接着，在需要闪烁的元素上应用动画。这通常涉及到设置animation属性，它包含了动画名称、持续时间、迭代次数（无限次为infinite）以及其他动画相关的属性。

animation是CSS中的一项强大特性，用于定义元素的动画效果。通过使用animation，你可以创建复杂的动画序列，而无需使用JavaScript或者其他脚本语言。动画可以包含多个关键帧，每个关键帧定义了动画的不同阶段，从而允许元素在不同状态间平滑过渡。
属性详解 ：
animation-name - 指向@keyframes规则的名称。
duration - 动画完成一个周期所需的时间。
timing-function - 描述动画的速度曲线（例如ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier()等）。
delay - 在动画开始前等待的时间。
iteration-count - 动画应该播放的次数。可以是具体的数值或infinite表示无限循环。
direction - 是否在每次迭代后反向播放动画（normal, reverse, alternate, alternate-reverse）。
fill-mode - 动画结束时元素的状态（none, forwards, backwards, both）。
play-state - 动画的播放状态（running或paused）。

绝对定位（position: absolute;）
特点：
元素的位置可以通过top、right、bottom和left属性来精确控制。
绝对定位的元素不会影响到其他元素的位置，即它不会占据原本在文档流中的空间。
绝对定位元素会根据最近的已定位祖先元素来定位，而不是根据整个页面或视口。

相对定位（position: relative;）
元素的位置相对于其正常位置进行偏移，但仍保持在文档流中。
元素偏移后仍占据原有的空间，不会影响其他元素的位置。
相对定位不会寻找已定位的祖先元素，而是基于自身的初始位置进行偏移。

opacity是一个CSS属性，用于设置元素的不透明度。它接受一个介于0和1之间的数值，其中1表示完全不透明，0表示完全透明（即元素完全不可见）。这个属性非常有用，可以用来创建各种视觉效果，比如淡入淡出动画、叠加图层时调整可见度等。

微信自定义组件

在components文件夹内创建toubu文件夹。
在toubu文件夹内创建以下四个文件：
toubu.wxml：组件的结构和布局。
toubuwxss：组件的样式。
toubu.js：组件的逻辑和交互。
toubu json：组件的配置文件，可选但推荐使用。

把需要用到的文件对应放到相应的文件即可

如果哪个页面共用的用到在json里实现即可

在.wxml中写toubu标签即可

最终效果就是需要的那个页面都有共同的页面效果
示例以下这种