收藏

Web App用组件方式开发全站

Web App用组件方式开发全站

难度 高级 时长 9小时 学习人数 3164 综合评分 9.92
  • 第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 节 |

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

    收起列表

    • 图文: 11-1 实现一个完整的手机端数据展示报告
本课程已完结


讲师

Lyn Web前端工程师

WEB前端开发工程师,IT男神,Full Stack Web Developer,追求代码、界面的可扩展性;性能,设计和出色的用户体验。从界面交互到程序性能,喜欢把控从Visual、Frontend、Backend、DevOps的每一个细节

课程预览

检测到您还没有关注慕课网服务号,无法接收课程更新通知。请扫描二维码即可绑定
重新观看
意见反馈 帮助中心 APP下载
官方微信

学习咨询

选课、学习遇到问题?

扫码添加指导老师 1V1 帮助你!

添加后老师会第一时间解决你的问题