html5技术的跨终端开发技术的
摘 要随着移动设备的飞速发展，如今市面上出现了各种各样的移动设备，这些移动设备在尺寸、操作系统、以及屏幕分辨率等方面截然不同，这就导致同一个应用程序需要多次开发基于不同移动设备的版本，既增加了开发者的工作，又增加了成本，因此，跨终端问题受到开发者的广泛关注。再者，由于移动设备的很多性能与PC端不同，导致在PC端能正常显示的页面在移动端却显示混乱，或必须放大、缩小、拖拽页面才能查看信息，用户体验度极差，这就导致了开发者对响应式设计的追求。本文采用HTML5、CSS3和JavaScript等技术，应用Eclipse和PhoneGap平台，以中国建设银行个人网上银行网站为例，开发具有跨平台和自适应能力的网站。该系统主要包括五大模块：用户登录模块、我的账户模块、转账汇款模块、客户服务模块、以及安全中心模块。它们分别负责的功能为：用户登录和重置密码，用户账户信息查询、账户明细查询和追加新账户，进行转账汇款和转账汇款记录查询，用户昵称设置、登录方式设置和用户基本信息添加或修改，修改密码和设置密保。本论文介绍了课题的背景、意义、目的、现状以及相关技术，阐述了系统具体需求、整体架构、模块划分以及各模块的功能，实现了跨终端、响应式的个人网上银行网站。经测试，本系统基本实现了要求的功能，不但能在不同移动终端运行，而且还能根据视口的大小调整显示样式。该系统的设计，不仅减轻了开发者的负担，降低了开发成本，还及大地提高了用户体验度，在同类产品中具有极大的优势。
目录
摘 要 I
ABSTRACT II
目录 III
第1章 绪论 1
1.1 课题背景 1
1.2 课题意义和目的 2
1.3 国内外研究现状及趋势 2
1.4 全文章节安排 3
第2章 相关技术综述 5
2.1 HTML5技术 5
2.1.1 HTML5介绍 5
2.1.2 CSS3介绍 7
2.1.3 JavaScript介绍 7
2.2 响应式Web设计 8
2.3 Eclipse介绍 9
2.4 PhoneGap概述 9
2.4.1 PhoneGap框架 9
*好棒文|www.hbsrm.com +Q: ^3^5`1^9`1^6^0`7^2#
2.4.2 PhoneGap原理 9
2.4.3 PhoneGap优缺点 10
2.5 本章小结 11
第3章 需求分析 12
3.1 业务需求 12
3.2 功能需求 13
3.3 数据需求 14
3.3.1 数据流图 14
3.3.2 数据字典 15
3.4 本章小结 17
第4章 概要设计 18
4.1 系统架构 18
4.1 功能模块图 18
4.2 数据库设计 19
4.3.1概念设计 19
4.3.2 逻辑结构设计 19
4.3 本章小结 21
第5章 详细设计与实现 22
5.1 系统配置 22
5.2 连接数据库 22
5.3 系统功能详细设计 24
5.3.1用户登录模块设计 24
5.3.2我的账户模块设计 27
5.3.3转账汇款模块设计 29
5.3.4客户服务模块设计 39
5.3.5安全中心模块设计 43
5.5 响应式实现 46
5.6 本章小结 48
第6章 测试 49
6.1 静态测试 49
6.2 功能测试 49
6.2.1用户登录模块测试 49
6.2.2我的账户模块测试 50
6.2.3转账汇款模块测试 51
6.2.4客户服务模块测试 52
6.2.5安全中心模块测试 52
6.3 性能测试 53
6.4 本章小结 53
第7章 总结与展望 54
7.1 成果总结 54
7.2 未来展望 54
参考文献..................................................................................................56
致谢..........................................................................................................58
附录:英文文献翻译.................................................................................59
第1章 绪论
课题背景
现代社会，移动设备的普及给互联网行业带来了一场大的革命，智能手机，平板电脑，智能家电等新设备层出不穷，我们的世界变得越来越丰富多彩。伴随着这个现象的一个不可争辩的事实是，消费者更加倾向于优先使用小屏幕设备上网，使用小屏幕设备上网的人数正在以前所未有的速度增长[1]。
对台式计算机的不断完善和移动设备的飞速发展导致消费者对计算机的依赖变得越来越大。消费者希望能够在任何时间任何地点都可以使用计算机，并且随时可以通过网络获得自己需要的信息。另外，消费者对用户体验的要求也变得越来越高。这样一来，对于移动端的网页开发来讲，移动设备的多样性（操作系统、浏览器、屏幕分辨率等）和用户体验的要求就给网页设计者们带来了新的挑战。譬如，我们可能注意到，有些在台式终端上可以正常显示的页面，在那些小屏幕设备上的显示却差强人意。多数浏览器会将一个标准网页缩小至与设备可视区域恰好匹配，然后让用户在自己感兴趣的内容区域上放大浏览。这样做虽然可以正常显示网页，但是为了看清页面内容，用户需要不停地放大或缩小页面，为了看到视口外的内容，还需要再左、右拖动，结果一不小心就会点到一个不相干的链接，这样的用户体验是极其差的。
可以说，移动应用程序的开发工作并不是一件容易的事，而是棘手又充满挑战的事情。移动开发者针对不同移动终端可能需要应用不同的编程语言，使用不同的开发环境、开发工具、SDK、API 等。这样，同一个功能在不同终端上的开发就千差万别，极大地增加了开发难度和成本。如何做到一次开发，多种终端运行，同时还要充分考虑到用户体验，是我们亟待解决的难题。
然而幸运的是，面对不断发展的浏览器和移动设备，我们有可行的解决方案，那就是采用HTML5技术。HTML5技术并不是单纯的一种开发语言,而是HTML5、CSS3和JavaScript的统称[2,3]。值得注意的是， HTML5是唯一一个通吃PC、Android 、iPhone 、iPad、BlackBerry、Mac、Windows Phone等主流平台的跨平台语言[4]。并且，HTML5删繁就简，增加了新便签，使编写更加方便，代码更加简洁[2]。采用HTML5技术的网页设计可以使网站兼容多种设备和屏幕，从而吸引了大多数的开发者[5,6]。而这种方法的最佳之处，在于不需要什么服务器端方案，也完全可以实现。
综合以上背景，本课题以中国建设银行个人网上银行为案例，研究基于HTML5技术的跨终端开发技术，使用HTML5、CSS3和JavaScript等技术开发具有跨终端和响应式特性的个人网上银行网站，做到一次开发，多平台应用，并大大提升客户体验度。
本论文选题来自于河海大学－江苏国光信息国家级工程实践教育中心，江苏国光信息股份有限公司是金融行业信息化设备及系统的主流供应商和主要系统集成商，公司致力于“以系统集成解决方案来带动硬件设备的供应，逐步扩大和引导金融信息等行业的产品应用”。本课题以金融行业为背景对跨终端开发技术展开研究，以进一步推广金融信息化向智能终端的过渡。
课题意义和目的
目录
摘 要 I
ABSTRACT II
目录 III
第1章 绪论 1
1.1 课题背景 1
1.2 课题意义和目的 2
1.3 国内外研究现状及趋势 2
1.4 全文章节安排 3
第2章 相关技术综述 5
2.1 HTML5技术 5
2.1.1 HTML5介绍 5
2.1.2 CSS3介绍 7
2.1.3 JavaScript介绍 7
2.2 响应式Web设计 8
2.3 Eclipse介绍 9
2.4 PhoneGap概述 9
2.4.1 PhoneGap框架 9
*好棒文|www.hbsrm.com +Q: ^3^5`1^9`1^6^0`7^2#
2.4.2 PhoneGap原理 9
2.4.3 PhoneGap优缺点 10
2.5 本章小结 11
第3章 需求分析 12
3.1 业务需求 12
3.2 功能需求 13
3.3 数据需求 14
3.3.1 数据流图 14
3.3.2 数据字典 15
3.4 本章小结 17
第4章 概要设计 18
4.1 系统架构 18
4.1 功能模块图 18
4.2 数据库设计 19
4.3.1概念设计 19
4.3.2 逻辑结构设计 19
4.3 本章小结 21
第5章 详细设计与实现 22
5.1 系统配置 22
5.2 连接数据库 22
5.3 系统功能详细设计 24
5.3.1用户登录模块设计 24
5.3.2我的账户模块设计 27
5.3.3转账汇款模块设计 29
5.3.4客户服务模块设计 39
5.3.5安全中心模块设计 43
5.5 响应式实现 46
5.6 本章小结 48
第6章 测试 49
6.1 静态测试 49
6.2 功能测试 49
6.2.1用户登录模块测试 49
6.2.2我的账户模块测试 50
6.2.3转账汇款模块测试 51
6.2.4客户服务模块测试 52
6.2.5安全中心模块测试 52
6.3 性能测试 53
6.4 本章小结 53
第7章 总结与展望 54
7.1 成果总结 54
7.2 未来展望 54
参考文献..................................................................................................56
致谢..........................................................................................................58
附录:英文文献翻译.................................................................................59
第1章 绪论
课题背景
现代社会，移动设备的普及给互联网行业带来了一场大的革命，智能手机，平板电脑，智能家电等新设备层出不穷，我们的世界变得越来越丰富多彩。伴随着这个现象的一个不可争辩的事实是，消费者更加倾向于优先使用小屏幕设备上网，使用小屏幕设备上网的人数正在以前所未有的速度增长[1]。
对台式计算机的不断完善和移动设备的飞速发展导致消费者对计算机的依赖变得越来越大。消费者希望能够在任何时间任何地点都可以使用计算机，并且随时可以通过网络获得自己需要的信息。另外，消费者对用户体验的要求也变得越来越高。这样一来，对于移动端的网页开发来讲，移动设备的多样性（操作系统、浏览器、屏幕分辨率等）和用户体验的要求就给网页设计者们带来了新的挑战。譬如，我们可能注意到，有些在台式终端上可以正常显示的页面，在那些小屏幕设备上的显示却差强人意。多数浏览器会将一个标准网页缩小至与设备可视区域恰好匹配，然后让用户在自己感兴趣的内容区域上放大浏览。这样做虽然可以正常显示网页，但是为了看清页面内容，用户需要不停地放大或缩小页面，为了看到视口外的内容，还需要再左、右拖动，结果一不小心就会点到一个不相干的链接，这样的用户体验是极其差的。
可以说，移动应用程序的开发工作并不是一件容易的事，而是棘手又充满挑战的事情。移动开发者针对不同移动终端可能需要应用不同的编程语言，使用不同的开发环境、开发工具、SDK、API 等。这样，同一个功能在不同终端上的开发就千差万别，极大地增加了开发难度和成本。如何做到一次开发，多种终端运行，同时还要充分考虑到用户体验，是我们亟待解决的难题。
然而幸运的是，面对不断发展的浏览器和移动设备，我们有可行的解决方案，那就是采用HTML5技术。HTML5技术并不是单纯的一种开发语言,而是HTML5、CSS3和JavaScript的统称[2,3]。值得注意的是， HTML5是唯一一个通吃PC、Android 、iPhone 、iPad、BlackBerry、Mac、Windows Phone等主流平台的跨平台语言[4]。并且，HTML5删繁就简，增加了新便签，使编写更加方便，代码更加简洁[2]。采用HTML5技术的网页设计可以使网站兼容多种设备和屏幕，从而吸引了大多数的开发者[5,6]。而这种方法的最佳之处，在于不需要什么服务器端方案，也完全可以实现。
综合以上背景，本课题以中国建设银行个人网上银行为案例，研究基于HTML5技术的跨终端开发技术，使用HTML5、CSS3和JavaScript等技术开发具有跨终端和响应式特性的个人网上银行网站，做到一次开发，多平台应用，并大大提升客户体验度。
本论文选题来自于河海大学－江苏国光信息国家级工程实践教育中心，江苏国光信息股份有限公司是金融行业信息化设备及系统的主流供应商和主要系统集成商，公司致力于“以系统集成解决方案来带动硬件设备的供应，逐步扩大和引导金融信息等行业的产品应用”。本课题以金融行业为背景对跨终端开发技术展开研究，以进一步推广金融信息化向智能终端的过渡。
课题意义和目的
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/dzxx/dzkxyjs/1735.html
