摘 要

在互联网的发展迅猛的当今，我们可以看到互联网几乎遍及各个领域，互联网 的概念也深入人心。而线上学习也越来越流行，这种个性化的自主学习服务直接影响学习者的主动性和积极性。互联网 概念的出现使我们颠覆了传统的思维模式，我们逐渐将线下的服务向线上转移。将传统的线下教育改为线上线下的结合的方式，既可以让学习者更加灵活的安排时间也可以节省人力物力，减低学习成本。同时，网络技术，互联网技术，多媒体技术的发展为线上学习提供良好的技术基础，移动终端设备的普及也能够让我们随时随地自主的学习。

在本课设中，以会计课程为例，将会计动漫书的内容用cocos-studio以角色分类绘成动画并配以简单的交互，用户通过选择角色进入学习。同时使用Hbuilder工具，MUI框架，野狗云服务开发一个Hubrid app网上学习平台，用户需要注册新用户、才能登录到该平台进行学习。在该平台上用户可以选择课程进行学习，每个课程都有课后习题，完成动画观看后会进入课后习题。我们关注的课程之后登录后可以在个人中心查看关注的课程继续学习在个人中心，在个人中心同时保留学习过课程的习题可以随时查看。

关键字：HTML5，hybrid，Dcloud，课程开发

Abstract

Today，with the rapid development of the Internet, we can see almost all over the Internet in various fields,and the Internet concept is extremely popular. At the same time，Online learning has become increasingly popular,this personalized self-learning services directly affect learners' initiative and enthusiasm. Advent of Internet concept allows us to subvert the traditional mode of thinking,we will gradually shift to the service onlines instead of the offline. The mode of combining online and offline education to the traditional line not only allows learners more flexible time arrangements can also save resources,reduce learning costs.At the same time,the development of network technology,Internet technology,multimedia technology for online learning to provide a good technical base,the popularity of the mobile terminal device can allow us learning anywhere an anytime.

In this course design,we chose accounting course for example. The contents of the accounting book animation with cocos-studio role-classification drawn animation and simple interaction with the user by selecting a character gets to learn.Using Hbuilder tool,MUI framework,dogs cloud service to develop a Hubrid app online learning platform.Users need to register a new user so they are allowed to log on to the paltform to learn.Each course has a school exercise,after learning is finished,we will see it.Then we can see the course what we focused in the personal center next time we log in.while we also preservied the studied course exercises and they can be viewed at any time.

Keywords: HTML5,hybrid,Dcloud,course development

目录

第一章 绪论 1

1.1 项目背景和研究意义 1

1.2 开发目的及意义 1

1.3.本文的主要内容和组织 2

第二章 可行性分析 3

2.1 技术可行性 3

2.1.1 Hybrid技术概述 3

2.1.2 野狗BAAS云服务概述 4

2.1.3 JavaScript技术概述 4

2.1.4 HTML5与CSS3技术概述 5

2.1.5 cocos动画引擎 5

2.1.6 开发平台：Hbuider 6

2.2 经济可行性 6

2.3 操作可行性 7

第三章 需求分析 8

3.1 功能需求 8

3.2 领域模型UML类图 9

3.3 性能需求 9

3.4 运行环境 9

第四章 总体设计 11

4.1 系统设计 11

4.2 数据库结构设计 12

4.2.1 野狗云服务提供的存储 12

4.2.2 逻辑结构设计 12

第五章 详细设计及实现 15

5.1动画课件的实现 15

5.2.1课程详情 15

5.1.2动画实现 15

5.2系统功能实现 16

5.3系统模块功能实现 16

5.4页面实现 17

5.4.1 注册页、登录页、忘记密码页 17

5.4.2 首页 21

5.4.3 课程详情页 22

5.4.4 课程学习页 23

5.4.5 课后习题页 24

5.4.6 答案详情及成绩公布页 25

5.4.7 个人中心页面 26

5.4.8 我关注的课程页 27

5.4.9 我的作业页 28

5.4.10 设置页 30

第六章 系统测试 33

6.1 软件测试基础理论 33

6.1.1 软件测试定义 33

6.1.2 软件测试基本概念 33

6.2 软件测试的目的 33

6.3 软件测试方法分类 33

6.3.1 黑盒测试与白盒测试 34

6.4 系统测试 34

6.4.1 用户模块测试 34

6.4.2 课程模块测试 34

6.4.3 个人中心模块测试 35

6.5 测试报告 35

第七章 结论 36

参考文献 37

致谢 38

附录 39

第一章 绪论

1.1 项目背景和研究意义

随着Internet的发展，高等院校的学习模式都受到前所未有的冲击，各式各样的学习模式腾空出现，其中线上教育对我们来说已不是什么陌生的事了。同时，线上教育也受到了大家广大的重视。通过网络构建的教学平台，学习者可以随时随地的进行自主学习，这种全新的学习模式是传统课堂无法给予的。这种新型的学习模式是有计算机技术、多媒体技术、网络技术构成的新型学习平台，与传统的教学模式对比，它具有很大的优势。Hybrid App是出现在移动互联网产业急剧发展中的。Hybrid app是介于web app和native app之间的app。它具有用户体验好、扩展性好、性能高、易维护、规范化、跨平台、灵活性强、具有Debug环境、彻底解决跨域问题等特点。用户体验能与原生的app媲美。功能方面，开发者能够随意扩展接口。国内外Hybrid App的开发框架非常多，这里我们采用的是MUI。

MUI有着轻量，接近原生UI，流畅体验的特性。MUI的文件压缩后的JS文件是100 K，而CSS文件只有60 K，同时MUI不用依赖任何第三方JS库。MUI以iOS平台UI为基础，补充部分Android平台特有的UI控件，而不像是之前的众多响应式布局的前端框架中，做出来的app并没有原生app的感觉，而更像是网页。MUI不使用DIV而是使用双webview的方案来提升应用的流畅度。在拖动页面时，拖动的是一个完整的webview（子webview），而并不是拖动div元素，回弹动画使用原生动画，提升了流畅的体验。