[015] Web App用组件方式开发全站 – 网盘下载 -

网盘链接：

1. 课程前期准备

• 1-1 课程介绍
• 1-2 课程安排
• 1-3 WEB项目开发流程介绍
• 1-4 开发角色缩写简介
• 1-5 产品设计
• 1-6 开发规划

2. 前端开发简介及标注与切图

• 2-1 前端开发内容介绍
• 2-2 标注简介
• 2-3 标注
• 2-4 切图（一）
• 2-5 切图（二）
• 2-6 MarkMan 标注 PSD 文件

3. 项目 JS 类开发

• 3-1 静态页思路验证-fullPage.js搭建一个简单切换页面
• 3-2 静态页思路验证-组件切换
• 3-3 JS类规划
• 3-4 通用图文组件类-H5ComponentBase（开发准备）
• 3-5 通用图文组件类-H5ComponentBase（参数设置）
• 3-6 CSS样式规划
• 3-7 通用图文组件类-H5ComponentBase（接受 onLoad、onLeave事件）
• 3-8 内容组织类-H5（addPage方法）
• 3-9 内容组织类-H5（addComponent方法）
• 3-10 内容组织类-H5（整合fullPage.js）
• 3-11 升级 H5ComponentBase 类支持相对定位

4. 图表组件-散点图组件开发

• 4-1 图表组件开发介绍
• 4-2 散点图原理分析
• 4-3 散点图开发(散点图的比例值、颜色设置)
• 4-4 散点图开发(位置设置)
• 4-5 H5ComponentPoint 动画效果修改

5. 图表组件-柱状图组件开发

• 5-1 柱图开发简介
• 5-2 水平柱图开发（HTML的DOM搭建）
• 5-3 水平柱图开发（CSS样式编写）
• 5-4 水平柱图开发（生长动画制作）
• 5-5 H5ComponentBar扩展，垂直柱图实现

6. 图表组件-折线图开发

• 6-1 折线图搭建折线图组件环境
• 6-2 折线图画布
• 6-3 折线图绘制网格线
• 6-4 折线图画点
• 6-5 折线图连线绘制数据
• 6-6 折线图绘制阴影
• 6-7 绘制项目名称
• 6-8 折线动画
• 6-9 项目名称动画

7. 图表组件-雷达图开发

• 7-1 雷达图开发（设计说明）
• 7-2 雷达图开发（背景层开发）
• 7-3 雷达图开发（数据层开发）
• 7-4 雷达图开发（项目文本修正、生长动画）

8. 图表组件-饼状图开发

• 8-1 饼图开发（绘制饼画准备）
• 8-2 饼图开发（绘制饼图）
• 8-3 饼图开发（绘制饼图动画）
• 8-4 饼图开发（项目文本注入）
• 8-5 H5ComponentPie 扩展，环图实现

9. 项目前端页面整合开发

• 9-1 前端整合开发介绍
• 9-2 前端整合开发准备
• 9-3 图文组件页开发（首页整合开发）
• 9-4 图文组件页开发（整合内容填充）
• 9-5 图文组件页开发（尾页整合开发）
• 9-6 图表组件页整合开发（一）
• 9-7 图表组件页整合开发（二）
• 9-8 图表组件页整合开发（三）
• 9-9 图表组件页整合开发（四）

10. 课程扩展

• 10-1 Loading 效果（简介）
• 10-2 Loading 效果（HTML 结构搭建及 CSS 样式设置）
• 10-3 Loading 效果（JS 脚本编写）
• 10-4 饼图文本重排（简介）
• 10-5 饼图文本重排（相交判定）
• 10-6 饼图文本重排（重排）
• 10-7 Ajax 获取 JSON 数据(上)
• 10-8 Ajax获取 JSON 数据(下)

11. 大任务-综合实战

• 11-1 实现一个完整的手机端数据展示报告