〖课程介绍〗:
HTML5+组件式开发 让全站移动开发更简单！
运用HTML5、CSS3、JS流行技术，采用组件式开发模式，开发Web App全站！技术大牛带你统统拿下不同类型的HTML5动态数据报告！


〖课程目录〗:

  • 第1章 课程前期准备 试看6 节 | 23分钟

  • 在学习正式课程之前了解下“WEB项目开发流程”以及在“流程中的角色”。

  • 收起列表

  • 视频：1-1 课程介绍 (05:38)试看

  • 视频：1-2 课程安排 (01:37)

  • 视频：1-3 WEB项目开发流程介绍 (04:03)

  • 视频：1-4 开发角色缩写简介 (02:13)

  • 视频：1-5 产品设计 (03:49)

  • 视频：1-6 开发规划 (04:46)

  • 第2章 前端开发简介及标注与切图6 节 | 37分钟

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

  • 收起列表

  • 视频：2-1 前端开发内容介绍 (01:55)

  • 视频：2-2 标注简介 (02:20)

  • 视频：2-3 标注 (15:43)

  • 视频：2-4 切图（一） (09:16)

  • 视频：2-5 切图（二） (07:07)

  • 图文：2-6 MarkMan 标注 PSD 文件

  • 第3章 项目 JS 类开发 试看11 节 | 103分钟

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

  • 收起列表

  • 视频：3-1 静态页思路验证-fullPage.js搭建一个简单切换页面 (12:30)试看

  • 视频：3-2 静态页思路验证-组件切换 (14:05)试看

  • 视频：3-3 JS类规划 (05:55)

  • 视频：3-4 通用图文组件类-H5ComponentBase（开发准备） (05:44)

  • 视频：3-5 通用图文组件类-H5ComponentBase（参数设置） (16:28)

  • 视频：3-6 CSS样式规划 (03:34)

  • 视频：3-7 通用图文组件类-H5ComponentBase（接受 onLoad、onLeave事件） (09:02)

  • 视频：3-8 内容组织类-H5（addPage方法） (17:25)

  • 视频：3-9 内容组织类-H5（addComponent方法） (10:57)

  • 视频：3-10 内容组织类-H5（整合fullPage.js） (06:23)

  • 图文：3-11 升级 H5ComponentBase 类支持相对定位

  • 第4章 图表组件-散点图组件开发5 节 | 30分钟

  • 讲师先对图片组件做整体介绍，然后手把手带你详细开发散点图组件，直到你能够独自完成。

  • 收起列表

  • 视频：4-1 图表组件开发介绍 (03:22)

  • 视频：4-2 散点图原理分析 (03:02)

  • 视频：4-3 散点图开发(散点图的比例值、颜色设置) (15:50)

  • 视频：4-4 散点图开发(位置设置) (07:38)

  • 图文：4-5 H5ComponentPoint 动画效果修改

  • 第5章 图表组件-柱状图组件开发5 节 | 42分钟

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

  • 收起列表

  • 视频：5-1 柱图开发简介 (02:41)

  • 视频：5-2 水平柱图开发（HTML的DOM搭建） (18:41)

  • 视频：5-3 水平柱图开发（CSS样式编写） (08:27)

  • 视频：5-4 水平柱图开发（生长动画制作） (11:16)

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

  • 第6章 图表组件-折线图开发9 节 | 70分钟

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

  • 收起列表

  • 视频：6-1 折线图搭建折线图组件环境 (05:12)

  • 视频：6-2 折线图画布 (05:37)

  • 视频：6-3 折线图绘制网格线 (11:45)

  • 视频：6-4 折线图画点 (10:16)

  • 视频：6-5 折线图连线绘制数据 (07:12)

  • 视频：6-6 折线图绘制阴影 (05:38)

  • 视频：6-7 绘制项目名称 (08:36)

  • 视频：6-8 折线动画 (11:30)

  • 视频：6-9 项目名称动画 (04:08)

  • 第7章 图表组件-雷达图开发4 节 | 40分钟

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

  • 收起列表

  • 视频：7-1 雷达图开发（设计说明） (03:08)

  • 视频：7-2 雷达图开发（背景层开发） (17:51)

  • 视频：7-3 雷达图开发（数据层开发） (08:17)

  • 视频：7-4 雷达图开发（项目文本修正、生长动画） (10:06)

  • 第8章 图表组件-饼状图开发5 节 | 30分钟

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

  • 收起列表

  • 视频：8-1 饼图开发（绘制饼画准备） (06:13)

  • 视频：8-2 饼图开发（绘制饼图） (10:17)

  • 视频：8-3 饼图开发（绘制饼图动画） (03:43)

  • 视频：8-4 饼图开发（项目文本注入） (09:33)

  • 图文：8-5 H5ComponentPie 扩展，环图实现

  • 第9章 项目前端页面整合开发9 节 | 86分钟

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

  • 收起列表

  • 视频：9-1 前端整合开发介绍 (03:41)

  • 视频：9-2 前端整合开发准备 (09:15)

  • 视频：9-3 图文组件页开发（首页整合开发） (13:44)

  • 视频：9-4 图文组件页开发（整合内容填充） (11:10)

  • 视频：9-5 图文组件页开发（尾页整合开发） (14:33)

  • 视频：9-6 图表组件页整合开发（一） (08:38)

  • 视频：9-7 图表组件页整合开发（二） (09:08)

  • 视频：9-8 图表组件页整合开发（三） (09:38)

  • 视频：9-9 图表组件页整合开发（四） (05:25)

  • 第10章 课程扩展8 节 | 86分钟

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

  • 收起列表

  • 视频：10-1 Loading 效果（简介） (04:39)

  • 视频：10-2 Loading 效果（HTML 结构搭建及 CSS 样式设置） (09:46)

  • 视频：10-3 Loading 效果（JS 脚本编写） (16:11)

  • 视频：10-4 饼图文本重排（简介） (08:19)

  • 视频：10-5 饼图文本重排（相交判定） (12:53)

  • 视频：10-6 饼图文本重排（重排） (14:09)

  • 视频：10-7 Ajax 获取 JSON 数据(上) (05:54)

  • 视频：10-8 Ajax获取 JSON 数据(下) (13:32)

  • 第11章 大任务-综合实战1 节 | 0分钟

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

  • 收起列表

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

  • 本课程已完结