学途无忧

标题: 组件方式开发 Web App全站,全套视频教程学习资料通过百度云网盘下载 [打印本页]

作者: admin 时间: 2021-4-22 04:23
标题: 组件方式开发 Web App全站,全套视频教程学习资料通过百度云网盘下载

资源详情

第1章课程前期准备
在学习正式课程之前了解下“WEB项目开发流程”以及在“流程中的角色”。

1-1课程介绍

1-2课程安排

1-3WEB项目开发流程介绍

1-4开发角色缩写简介

1-5产品设计

1-6开发规划

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

本章节对本项目前端开发具体做什么做了简单介绍，并带领用户进行psd图标注与切图。

2-1前端开发内容介绍

2-2标注简介

2-3标注

2-4切图（一）

2-5切图（二）

2-6MarkMan标注PSD文件

第3章项目JS类开发

本章节讲师会带你规划和开发JS项目所用的“通用图文组件“-H5ComponentBase和“内容组织功能类“-H5。

3-1静态页思路验证-fullPage.js搭建一个简单切换页面

3-2静态页思路验证-组件切换

3-3JS类规划

3-4通用图文组件类-H5ComponentBase（开发准备）

3-5通用图文组件类-H5ComponentBase（参数设置）

3-6CSS样式规划

3-7通用图文组件类-H5ComponentBase（接受onLoad、onLeA危e事件）

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-5H5ComponentPoint动画效果修改

第5章图表组件-柱状图组件开发

先跟着讲师学开发水平柱图，逐步掌握水平柱图原理，然后自己独立开发垂直柱图。

5-1柱图开发简介

5-2水平柱图开发（HTML的DOM搭建）

5-3水平柱图开发（CSS样式编写）

5-4水平柱图开发（生长动画制作）

5-5H5ComponentBar扩展，垂直柱图实现

第6章图表组件-折线图开发

讲师先带你使用Canvas开发折线图，从中掌握折线图的生长动画原理，然后真正参与到项目实战中，独立完成改变生长动画的任务。

6-1折线图搭建折线图组件环境

6-2折线图画布

6-3折线图绘制网格线

6-4折线图画点

6-5折线图连线绘制数据

6-6折线图绘制阴影

6-7绘制项目名称

6-8折线动画

6-9项目名称动画

第7章图表组件-雷达图开发

已经掌握折线图开发的你，跟着讲师的教学练习节奏，完成使用Canvas来完成雷达图的开发也是Soeasy。

7-1雷达图开发（设计说明）

7-2雷达图开发（背景层开发）

7-3雷达图开发（数据层开发）

7-4雷达图开发（项目文本修正、生长动画）

第8章图表组件-饼状图开发

本章节向你揭示饼状图的开发原理，在章节的结束你就可以独立开发完成环状图开发了。

8-1饼图开发（绘制饼画准备）

8-2饼图开发（绘制饼图）

8-3饼图开发（绘制饼图动画）

8-4饼图开发（项目文本注入）

8-5H5ComponentPie扩展，环图实现

第9章项目前端页面整合开发

前面章节的学习积累很重要！这一节讲师就会带你把前面各个开发出来的页面整合在一起，你会感觉到前面类开发的好处，可以减少很多代码的量。

9-1前端整合开发介绍

9-2前端整合开发准备

9-3图文组件页开发（首页整合开发）

9-4图文组件页开发（整合内容填充）

9-5图文组件页开发（尾页整合开发）

9-6图表组件页整合开发（一）

9-7图表组件页整合开发（二）

9-8图表组件页整合开发（三）

9-9图表组件页整合开发（四）

第10章课程扩展

有问题需要解决？随时在问答区提出来！讲师会把大家典型的问题做指点和解惑，比如饼状图项目文本发生重叠的解决方法等；最后还带着你把项目最后首页的Loading功能完成。

10-1Loading效果（简介）

10-2Loading效果（HTML结构搭建及CSS样式设置）

10-3Loading效果（JS脚本编写）

10-4饼图文本重排（简介）

10-5饼图文本重排（相交判定）

10-6饼图文本重排（重排）

10-7Ajax获取JSON数据(上)

10-8Ajax获取JSON数据(下)

第11章大任务-综合实战

实践大作业环节！检查你学习效果的时候到了：你完成项目任务后如果想知道自己的项目代码写得如何，可以申请代码点评。授课讲师将会点评你的代码，帮你查漏补缺。

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

欢迎光临学途无忧 (http://xuetu123.com/)