1、 基于 AppCan IDE 的动漫 app 应用开发 中文摘要： 随着当代社会经济的发展 ,科技技术也随着人们的需求增长而不断发展着，因此，为了在发展迅猛的网络时代中满足 用户对智能手机应用的 需求 ，以及满足程序开发人员对于 app 开发的需求 ，我们将设计一款 基于 AppCan IDE 的动漫 app 应用 。 动漫 app 的设计开发主要基于 AppCan IDE 开发平台 和以 HTML5 为核心的编程语言，根据手机用户对 app 应用 的 操作 需求来进行设计， 主要有主界面、登录注册界面和子功能界面等，其中主界面可细分为主窗口框和浮动窗口 , 浮动窗口是 嵌套于主窗口框内， 根
2、据设置的程序来 回切换，展示 不同的功能。 该设计 以 AppCan IDE 个人版 v4.0.1 为开发环境，以 HTML5 为核心 编程语言，以 CSS3样式搭建的 App UI 为 界面和以 appcan.request.ajax 方法函数作为数据上传与加载的工具来 进行网络注册和登录请求 。 关键词： HTML5 Hybrid App AppCan IDE APP 应用 Abstract： With the development of social economy, science and technology as people demand growth and developm
3、ent, therefore, in order to meet the needs of users of smart mobile phone application in the rapid development of the Internet era, the demand for app development and to meet the developers, we will design a app animation based on Application of AppCan IDE. The design and development of animation ap
4、p is mainly based on the AppCan IDE development platform and HTML5 as the core of the programming language to design according to mobile phone users of APP application operation requirements, the main interface, login interface and function interface, the main interface can be subdivided into main w
5、indow frame and a floating window, floating window is nested in the main window frame, according to the arrangement of a program to switch back and forth, show different functions. The design for the AppCan IDE personal edition of v4.0.1 for the development environment, using HTML5 as the core progr
6、amming language to build App UI CSS3 style interface and appcan.request.ajax to function as a method of data upload and loading tools to carry out network registration and login request. Keyword:HTML 5 Hybrid App AppCan IDE APP 1 绪 论 自从人类于 21 世纪步入高科技时代以来，电子信息科学技术的研究发展和更新变化可谓是 日新月异 。手机作为一种移动通信的工具，其发展
7、变化更是令人目不暇接。 随着手机逐渐的高度智能化，已经开始逐渐应用于商务领 域。许多企业级软件生产商已经开始将项目的研发重点转移到移动应用软件上面。 APP 应用的开发与推广已经成为了移动互联网行业的一个巨大市场。 本次毕业设计的主要目标有以下几点 。 (1)根据 近年来 智能手机 应用 的发展趋势，从实用性 ， 功能性 和观赏性三个方面来 分析用户 对于一款优秀的手机 APP 应用应有那些 需求； (2)根据用户 各种不同 的需求对 本次毕业设计的 APP 程序做出 功能 模块划分； (3)进一步对 本次毕业设计的 APP 应用的 各 个功能 模块进行 系统的 分析与设计， 并 给出整个项目
8、的 设计开发 流程； (4)在 保证所设计的 APP 能满足分 析所得的用户 基本功能 要求的 基础上，尽量附加 上 一些具有实用性的功能。 2 动漫 APP 应用开发技术分析 2.1 开发 平台介绍 本次毕业设计所使用的 AppCan IDE移动应用开发平台 是由正益移动互联科技股份有限公司研发的基于 HTML5 开发语言的智能手机移动应用开发平台， AppCan IDE 移动应用开发平台使得智能手机移动应用的设计与开发过程变得简单、快速、高效。其主要应用于开发目前市面上主流的 Android 系统、 IOS 系统应用。 2.2 开发语言 介绍 HTML5 语言标准的主要优势在于它适用众多的
9、操作系统平台 ,从计算机浏览器到智能手机移动端、平板电脑 ,甚至是智能电视，都可支持 HTML5 语言标准。而只要操作系统平台所使用的设备浏览器支持 HTML5 语言标准，那么使用 HTML5 语言标准进行编程开发的应用在此操作系统平台上就具有可行性 (大多数浏览器都有着相同的运行方式 )。 3 本次毕业设计的 app 应用开发系统分析 3.1 开发 平台 系统可行性 分析 本次毕业设计的 APP 应用开发 平台 有以下四点的可行性分析： (1)技术可行性：当前绝大多数电脑的硬件配置都可以满足 AppCan IDE 对于安装环境的要求，使我们的 app 应用开发 有了一个开发平台。而 HTML
10、5 语言，与 CSS3 样式相较于原生语言而言更加简便，且适用性强。 AppCan 经过多年的发展与完善，其开发技术与相关脚本，插件，模板等也已经相当的成熟。 (2)运行可行性： 正益 官网上 可 直接下载 AppCan IDE，各种 js 脚本，应用插件，应用模板等。 (3)法律可行性： AppCan IDE 是开放性的，每个人都有权利利用这个平台 进行 APP 应用开发。 (4)操作可行性 :AppCan IDE 为用户提供了大量的应用模板，以及脚本，使得 APP 的系统设计和程序编写变得更加简单。 3.2 开发模式 可行性 分析 APP 的 Hybrid App 开发模式，通常是一种基于
11、第三方跨平台移动应用的引擎框架来进行程序的编程开发的一种开发模式 。 一般使用 HTML5 语言和 JavaScript 语言作为 APP 的程序编程开发语言。 这些开发平台 的引擎框架可以调用智能手机操作系统的引擎所封装的底层功能。 HTML5语言和 JavaScript 语言只是作为 Hybrid App 开发过程中一个应用程序编程时的解析语言，应用功能执行时真正调用的引擎功能都是与 Native App 的底层功能。 因为使用了浏览器支持解码技术 ,所以 Hybrid App 通常具有跨平台的特性，并且开发成本和 Web App 接近 ,开发效率也远远高于 Native App。 4 A
12、pp 的 UI 搭建和功能总体 4.1 App 的系统整体搭建 本次毕业设计的 app 应用，其系统主体搭建框图如下图 4-1 所示。 app 主界面 以主窗口内嵌浮动窗口的模式表现 浮动窗口 按主题功能的不同分主窗口 可分为顶部搜索框，登图 4-1 系统主体构架图 4.2 主界面结构 及程序流程 分析 本次毕业设计的 app 应用，其主体界面是一个组合窗口，由一个主窗口内嵌可切换式的多个 浮动窗口组成。 (1)打开主窗口 ，使用函数方法： appcan.Window.open(参 数 ); (2)打开浮动窗口 ，使用函数方法： uexWindow.openPopver(参数 ); (3)主窗
13、口之间通讯，使用函数方法： uexWindow.evaluateScript(winName, type, script); (4)主窗口与浮动窗口之间通讯，使用函方法： uexWindow.evaluatePopoverScript(参数 ); 4.3 主窗口结构 及程序流程 分析 通过新建 appcan 的 HTML 页面，建立主界面的主窗口框架。 可分为三部分组成： 主窗口顶部功能栏 ； 主窗口中部主体框 ； 主 窗口底部浮动窗口切换栏 (1)按钮函数（获取点击事件），使用函数方法： appcan.button(selector, css, callback) (2)切换浮动窗口，使用函
14、数方法： appcan.tab(参数 ) 4.4 浮动窗口结构 及程序流程 分析 通过新建独立的 HTML 页面，我们可以建立多个浮动窗口。本次毕业设计，按功能所需建立 4 个浮动窗口，分别为：首页，资讯， 个人中心 ， 系统设置 。 (1)首页页面为打开 APP 后，主界面自动加载的首个页面，其子功能为：动漫，漫画类型。模块划分为漫画模块和动漫模块。 (2)资讯页面可从服务器后台获取当日上传的最新动漫资讯，以列表的形势加载表现。 (3)个人 中心 页面可以在用户登录后，从服务器后台获取该账户的用户个人资料，加载到 app 中。可以调用用户浏览记录，收藏记录，个人设置，与系统消息等。 (4)系
15、统设置页面 ，其主要功能在于对 app 的一些设置进行个性化调整，给予用户更好的体验。同时具有清除缓存，更新版本的功能，使用户得以更好的使用本 APP。 (5)图片轮播，使用函数方法： appcan.slider(参数 )。 4.5 登录与注册 页面结构及程序分析 登录与注册界面可分为 两大区域 (1)数据输入区：用户可以在该区域输入账号，密码等数据 (2)功能执行 区：用户可以在该区域，通过点击“登录” 或“注册” 按钮， 执行所需功能 。 (3)数据网络请求，使用函数方法： appcan.request.ajax(参数 )。 5 基于 AppCan IDE 的动漫 APP 应用开发的系统实
16、现 5.1 页面实现结果 进入主界面，页面可看到顶部搜索框，登录按钮；浮动窗口各个子功能模块、热门推荐，点击榜，底部有浮动窗口切换按钮等多种功能，展现了功能多样性。 打开登录 或注册 页面，页面可以看到顶部“返回”按钮， 数据输入区，“登录”按钮，“注册”按钮，“忘记密码”按钮，底部页面 UI。整个页面功能按键齐全，画面整洁美观。 6 结 论 进过三个月的不断努力，这次毕业设计最终得以完成。通过这次毕业设计，我不仅了解到了 HTML5 的一些没接触过的知识，也巩固了原有学习过的 android 课程，并且对 HTML5语言，软件开发环境和 app 开发语言 、 模式有了新的认识。 现如今的时代
17、已是电子信息的时代，随着智能手机的兴起与发展，目前世界上的多数软件开发商都已经逐渐转向 APP 开发市场。越来越多的开发人员正着力研究智能移动端应用 开发，而动漫作为人民日常生活的一个娱乐元素，可以说是日渐壮大。 根据市场目前的需求，设计开发一款界面好看，功能齐全且强大的动漫 APP 是非常具有实用性的。 参 考 文 献 1韩超，梁泉 .Android 系统原理及开发要点详解 M.北京 :电子工业出版社， 2010 2陈刚 .Java 开发利器： Eclipse 从入门到精通 M.北京 :清华大学出版社， 2005 3朱桂英 .Android 网络开发技术实战详解 M.北京 :电子工业出版社，
18、 2012 4王珊 ， 陈红 .数据库系统原理教程 .北京：清华大学出版 社 ， 2004 5Bruce Eckel.Thinking in java(java 编程思想 )第四版 .北京：机械工业出 版社 ， 2011 6林城 .Android 2.3 应用开发实战 J.机械工业出版社 ， 2011 7郑玲 ,郑晓天 .基于 WebSocket 的电力系统实时数据更新研究 J.计算机与现 代 ， 2013 8王一平 .面向 Web 服务通信安全模型 D. 武汉科技大 学， 2009 9孙迪 .软件行为可信技术研究 D.北京工业大学 ， 2013 10姜毅，王兆青，曹丽 .基于 HTTP 的实
19、时信 息传输方法 J.计算机工程与设计 ， 2010 11龚俊 .基于 Javamail 技术的企业 Email 安全管理系统的设计与实现 D.上海 交通大学 ， 2012 12葛希亚 .UI 设计中的符号应用与设计语义研究 D.苏州大学 ， 2014 13杨剑 .Web 服务综合安全模型及若干关键技术研究 D.华中科技大学 ， 2004 14赵亮，张维 .基于 Android 技术的界面设计与研究 D.徐州：徐州建筑职业技 术学院 ， 2001 15 连泽希 .Android 网络视频播放器的设计 D.珠海 ： 吉林大学珠海 学 院 ， 2012 16 连泽希 . Android 系统视频播放器的设计 D.珠海 ： 吉林大学珠海 学院 ， 2012
