几天没有更新，最近参加了前端学习的夏令营，收获了很多东西。
学习周期
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)]
- 完成原型图设计，提交线框图的原型
- 前端界面 - 线框图
- 后端界面 - 线框图
- 完成接口开发文档，提交word文档
工具
- axure - 原型图
- typora - markdown工具
- xmind - 思维导图
1.1 课程介绍
- 项目：基于B站小程序视频播放平台
- 整个课程主要分为四个部分
- Java后端技术基础知识讲解
- 前端技术基础知识讲解
- 基于项目功能模块技术讲解
- 最终以团队形式完成此项目
- 项目技术栈 + 项目工程化能力管理
- 前端技术基础：HTML+CSS+JavaScript+Ajax
- Java Web开发技术基础：Servlet + Tomcat + JSP + JavaBean + JDBC
- 前端框架：微信小程序
- 后端框架：DButils + 数据库连接池
- 数据库：MySQL
- 项目构建工具：Maven
- 项目源代码管理：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：表单标签
- input：text; password; file; submit; reset; radio, checkbox, hidden
- textarea：文本域
- select：下拉框
- table：表格标签
- th
- td
- tr
- thead
- 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 样式用法
- 根据样式功能（作用）进行分类
- 文本样式
- 背景样式
- 盒模型样式
- 布局样式
- 新增CSS3样式
- 文本样式
- color：颜色
- font-size：大小
- font-weight：粗度
- line-height：行高
- text-align：文字水平居中
- 背景样式
- background，背景样式简写，包含：颜色；图片；定位；大小；平铺；渐变色
- background-color，颜色
- background-image，图片
- background-size，大小
- background-position，定位
- background-repeat，平铺
- 盒模型样式
- width，宽度
- height，高度
- margin，外边距
- padding，内边距
- border，边框
- border-radius，圆角
- box-shadow，边框阴影
- 布局样式
- position，相对定位（relative），固定定位（fixed），绝对定位（absolute），默认（static）
- left，相对要定位元素左侧距离
- right，相对要定位元素右侧距离
- top，相对要定位元素顶部距离
- bottom，相对要定位元素底部距离
- float，浮动，让元素脱离文档流（重要；恐怖）
- display，设置为flex，弹性布局
- flex-wrap，设置换行
- flex-direction，设置弹性布局方向
- justify-content，主轴方向的布局设置（对齐方式设置）
- align-item，纵轴方向的布局设置（对齐方式设置）
- 新增CSS3样式
- transform，缩放（scale），移动（translate），旋转（rotate）
- transition，过渡 - 当一个样式变化为另一个样式所需要耗费时间（自带动画效果）
- @keyframes，自定义动画
- 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)是影响项目开发的关键。
存在的问题：
- 代码耦合，开发维护困难
- 无法针对不同模块进行针对性优化
- 无法水平扩展
- 单点容错率低，并发能力差
## 2.2.垂直拆分
当访问量逐渐增大，单一应用无法满足需求，此时为了应对更高的并发和业务需求，我们根据业务功能对系统进行拆分：
优点：
- 系统拆分实现了流量分担，解决了并发问题
- 可以针对不同模块进行优化
- 方便水平扩展，负载均衡，容错率提高
缺点：
- 系统间相互独立，会有很多重复开发工作，影响开发效率
## 2.3.分布式服务
当垂直应用越来越多，应用之间交互不可避免，将核心业务抽取出来，作为独立的服务，逐渐形成稳定的服务中心，使前端应用能更快速的响应多变的市场需求。此时，用于提高业务复用及整合的分布式调用是关键。
优点：
- 将基础服务进行了抽取，系统间相互调用，提高了代码复用和开发效率
缺点：
- 系统间耦合度变高，调用关系错综复杂，难以维护
## 2.4.流动计算架构（SOA）
SOA ：面向服务的架构
当服务越来越多，容量的评估，小服务资源的浪费等问题逐渐显现，此时需增加一个调度中心基于访问压力实时管理集群容量，提高集群利用率。此时，用于提高机器利用率的资源调度和治理中心(SOA)是关键
以前出现了什么问题？
- 服务越来越多，需要管理每个服务的地址
- 调用关系错综复杂，难以理清依赖关系
- 服务过多，服务状态难以管理，无法根据服务情况动态管理
服务治理要做什么？
- 服务注册中心，实现服务自动注册和发现，无需人为记录服务地址
- 服务自动订阅，服务列表自动推送，服务调用透明化，无需关心依赖关系
- 动态监控服务状态监控报告，人为控制服务状态
缺点：
- 服务间会有依赖关系，一旦某个环节出错会影响较大
- 服务关系复杂，运维、测试部署困难，不符合DevOps思想
## 2.5.微服务
前面说的SOA，英文翻译过来是面向服务。微服务，似乎也是服务，都是对系统进行拆分。因此两者非常容易混淆，但其实却有一些差别：
微服务的特点：
- 单一职责：微服务中每一个服务都对应唯一的业务能力，做到单一职责
- 微：微服务的服务拆分粒度很小，例如一个用户管理就可以作为一个服务。每个服务虽小，但“五脏俱全”。
- 面向服务：面向服务是说每个服务都要对外暴露Rest风格服务接口API。并不关心服务的技术实现，做到与平台和语言无关，也不限定用什么技术实现，只要提供Rest的接口即可。
- 自治：自治是说服务间互相独立，互不干扰
- 团队独立：每个服务都是一个独立的开发团队，人数不能过多。
- 技术独立：因为是面向服务，提供Rest接口，使用什么技术没有别人干涉
- 前后端分离：采用前后端分离开发，提供统一Rest接口，后端不用再为PC、移动段开发不同接口
- 数据库分离：每个服务都使用自己的数据源
- 部署独立，服务间虽然有调用，但要做到服务重启不影响其它服务。有利于持续集成和持续交付。每个服务都是独立的组件，可复用，可替换，降低耦合，易维护
微服务结构图：
# 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
- 场景应用 - 小程序手机充电特效
- 介绍一下小程序里面的组件（标签）
- view：容器组件，类似div
- image，图片组件
- 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学好
-
小程序中渲染层和逻辑层是理解小程序实现动态数据交互，以及如何操作网页标签和样式的核心
- 首先，我们来简单了解下小程序的运行环境。小程序的运行环境分成渲染层和逻辑层，其中 WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层。
- 小程序的渲染层和逻辑层分别由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里面变量
- 页面与js数据交互（传递）
- H5中data属性
<view data-index='100'></view> - 增加一个事件
<view data-index='100' bindtap='show'> - 在定义show函数时候去委派一个事件对象
function(e) {}，e.target.dataset.index
- H5中data属性
<!-- 容器 -->
<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 天气预报
目标达成：
- 理解第三方服务器概念 - 作用
- 接口作用，里面提供数据如何分析它们
- 学会使用小程序的网络请求 API 来调用第三方服务器的接口
实现步骤：
第一步：寻找提供天气预报第三方服务器，分析服务器提供的数据接口格式
- 接口就是网络地址，采用天行数据API接口
- 请求参数，告诉服务器要想获取具体的数据是什么
- 返回数据
第二步：通过微信小程序网络请求组件，能够拉取第三方服务器发送数据
wx.request函数请求网络数据- 根据接口信息，编写如下代码 - 代码样例
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xTItlNqU-1595950624813)(day2.assets/image-20200728172025795.png)]
wx.request({
url: 'http://api.tianapi.com/txapi/tianqi/index?key=xxx&city=成都',
method: 'GET',
dataType: 'JSON',
success: function(e) {}
});
第三步：设计天气预报界面，然后将数据渲染到界面里面
- 解析数据 - 天行api返回数据是一个数组
newslist - 数据绑定
// pages/weather/weather.js
Page({
/**
* 页面的初始数据
*/
data: {
weatherlist: [] // 给wxml传递数据
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var _this = this;
console.log(_this.data.weatherlist);
wx.request({
url: 'http://api.tianapi.com/txapi/tianqi/index?key=ed1394ce936a5526c70fea58875538e0&city=成都',
method: 'GET',
dataType: 'json', // 小写的json
success: function(e) {
// e.newslist 返回存储天气信息数据
// let newslist 自己定义的变量, 接收 e.newslist 里面数据
let newslist = e.data.newslist;
_this.setData({
weatherlist: newslist
});
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
今天学习了微信小程序的开发文档，写了电池的小程序，和天气预报，掌握了小程序开发的主要步骤。