几天没有更新，最近参加了前端学习的夏令营，收获了很多东西。
学习周期
7月26~8月4日

学习内容
1. 统一讲授基础的技术（前端 + 后端）
2. 暂定时间 7月30日结束基础技术讲解
3. 7月31日开始进入到团队项目

整个B站项目 - 基于B站小程序视频播放平台
1. 前端架构 - 小程序技术支撑
1）完成界面开发
2）完成数据渲染
3）动态效果设计

2. 后端架构 - Java技术支撑1）提供前端小程序所需要的数据接口2）提供一个管理数据的平台a：统计数据 - 今天又多少人访问我们小程序b：新增视频 - 难道请数据库管理员（DBA）进行数据添加？？？

今日头条 - 聚会类型平台 - 用户群体面向（个人；媒体）
1. 自媒体 - 新闻；抖音；视频
2. 类似知了堂视频平台管理端

思考：
1. 尽量满足用户需求 - 开发人员职责
2. 后端同学需不需开发一个后端数据管理中心？？？

项目去学习技术
1. 需求分析 - 功能（团队）
1）前端
a：主页 - 提供怎样的功能（需要多少数据 - 参数）
b：分类 - 提供怎样的功能（需要多少数据 - 参数）
c：个人 - 提供怎样的功能（需要多少数据 - 参数）
d：视频 - 播放页面（需要多少数据 - 参数）
结论：找后端开发人员给我数据

	2）后端a：数据库怎么设计b：视频主页 - 提供怎样的功能c：发表视频 - 提供怎样的功能d：内容管理 - 提供怎样的功能e：评论管理 - 提供怎样的功能f：视频数据 - 提供怎样的功能产出内容：需求分析 - 思维导图2. 原型图设计 - axure 工具3. 开发文档设计 - 前端和后端开发规范1）设计接口文档2）如下非常重要内容a：接口地址 - 网络地址 - 访问地址，则可以获取服务器上数据b：接口功能c：请求参数d：请求方式e：返回数据类型f：返回数据结果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CCNw73uD-1595950549581)(day0.assets/image-20200726140338845.png)]

具体的接口文档格式，请参考上课word文档

任务 - 团队合作任务

梳理项目需求，提交文件格式思维导入

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QIqLVrQt-1595950549587)(day0.assets/image-20200726150800623.png)]

完成原型图设计，提交线框图的原型
1. 前端界面 - 线框图
2. 后端界面 - 线框图
完成接口开发文档，提交word文档

工具

axure - 原型图
typora - markdown工具
xmind - 思维导图

1.1 课程介绍

项目：基于B站小程序视频播放平台
整个课程主要分为四个部分
1. Java后端技术基础知识讲解
2. 前端技术基础知识讲解
3. 基于项目功能模块技术讲解
4. 最终以团队形式完成此项目
项目技术栈 + 项目工程化能力管理
1. 前端技术基础：HTML+CSS+JavaScript+Ajax
2. Java Web开发技术基础：Servlet + Tomcat + JSP + JavaBean + JDBC
3. 前端框架：微信小程序
4. 后端框架：DButils + 数据库连接池
5. 数据库：MySQL
6. 项目构建工具：Maven
7. 项目源代码管理：SVN + 协同开发平台

1.2 课程收获

1.2.1 理论知识 - 收获

微信小程序组件化开发
掌握后台数据交互逻辑和数据绑定，了解前后端的概念
全面了解前端开发的知识体系与学习路线及方法
全面了解后端开发的知识体系与学习路线及方法

1.2.2 应用能力 - 收获

微信小程序组件化开发
微信小程序数据绑定
JS程序业务逻辑代码实现
数据请求异步封装
Ajax数据响应
原生Web请求与响应的原理与流程
Maven项目构建技术应用
扩展：SpringBoot搭建主流后台框架引擎（依据同学能力和时间）

1.2.3 工程化能力 - 收获

项目开发思维提升，找到如何解决一个技术问题方法
学习能力提高，主动学习和查阅技术开发文档
怎么有效去组织团队开发和团队之间的合作
掌握项目业务流程分析和逻辑实现

1.3 项目功能截图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g4da4zsd-1595950602505)(day1.assets/image-20200723141241139.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WEvvZzY8-1595950602507)(day1.assets/image-20200723141337217.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RWTpjLU5-1595950602509)(day1.assets/image-20200723141437942.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-64RM2Ie4-1595950602511)(day1.assets/image-20200723141530324.png)]

2.前端基础

2.1 HTML

前端展示型标签：

DIV：布局型标签（前端，后端）
A：超链接标签
UL：列表标签
IMG：图片标签
SPAN：语义标签（修饰性）

后端数据控制中心标签：

form：表单标签
1. input：text; password; file; submit; reset; radio, checkbox, hidden
2. textarea：文本域
3. select：下拉框
table：表格标签
1. th
2. td
3. tr
4. thead
5. tbody

2.2 CSS

CSS概念：层叠样式表，用于美化我们网页标签外观样式。比如：图片圆角；阴影效果；动画效果

CSS版本：CSS2 ；CSS3

2.2.1 CSS编码规范

外部样式

/* 独立新建样式文件，后缀名.css */
body {...}
img {...}
ul {...}

<!-- 1.html，则我们可以通过link标签引入外部css样式 -->
<html><head><link href='1.css' type='text/css' rel='stylesheet'></head>
</html>

内部样式：在网页html文件里面去编写CSS样式代码。需要在

<html><head><style>body {...}img {...}ul {...}</style></head>
</html>

内嵌样式：在网页标签上面写CSS样式代码

<html><head></head><body><img style='width:100px; height: 100px'></body>
</html>

注意：

1.样式有一个优先级，内嵌样式 > 内部样式 > 外部样式

2.样式代码需要用分号 ; 结束

2.2.2 CSS语法

选择器：给标签指定样式（不是所有标签都需要进行样式美化）

选择器分类：

ID选择器
类选择器
标签选择器
群组选择器
层次选择器

第1钟：id选择器，根据标签属性id值来进行样式定义
<div id="d1"></div>
#d1 {样式代码
}第2钟：class选择器，根据标签属性class值来进行样式定义
<div class='d2'></div>
.d2 {样式代码
}第3钟：标签选择器，根据标签的名字来进行样式定义
<div></div>
div {样式代码
}第4钟：群组选择器，可以一次性为多个不同的标签统一的去定义相同样式
<div></div>
<button></button>
<div class='d3'></div>
div, button, .d3 {样式代码
}第5钟：层次选择器，如果我想去定义div里面button标签的样式
<div class='d4'><button></button><button></button><button></button>
</div>
.d4 > button { // 使用大于号，则定义直接子元素样式样式代码
}.d4 button {  // 空格，则定义子元素，或 子元素的子元素样式（儿子，孙子，孙子的孙子）样式代码
}

<!DOCTYPE html>
<html>
<head><title></title><style type="text/css">#d1 {width: 300px;height: 100px;background-color: red;}.d2 {width: 400px;height: 100px;background-color: black;}div {width: 500px;height: 100px;background-color: blue;}.d3 {width: 600px;height: 100px;background-color: yellow;}/* 层次选择器 */.d3 > button {width: 50px;}/* 群组选择器 */.d4, p {width: 700px;height: 100px;background-color: gray;}</style>
</head>
<body>
<div id="d1"></div>
<div class="d2"></div>
<div></div>
<div class="d3"><button>按钮1</button><button>按钮2</button><button>按钮3</button>
</div>
<div class="d4">我是一个div</div>
<p>我是一个p标签</p>
</body>
</html>

2.2.3 样式用法

根据样式功能（作用）进行分类
1. 文本样式
2. 背景样式
3. 盒模型样式
4. 布局样式
5. 新增CSS3样式
文本样式
1. color：颜色
2. font-size：大小
3. font-weight：粗度
4. line-height：行高
5. text-align：文字水平居中
背景样式
1. background，背景样式简写，包含：颜色；图片；定位；大小；平铺；渐变色
2. background-color，颜色
3. background-image，图片
4. background-size，大小
5. background-position，定位
6. background-repeat，平铺
盒模型样式
1. width，宽度
2. height，高度
3. margin，外边距
4. padding，内边距
5. border，边框
6. border-radius，圆角
7. box-shadow，边框阴影
布局样式
1. position，相对定位（relative），固定定位（fixed），绝对定位（absolute），默认（static）
2. left，相对要定位元素左侧距离
3. right，相对要定位元素右侧距离
4. top，相对要定位元素顶部距离
5. bottom，相对要定位元素底部距离
6. float，浮动，让元素脱离文档流（重要；恐怖）
7. display，设置为flex，弹性布局
8. flex-wrap，设置换行
9. flex-direction，设置弹性布局方向
10. justify-content，主轴方向的布局设置（对齐方式设置）
11. align-item，纵轴方向的布局设置（对齐方式设置）
新增CSS3样式
1. transform，缩放（scale），移动（translate），旋转（rotate）
2. transition，过渡 - 当一个样式变化为另一个样式所需要耗费时间（自带动画效果）
3. @keyframes，自定义动画
4. animation，执行动画（名称，时间，速度，次数，逆向）

<!DOCTYPE html>
<html>
<head><title></title><style type="text/css">div {/* 文本样式 */color: red; /* 颜色 */font-size: 20px;font-weight: bold;line-height: 50px; /* 当行高 = 盒子高度 垂直居中效果 */text-align: center;/*盒模型*/width: 200px;height: 50px;border: 1px solid black;margin: 0 auto;  /* margin 设置 上右下左 外边距距离 */padding: 0 10px; /* 文字内容 与 div的边框左右距离 10px */border-radius: 5px; /* 设置 div的四个角 */box-shadow: 10px 10px 10px gray; /* 边框阴影设置 (x,y,blur,color) */}</style>
</head>
<body>
<div>HelloWorld</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head><title></title><style type="text/css">.d1 {width: 100%;height: 300px;margin: 0 auto;background: rgb(74,36,121);}.d2 {width: 800px;height: 300px;margin: 0 auto;background-image: url(img/109951165132818526.jpg);background-size: cover;}</style>
</head>
<body>
<div class="d1"><div class="d2"></div>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head><title></title><style type="text/css">.d1 {width: 500px;height: 300px;background-color: gray;margin: 0 auto;position: relative; /* 加入了一个相对定位，则它里面的子元素就可以针对它定位了 */}.d2 {width: 200px;height: 100px;background-color: black;/* 如果是绝对定位, 针对父元素进行定位, 绝对定位往往有一个坑（它的父元素设置定位没有） *//* 如果父元素没有设置定位，则相对浏览器定位 */position: absolute;left: 10px;top: 30px;}</style>
</head>
<body>
<!-- d2是d1子元素，了解绝对定位，针对父元素进行定位 -->
<div class="d1"><div class="d2"></div>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head><title></title><style type="text/css">.d2 {width: 200px;height: 30px;color: white;line-height: 30px;background-color: black;position: fixed; /* 固定定位, 针对浏览器的定位 */right: 0;top: 100px;}</style>
</head>
<body>
<div class="d1"># 2.系统架构演变随着互联网的发展，网站应用的规模不断扩大。需求的激增，带来的是技术上的压力。系统架构也因此不断的演进、升级、迭代。从单一应用，到垂直拆分，到分布式服务，到SOA，以及现在火热的微服务架构，还有在Google带领下来势汹涌的Service Mesh。我们到底是该乘坐微服务的船只驶向远方，还是偏安一隅得过且过？其实生活不止眼前的苟且，还有诗和远方。所以我们今天就回顾历史，看一看系统架构演变的历程；把握现在，学习现在最火的技术架构；展望未来，争取成为一名优秀的Java工程师。## 2.1.集中式架构当网站流量很小时，只需一个应用，将所有功能都部署在一起，以减少部署节点和成本。此时，用于简化增删改查工作量的数据访问框架(ORM)是影响项目开发的关键。![1525529091749](day1.assets/1525529091749.png)存在的问题：- 代码耦合，开发维护困难
- 无法针对不同模块进行针对性优化
- 无法水平扩展
- 单点容错率低，并发能力差## 2.2.垂直拆分当访问量逐渐增大，单一应用无法满足需求，此时为了应对更高的并发和业务需求，我们根据业务功能对系统进行拆分：![1525529671801](day1.assets/1525529671801.png)优点：- 系统拆分实现了流量分担，解决了并发问题
- 可以针对不同模块进行优化
- 方便水平扩展，负载均衡，容错率提高缺点：- 系统间相互独立，会有很多重复开发工作，影响开发效率## 2.3.分布式服务当垂直应用越来越多，应用之间交互不可避免，将核心业务抽取出来，作为独立的服务，逐渐形成稳定的服务中心，使前端应用能更快速的响应多变的市场需求。此时，用于提高业务复用及整合的分布式调用是关键。![1525530657919](day1.assets/1525530657919.png)优点：- 将基础服务进行了抽取，系统间相互调用，提高了代码复用和开发效率缺点：- 系统间耦合度变高，调用关系错综复杂，难以维护## 2.4.流动计算架构（SOA）SOA ：面向服务的架构当服务越来越多，容量的评估，小服务资源的浪费等问题逐渐显现，此时需增加一个调度中心基于访问压力实时管理集群容量，提高集群利用率。此时，用于提高机器利用率的资源调度和治理中心(SOA)是关键![1525530804753](day1.assets/1525530804753.png)以前出现了什么问题？- 服务越来越多，需要管理每个服务的地址
- 调用关系错综复杂，难以理清依赖关系
- 服务过多，服务状态难以管理，无法根据服务情况动态管理服务治理要做什么？- 服务注册中心，实现服务自动注册和发现，无需人为记录服务地址
- 服务自动订阅，服务列表自动推送，服务调用透明化，无需关心依赖关系
- 动态监控服务状态监控报告，人为控制服务状态缺点：- 服务间会有依赖关系，一旦某个环节出错会影响较大
- 服务关系复杂，运维、测试部署困难，不符合DevOps思想## 2.5.微服务前面说的SOA，英文翻译过来是面向服务。微服务，似乎也是服务，都是对系统进行拆分。因此两者非常容易混淆，但其实却有一些差别：微服务的特点：- 单一职责：微服务中每一个服务都对应唯一的业务能力，做到单一职责
- 微：微服务的服务拆分粒度很小，例如一个用户管理就可以作为一个服务。每个服务虽小，但“五脏俱全”。
- 面向服务：面向服务是说每个服务都要对外暴露Rest风格服务接口API。并不关心服务的技术实现，做到与平台和语言无关，也不限定用什么技术实现，只要提供Rest的接口即可。
- 自治：自治是说服务间互相独立，互不干扰- 团队独立：每个服务都是一个独立的开发团队，人数不能过多。- 技术独立：因为是面向服务，提供Rest接口，使用什么技术没有别人干涉- 前后端分离：采用前后端分离开发，提供统一Rest接口，后端不用再为PC、移动段开发不同接口- 数据库分离：每个服务都使用自己的数据源- 部署独立，服务间虽然有调用，但要做到服务重启不影响其它服务。有利于持续集成和持续交付。每个服务都是独立的组件，可复用，可替换，降低耦合，易维护微服务结构图：![1526860071166](day1.assets/1526860071166.png)# 3.后端技术能力要求同学们一定要注意，目前企业的后端技术开发趋势，务必是前后端技术整合对于目前应届生同学需要学习技术内容如下，这个也是企业的要求## 3.1 前端技术前端技术：- 基础的HTML、CSS、JavaScript（基于ES6标准）
- Vue.js 2.0以及基于Vue的UI框架：Vuetify
- 前端构建工具：WebPack
- 前端安装包工具：NPM
- Vue脚手架：Vue-cli
- Vue路由：vue-router
- ajax框架：axios
- 基于Vue的富文本框架：quill-editor## 3.2 后端技术后端技术：- 基础的SpringMVC、Spring 5.0和MyBatis3
- Spring Boot 2.0.1版本
- Spring Cloud 最新版 Finchley.RC1
- Redis-4.0
- RabbitMQ-3.4
- Elasticsearch-5.6.8
- nginx-1.10.2
- FastDFS - 5.0.8
- MyCat
- Thymeleaf
- JWT## 3.3 技术解读上面的技术组合可以在项目中解决以下的典型问题：- 利用Node.js及Vue.js技术栈，实现前后端分离开发- 利用SpringCloud技术栈，实现真正的微服务实战开发，并且是基于SpringBoot2.0和SpringCloud最新版本Finchley.RC1实现，业内领先。- 基于FastDFS解决大数据量的分布式文件存储问题- 基于Elasticsearch高级聚合功能，实现商品的智能过滤搜索- 基于Elasticsearch高级聚合功能，实现销售业务的复杂统计及报表输出- 基于LocalStorage实现离线客户端购物车，减轻服务端压力。- 基于JWT技术及RSA非对称加密实现真正无状态的单点登录。- 结合JWT和RSA非对称加密，自定义Feign过滤器实现自动化服务间鉴权，解决服务对外暴露的安全问题- 基于RabbitMQ实现可靠消息服务，解决服务间通信问题- 基于RabbitMQ实现可靠消息服务，解决分布式事务问题- 使用微信SDK实现微信扫码支付，符合主流付款方式- 基于Redis搭建高可用集群，实现可靠缓存服务即热点数据保存。持久化，集群，哨兵，主从，缓存击穿- 基于Redis和Mq来应对高可用高并发的秒杀场景- 基于MyCat实现数据库的读写分离和分库分表- 基于Thymeleaf实现页面模板和静态化，提高页面响应速度和并发能力- 基于Nginx实现初步的请求负载均衡和请求限流
</div><div class="d2">对话框: 正在讲话 刘阳
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head><title></title><style type="text/css">.d1 {/* 如果没有设置定位，则div是在浏览器的左上角 */width: 200px;height: 50px;background-color: black; transition: 5s all; /* 动态的特效 */}.d1:hover {/* 相对原来的位置移动 10px;50px; */position: relative;top: 200px;left: 100px;}</style>
</head>
<body>
<div class="d1"></div>
</body>
</html>

2.3 弹性布局

目的：

有效帮助我们去定位每个元素在网页中一个位置，主要对齐的方式
原理 - 主要是通过父级标签控制子级标签布局。原因：因为布局从上到下，从左到右，先大后小

学习弹性布局，最关键的因素，同学必须了解什么是块级元素标签

何谓块级元素：不管元素宽度多大；多小。这个元素是独自占据浏览器的一行
div是块级元素；p标签是块级元素

弹性布局样式

.d1 {display: flex; /* 表示当前div是一个弹性布局 */jusitfy-content: space-around; /* 控制元素在X轴一个对齐方式（主轴） */
}

<!DOCTYPE html>
<html>
<head><title></title><style type="text/css">/* 弹性布局用于在父级标签上, 作用控制子级标签的布局 */.d1 {width: 90%;height: 80px;background-color: green;margin: 0 auto;display: flex;justify-content: center;}/* 层次选择器，设置d1下面的所有div的样式 */.d1 > div {width: 180px;height: 80px;background-color: blue;margin: 0 3px;}</style>
</head>
<body>
<div class="d1"><div></div><div></div><div></div><div></div><div></div>
</div>
<div class="d1"></div>
</body>
</html>

2.4 西瓜视频

完成西瓜视频首页实战 - 弹性布局练习

难点：

布局，出现一个元素的宽度或者高度的计算
calc() 函数用于动态计算长度值来解决元素宽度或高度计算
网页整体全屏模式，局部区域有滚动条。overflow-y: auto

整体布局代码

<!DOCTYPE html>
<html>
<head><title></title><meta charset="utf-8"><style type="text/css">* {margin: 0;padding: 0;}html,body {width: 100%; /* 相当于能够针对不同浏览器能够全屏显示 */height: 100%; /* 相当于整个网页是整屏显示，局部滚动 */overflow: hidden; /* 局部内容的高度肯定会大于整个浏览器的高度，那么超出部分要隐藏 */}.xg-nav {width: 100%;height: 73px;background-color: #000;}.xg-body {width: 100%;height: calc(100vh - 73px); /* 自动计算出下方div的高度，针对不同浏览器分辨率算出div高度 */background-color: blue;display: flex;}.xg-menu {width: 200px;height: 100%;background-color: yellow;}.xg-ctn {width: calc(100vw - 200px);height: 100%;background-color: red;}</style>
</head>
<body>
<div class="xg-nav"></div>
<div class="xg-body"><div class="xg-menu"></div><div class="xg-ctn"></div>
</div>
</body>
</html>

局部带滚动条的代码

<!DOCTYPE html>
<html>
<head><title></title><meta charset="utf-8"><style type="text/css">* {margin: 0;padding: 0;}html,body {width: 100%; /* 相当于能够针对不同浏览器能够全屏显示 */height: 100%; /* 相当于整个网页是整屏显示，局部滚动 */overflow: hidden; /* 局部内容的高度肯定会大于整个浏览器的高度，那么超出部分要隐藏 */}.xg-nav {width: 100%;height: 73px;background-color: #000;}.xg-body {width: 100%;height: calc(100vh - 73px); /* 自动计算出下方div的高度，针对不同浏览器分辨率算出div高度 */background-color: blue;display: flex;}.xg-menu {width: 200px;height: 100%;background-color: yellow;}.xg-ctn {width: calc(100vw - 200px);height: 100%;background-color: rgb(247,247,247);display: flex;justify-content: space-around;flex-wrap: wrap; /* 自动换行 当屏幕的宽度不够，则自动换行*/overflow-y: auto;}/* 内容区的样式 */.xg-item {width: 270px;height: 212px;background-color: hotpink; /* #代表颜色取值是一个十六进制数 0~F */margin-top: 30px;border-radius: 5px;display: flex; /* 调整弹性布局的方向，默认方向是水平方向 */flex-direction: column; /* 调整弹性布局为垂直方向 */justify-content: space-between; /* 上下对齐，均匀分布 */}/* 内容区的样式中图片 */.xg-item > img {width: 100%;height: 145px;border-radius: 5px;}</style>
</head>
<body>
<div class="xg-nav"></div>
<div class="xg-body"><div class="xg-menu"></div><div class="xg-ctn"><div class="xg-item"><img src="img/1.jpg"><p>龙珠Z: 复活的菲利沙</p><p>龙珠之宇宙最强对决</p></div><div class="xg-item"><img src="img/2.jpg"><p>吹哨人</p><p>雷佳音汤唯陷两难抉择</p></div><div class="xg-item"></div><div class="xg-item"></div><div class="xg-item"></div><div class="xg-item"></div><div class="xg-item"></div><div class="xg-item"></div><div class="xg-item"></div><div class="xg-item"></div><div class="xg-item"></div><div class="xg-item"></div></div>
</div>
</body>
</html>

2.5 动画样式

transform属性设置基础动画：缩放；移动；旋转
transition属性设置动画过渡特效：从一个样式转换另一个样式的过渡特效
自定义动画@keyframes；animation

同学需要了解一个伪类:hover，当鼠标移动到元素上时候会触发一个动作（鼠标悬停效果）

<!DOCTYPE html>
<html>
<head><title></title><style type="text/css">.d-scale, .d-translate, .d-rotate {width: 300px;height: 100px;margin: 0 auto;margin-top: 100px;background-color: blue;transition: 2s all; /* 时间 规定设置过渡效果的 CSS 属性的名称 */}/* 伪类:hover设置变大的效果; */.d-scale:hover {transform: scale(1.2);}/* 单独在修改d-translate局部样式 */.d-translate {margin-top: 15px;background-color: green;}/* 伪类:hover鼠标悬停事件 */.d-translate:hover {transform: translateX(-50px); /* 水平X轴反方向移动 */}/* 局部修改部分样式 */.d-rotate {margin-top: 50px;background-color: red;}.d-rotate:hover {transform: rotate(-30deg);}</style>
</head>
<body>
<div class="d-scale"></div>
<div class="d-translate"></div>
<div class="d-rotate"></div>
</body>
</html>

自定义动画语法

/* @keyframes语法一 */
@keyframes 动画名称 {from{ /* 开始动画 */}to{ /* 结束动画 */}
}/* @keyframes语法二 */
@keyframes 动画名称 {0%{ /* 动画执行的时间点 */}30%{ /* 动画执行的时间点 */}50%{ /* 动画执行的时间点 */}100%{ /* 动画执行的时间点 */}
}/* 动画的运行语法, animation必须放到选择器里面 */
/* animation所有动画属性的简写属性 */
animation: 动画名称 时间 速度 延迟多久开始执行 逆向播放 次数

小小技巧扩展：如何让元素垂直居中 + 水平居中

<!-- 方法一：垂直居中 + 水平居中 -->
<!DOCTYPE html>
<html>
<head><title></title><meta charset="utf-8"><style type="text/css">.d-animation {width: 200px;height: 100px;background-color: #000;position: absolute; /* 针对浏览器定位 */left: 50%;top: 50%;margin-left: -100px;margin-top: -50px;}</style>
</head>
<body>
<div class="d-animation"></div>
</body>
</html><!-- 方法二：垂直居中 + 水平居中 -->
<!DOCTYPE html>
<html>
<head><title></title><meta charset="utf-8"><style type="text/css">.d-animation {width: 200px;height: 100px;background-color: #000;position: absolute; /* 针对浏览器定位 */left: 50%;top: 50%;transform: translate(-100px, -50px);}</style>
</head>
<body>
<div class="d-animation"></div>
</body>
</html><!-- 方法三：垂直居中 + 水平居中 -->
<!DOCTYPE html>
<html>
<head><title></title><meta charset="utf-8"><style type="text/css">* {margin: 0;padding: 0;}html,body {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;}.d-animation {width: 200px;height: 100px;background-color: #000;}</style>
</head>
<body>
<div class="d-animation"></div>
</body>
</html>

<!DOCTYPE html>
<html>
<head><title></title><meta charset="utf-8"><style type="text/css">* {margin: 0;padding: 0;}html,body {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;}.d-animation {width: 200px;height: 100px;background-color: #000;animation: kf .5s linear 1s infinite;}/* 定义动画 */@keyframes kf {0%{transform: rotate(0deg);}100% {transform: rotate(360deg);}}</style>
</head>
<body>
<div class="d-animation"></div>
</body>
</html>

2.6 比心（画心）

<!DOCTYPE html>
<html>
<head><title></title><meta charset="utf-8"><style type="text/css">* {margin: 0;padding: 0;}.box {width: 180px;height: 160px;position: absolute;left: 50%;top: 50%;margin-left: -90px;margin-top: -80px;animation: kf 1s alternate infinite;}.round1 {width: 100px;height: 100px;border-radius: 50%; /* 圆 */background-color: hotpink;position: absolute;left: 0;top: 0;}.round2 {width: 100px;height: 100px;border-radius: 50%; /* 圆 */background-color: hotpink;position: absolute;right: 0;top: 0;}.bottom {width: 100px;height: 100px;background-color: hotpink;position: absolute;left: 40px;top: 40px;transform: rotate(45deg);}@keyframes kf {0%{transform: scale(0.6);}100%{transform: scale(1);}}</style>
</head>
<body>
<div class="box"><div class="round1"></div><div class="round2"></div><div class="bottom"></div>
</div>
</body>
</html>

2.7 太极

<!DOCTYPE html>
<html>
<head><title></title><style type="text/css">* {margin: 0;padding: 0;}.taiji {margin: 0 auto; /* 水平居中 */margin-top: 100px; /* 顶部距离100px */width: 400px;height: 200px;border-radius: 50%;border: 1px solid black;border-bottom-width: 200px;position: relative; /* 相对定位：针对自己的位置进行定位 */animation: kf 5s 10s infinite;}/* ::before 伪元素（虚拟元素）; *//* css的伪元素,之所以被称为伪元素,是因为他们不是真正的页面元素 */.taiji::before {content: '';border: 85px solid black;width: 30px;height: 30px;border-radius: 50%;background-color: white;position: absolute; /* 父元素只要有定位才能控制子元素的在父元素中位置 */top: 50%;left: 0;}.taiji::after {content: '';border: 85px solid white;width: 30px;height: 30px;border-radius: 50%;background-color: black;position: absolute; /* 父元素只要有定位才能控制子元素的在父元素中位置 */top: 50%;right: 0;}@keyframes kf {0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}}</style>
</head>
<body>
<div class="taiji"></div>
</body>
</html>

2.8 魔方

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GjVemG9K-1595950602513)(day1.assets/image-20200727160430449.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Smrc92IJ-1595950602515)(day1.assets/image-20200727160505831.png)]

<!DOCTYPE html>
<html>
<head><title></title><style type="text/css">* {margin: 0;padding: 0;}.box {position: relative;width: 200px;height: 200px;margin: 200px auto;transform-style: preserve-3d; /* 开启 3D 特效 */transition: all 2s ease;}.side {position: absolute;left: 0;top: 0;width: 200px;height: 200px;text-align: center;line-height: 200px;font-size: 36px;color: #fff;background-color: rgba(66, 66, 66, 0.5);}.left {transform: translateX(-100px) rotateY(90deg);background-color: rgba(57, 57, 107, 0.5);}.right {transform: translateX(100px) rotateY(90deg);background-color: rgba(62, 238, 86, 0.5);}.top {transform: translateY(-100px) roateX(90deg);background-color: rgba(164, 57, 226, 0.5);	}.bottom {transform: translateY(100px) roateX(90deg);background-color: rgba(212, 214, 53, 0.5);	}.before {transform: translateZ(100px);background-color: rgba(216, 107, 53, 0.5);}.after {transform: translateZ(-100px);background-color: rgba(221, 41, 176, 0.5);}.box:hover {transform: rotateX(360deg) rotateY(360deg);}</style>
</head>
<body>
<div class="box"><div class="side before">前</div><div class="side after">后</div><div class="side left">左</div><div class="side right">右</div><div class="side top">上</div><div class="side bottom">下</div>
</div>
</body>
</html>

3.微信小程序

3.1 小程序历史

微信小程序，小程序的一种，英文名Wechat Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用
2017年1月9日，张小龙在2017微信公开课Pro上发布的微信小程序正式上线
2018年2月，微信官方发布公告称：已对涉及假货高仿、色情低俗和违规“现金贷”等超过2000个微信小程序，进行永久封禁处理
微信小程序是一种不用下载就能使用的应用，也是一项创新，经过将近两年的发展，已经构造了新的微信小程序开发环境和开发者生态。微信小程序也是这么多年来中国IT行业里一个真正能够影响到普通程序员的创新成果，已经有超过150万的开发者加入到了微信小程序的开发
日活用户达到两个亿，微信小程序还在许多城市实现了支持地铁、公交服务。微信小程序发展带来更多的就业机会，2017年小程序带动就业104万人

官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/

3.2 入门小程序

注意：先创建一个空目录，存储小程序源代码

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lzYnPN9n-1595950602516)(day1.assets/image-20200727165401745.png)]

pages：小程序源代码目录
utils：工具包，存储JS插件
app.js：小程序全局JS文件
app.json：小程序全局配置文件
app.wxss：小程序全局样式文件

wxml：小程序页面

wxss：小程序样式

js：小程序业务逻辑代码

  "pages":["pages/index/index","pages/logs/logs"],

3.3 wxml语法

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构

3.3.1 数据绑定

通过 {{}} 表示要绑定数据

<text>{{username}}</text>
<text>{{userage}}</text>

  /*** 页面的初始数据*/data: {'username': '张三','userage': 23},

注意：数据绑定

内容呈现
组件属性

3.3.2 条件渲染

wx:if - 使用 wx:if="" 来判断是否需要渲染该代码块
wx:elif - 可以用 wx:elif 和 wx:else 来添加一个 else 块
wx:else - 可以用 wx:elif 和 wx:else 来添加一个 else 块

3.3.3 列表渲染

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

<text>{{username}}</text>
<text>{{userage}}</text>
<text wx:if='{{useraddress != ""}}'>{{useraddress}}</text><text wx:for='{{users}}'>{{item}}</text>

  /*** 页面的初始数据*/data: {'username': '张三','userage': 23,'useraddress': '成都','users':['李四', 23, '成都']},

1.学习内容

巩固小程序样式应用
JavaScript入门 - 小程序
小程序开发 - 实战

2.小程序样式应用

小程序样式 - 关联文件wxss
场景应用 - 小程序手机充电特效
介绍一下小程序里面的组件（标签）
1. view：容器组件，类似div
2. image，图片组件
3. text，文本组件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cyvhaquh-1595950624800)(day2.assets/image-20200728110458673.png)]

<view class='container'><view class="battery"></view>
</view>

/* 设置一个页面样式 */
page {width: 100%;height: 100%;display: flex;
}/* 电池充电壳 - 容器 */
.container {position: relative;width: 340rpx;height: 500rpx;margin: auto;
}/* 存储电量 - 容器*/
.battery {position: absolute;left: 0;top: 0;width: 100%;height: 100%;border-radius: 15rpx 15rpx 5rpx 5rpx;background-color: #fff;filter: drop-shadow(0 1rpx 3rpx rgba(1,188,213, .82));
}/* 电池正极 */
.battery::before {content: '';position: absolute;left: 50%;top: 0;width: 80rpx;height: 30rpx;background-color: rgba(2,119,253, .88);border-radius: 5rpx 5rpx 0 0;transform: translate(-50%, -30rpx);
}/* 电量样式 */
.battery::after {content: '';position: absolute;left: 0;right: 0;bottom: 0;top: 80%;border-radius: 0 0 5rpx 5rpx;background: linear-gradient(to bottom, #7abcff 0%, #00BCD4 44%, #2196F3 100%);animation: chong 6s linear infinite;
}@keyframes chong {95%{top: 5%;border-radius: 0 0 5rpx 5rpx;}100%{top: 0;border-radius: 15rpx 15rpx 5rpx 5rpx;}
}

3.小程序 - JS

3.1 JS 介绍

JavaScript是一种属于网络的高级脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的

JavaScript的标准是ECMAScript 。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为ECMAScript 6 或者ES6

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iguGiyfn-1595950624803)(day2.assets/image-20200728111750870.png)]

ECMAScript 6(ES6) 目前基本成为业界标准，它的普及速度比 ES5 要快很多，主要原因是现代浏览器对 ES6 的支持相当迅速，尤其是 Chrome 和 Firefox 浏览器，已经支持 ES6 中绝大多数的特性

3.2 ES6 新语法

不一样变量声明：const 和 let

ES6推荐使用let定义局部变量

var x = '全局变量';
{let x = '局部变量';console.log(x); // 局部变量
}
console.log(x); // 全局变量

const表示声明常量，两者都为块级作用域；const 声明的变量都会被认为是常量，意思就是它的值被设置完成后就不能再修改了

const a = 1
a = 0 //报错

模板字符串

ES6之前处理字符串：通过\ 或 + 来构建模板

$("body").html("This demonstrates the output of HTML \
content to the page, including student's\
" + name + ", " + seatNumber + ", " + sex + " and so on.");

ES6的字符串应用

基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定
ES6反引号(``)直接搞定

$("body").html(`This demonstrates the output of HTML content to the page, 
including student's ${name}, ${seatNumber}, ${sex} and so on.`);

箭头函数

ES6 中，箭头函数就是函数的一种简写形式，使用括号包裹参数，跟随一个 =>，紧接着是函数体

箭头函数三大特点

不需要function关键字来创建函数
省略return关键字
继承当前上下文的this关键字

// ES5
var add = function (a, b) {return a + b;
};
// 使用ES6箭头函数
var add = (a, b) => a + b;// ES5
[1,2,3].map((function(x){return x + 1;
}).bind(this));// 使用ES6箭头函数
[1,2,3].map(x => x + 1);

函数的参数默认值

// ES6之前，当未传入参数时，text = 'default'；
function printText(text) {text = text || 'default';console.log(text);
}// ES6；
function printText(text = 'default') {console.log(text);
}printText('hello'); // hello
printText();// default

for循环

for…of 用于遍历一个迭代器，如数组

let letters = ['a', 'b', 'c'];
letters.size = 3;
for (let letter of letters) {console.log(letter);
}
// 结果: a, b, c

for…in 用来遍历对象中的属性：

 let stus = ["Sam", "22", "男"];for (let stu in stus) {console.log(stus[stu]);}
// 结果: Sam, 22, 男

对象超类

ES6 允许在对象中使用 super 方法

var parent = {foo() {console.log("Hello from the Parent");}
}var child = {foo() {super.foo();console.log("Hello from the Child");}
}Object.setPrototypeOf(child, parent);
child.foo(); // Hello from the Parent// Hello from the Child

3.3 小程序中的JS原理

小程序JS的开发，完全采用ECMAScript语法标准来执行的。所以，大家学习小程序开发之前一定要把JavaScript学好
小程序中渲染层和逻辑层是理解小程序实现动态数据交互，以及如何操作网页标签和样式的核心
1. 首先，我们来简单了解下小程序的运行环境。小程序的运行环境分成渲染层和逻辑层，其中 WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层。
2. 小程序的渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了WebView 进行渲染；逻辑层采用JsCore线程运行JS脚本。一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端（下文中也会采用Native来代指微信客户端）做中转，逻辑层发送网络请求也经由Native转发，小程序的通信模型下图所示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N8KOVgGy-1595950624805)(day2.assets/image-20200728120720328.png)]

3.4 小程序运行机制

3.4.1 前台/后台

小程序启动后，界面被展示给用户，此时小程序处于前台状态。

当用户点击右上角胶囊按钮关闭小程序，或者按了设备 Home 键离开微信时，小程序并没有完全终止运行，而是进入了后台状态，小程序还可以运行一小段时间。

当用户再次进入微信或再次打开小程序，小程序又会从后台进入前台。但如果用户很久没有再进入小程序，或者系统资源紧张，小程序可能被销毁，即完全终止运行。

3.4.2 小程序启动

这样，小程序启动可以分为两种情况，一种是冷启动，一种是热启动。

冷启动：如果用户首次打开，或小程序销毁后被用户再次打开，此时小程序需要重新加载启动，即冷启动。
热启动：如果用户已经打开过某小程序，然后在一定时间内再次打开该小程序，此时小程序并未被销毁，只是从后台状态进入前台状态，这个过程就是热启动。

3.4.3 小程序销毁时机

通常，只有当小程序进入后台一定时间，或者系统资源占用过高，才会被销毁。具体而言包括以下几种情形：

当小程序进入后台，可以维持一小段时间的运行状态，如果这段时间内都未进入前台，小程序会被销毁。
当小程序占用系统资源过高，可能会被系统销毁或被微信客户端主动回收。
- 在 iOS 上，当微信客户端在一定时间间隔内连续收到系统内存告警时，会根据一定的策略，主动销毁小程序，并提示用户「运行内存不足，请重新打开该小程序」。具体策略会持续进行调整优化。
- 建议小程序在必要时使用 wx.onMemoryWarning 监听内存告警事件，进行必要的内存清理。

3.5 小程序生命周期

以下内容你不需要立马完全弄明白，不过以后它会有帮助

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KfzE3Wjs-1595950624807)(day2.assets/page-lifecycle.2e646c86.png)]

4.小程序-实战

4.1 余额提现-界面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8UR5UoJv-1595950624809)(day2.assets/image-20200728143032313.png)]

案例界面：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jdo4e9zw-1595950624811)(day2.assets/image-20200728143117700.png)]

涉及到技术

JS事件，如何在小程序上定义函数，让函数绑定小程序上事件
小程序事件参数传递，如何能够接收页面（渲染层）传递过来的参数（逻辑层）
目标达成：JS控制组件 + 组件样式

<view class='swiper-tab'><view class="swiper-tab-item {{currentTab == 0 ? 'active': ''}}" data-current='0' bindtap='clickTab'>全部</view><view class="swiper-tab-item {{currentTab == 1 ? 'active': ''}}" data-current='1' bindtap='clickTab'>提现中</view><view class="swiper-tab-item {{currentTab == 2 ? 'active': ''}}" data-current='2' bindtap='clickTab'>已提现</view>
</view><swiper duration="300" current="{{currentTab}}" bindchange='swiperTab'><swiper-item><view>全部页面</view></swiper-item><swiper-item><view>提现中页面</view></swiper-item><swiper-item><view>已提现页面</view></swiper-item>
</swiper>

.swiper-tab {width: 100%;height: 88rpx;border-bottom: 2rpx solid #ccc;text-align: center;line-height: 88rpx;display: flex;flex-flow: row;justify-content: space-around;
}.swiper-tab-item {width: 22%;color: #434343;
}.active {color: #F65959;border-bottom: 4rpx solid #F65959;
}swiper {height: 800rpx;line-height: 800rpx;font-weight: bold;font-size: 45rpx;text-align: center;
}

// pages/aliplay/aliplay.js
Page({/*** 页面的初始数据*/data: {'currentTab': 0},// 滑块左右滑动会触发此事件swiperTab: function(e) {let _this = this;_this.setData({  // 如果要去修改 data 里面变量 currentTab，则需使用 setData() 函数currentTab: e.detail.current // 给变量currentTab进行重新赋值});},// 卡片点击事件clickTab: function(e) {// 当点中卡片需要去改变 currentTab 变量// currentTab 变量的值怎么来// e.target.dataset.current 相当于 <view data-current='0'></view>let _this = this;if(_this.data.currentTab === e.target.dataset.current) {return false;} else {_this.setData({currentTab: e.target.dataset.current})}},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

4.2 侧栏滑动

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-utwo6duk-1595950624812)(day2.assets/image-20200728153930723.png)]

目标达成：

JS原理：渲染层与逻辑层交互
事件用法能够更加熟练
- 如何获取js里面变量 this.data.变量名
- 如何设置js里面变量 this.setData(...)
页面与js数据交互（传递）
- H5中data属性 <view data-index='100'></view>
- 增加一个事件 <view data-index='100' bindtap='show'>
- 在定义show函数时候去委派一个事件对象 function(e) {}，e.target.dataset.index

<!-- 容器 -->
<view class='page'><!-- 左侧栏 - 容器  --><view class="page-bottom"><view class="page-content"><view class="wc"><text>第一个item-1</text></view><view class="wc"><text>第二个item-2</text></view><view class="wc"><text>第三个item-3</text></view><view class="wc"><text>第四个item-4</text></view></view></view><!-- 右侧栏 - 容器 --><view class="page-top {{open ? 'c-state1': ''}}"><image src="/images/btn.png" bindtap="tap_ch"></image></view>
</view>

page, .page {height: 100%;
}.page-bottom {height: 100%;width: 750rpx;position: fixed;z-index: 0;background-color: rgb(0, 68, 97);
}.page-content {padding-top: 300rpx;
}.wc {color: #fff;padding: 30rpx 0 30rpx 40rpx;
}.page-top {height: 100%;position: fixed;width: 750rpx;z-index: 0;background-color: rgb(57, 125, 230);transition: 0.4s all ease;
}.page-top image {position: absolute;width: 68rpx;height: 38rpx;left: 20rpx;top: 20rpx;
}.c-state1 {transform: rotate(0deg) scale(1) translate(75%, 0%);
}

// pages/side/side.js
Page({/*** 页面的初始数据*/data: {open: false},tap_ch: function(e) {// 点击控制样式的变化// this 当前页面的对象，包含：js里面函数，变量名，内置方法 setData()let _this = this;if(_this.data.open) {_this.setData({open: false // 关闭状态});} else {_this.setData({open: true // 打开状态});}},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

4.3 天气预报