玩转微信小程序第三天

昨日完成内容

一，完成微信授权功能

要用到的组件或API

bind:tap bind:tap是用于绑定点击事件的一种语法糖，它实际上是bindtap事件的一个简写形式,相当于js中的onclick事件

open-type是一个重要的概念，主要用于定义按钮或其他组件触发的特殊行为,可以用于出发授权，发起登陆等部分
以下是open-type的一些功能
getUserInfo用于获取用户的公开信息，包括昵称、头像、性别、地区等。在调用前需要用户授权。
contact触发客服会话，允许用户与商家或服务提供商的客服团队进行沟通。
feedback打开意见反馈窗口，让用户可以提交对小程序的反馈或建议。

wx.getUserInfo 是一个 API，用于获取用户的公开信息，包括昵称、头像、性别和国家等基本信息。要和open-type搭配使用

wx.reLaunch是一个API中用于页面跳转的一个方法，它的主要功能是关闭所有已打开的页面，并重新打开到应用内的某一个页面，可以传参。

了解更多可到微信文档

1.1第一步要先在wxml文件中定义一个点击事件，还需要调用open-type=“getUserInfo”

1.2第二步在js文件中创建一个点击事件

注意如果要传值需要使用wx.reLaunch要传输两个值中间需要用&隔开

二，如何接收到传出的参数并且退出到登录页面

要用到的组件或API

wx.showModal是API中的一个方法，用于在小程序中弹出一个模态对话框，显示消息并提供确认和取消两个按钮供用户选择。
wx.showModal有以下几种属性
title：对话框的标题，默认为“提示”。
content：对话框的内容文本。
showCancel：是否显示取消按钮，默认为true。
cancelText：取消按钮的文字，默认为“取消”。
confirmText：确认按钮的文字，默认为“确定”。
success：接口调用成功的回调函数，参数res是一个Object，其中res.confirm表示用户是否点击了确认按钮。

了解更多可到微信文档

2.1如何接收到微信授权传输的参数

需要在wxml里创建两种属性，需要用到插值语法，部分代码展示

2.2在js中需要用到文件里有的监听事件，如果没有打出Page找到正方形按回车就会出现

2.3退出账号并且实现重新登录功能

这里需要定义两个按钮用wx.if来实现退出登录和重新登录的功能
如果要跳转到tabBar导航栏里需要用到switchTab

实现效果

三，如何实现客服闪烁功能

要用到的组件、CSS样式、API

open-type=contact是微信小程序中一个特殊的按钮属性，用于触发小程序内置的客服会话功能

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

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

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

3.1实现微信客服功能和照片闪烁功能

这里需要用到一个按钮用绝对定位覆盖图片设置透明度从而实现点击跳转客服

四，微信自定义组件

4.1在components文件夹内创建toubu文件夹。

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

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

4.3如果哪一个页面需要用到在json里实现即可

4.4在wxml中写toubu标签即可

效果页面