微信登陆授权实现
代码部分
.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标签即可
最终效果就是需要的那个页面都有共同的页面效果
示例以下这种