基于AppCan IDE的动漫app应用开发-毕业设计论文

1、毕 业 设 计基于AppCan IDE的动漫app应用开发系 别：专 业 名 称： 学 生 姓 名： 学 号： 指导教师姓名、职称： 完成日期：2017年03月28日摘 要随着当代社会经济的发展,科技技术也随着人们的需求增长而不断发展着，而作为人们日常生活中，沟通联系通讯以及娱乐乃至办公的便携式工具，其普及和发展也达到了前所未有的高度，而app作为智能手机必不可缺的软件应用，其开发技术也是日新月异。因此，为了在发展迅猛的网络时代中满足用户对智能手机应用的需求，以及满足程序开发人员对于app开发的需求，我们将设计一款基于AppCan IDE的动漫app应用。动漫app的设计开发主要基于AppCa

2、n IDE开发平台和以HTML5为核心的编程语言，根据手机用户对app应用的操作需求来进行设计，主要有主界面、登录注册界面和子功能界面等，其中主界面可细分为主窗口框和浮动窗口, 浮动窗口是嵌套于主窗口框内，根据设置的程序来回切换，展示不同的功能。基于AppCan IDE的动漫app应用分为以下四个浮动窗口：首页、资讯、个人主页、更多功能。除了这四个嵌套于主窗口内的浮动窗口以外，还添加了登录，注册等功能，且各个浮动窗口也内嵌了相应的子功能模块。该设计以AppCan IDE个人版 v4.0.1为开发环境，以HTML5为核心编程语言，以CSS3样式搭建的App UI为界面和以appcan.reque

3、st.ajax方法函数作为数据上传与加载的工具来进行网络注册和登录请求。关键词：HTML5 Hybrid App AppCan IDE APP应用 CSS3样式的APP界面UI设计AbstractWith the development of modern science and technology and economy, the popularity of smartphones and development reached an unprecedented height,And as a smartphone app essential software application, i

4、ts development technology is also changing.Therefore, in order to meet user in the rapidly developing network era demand for smartphone applications, as well as to meet the needs of application developers to develop for the app,We will design a cartoon app based on AppCan IDE.Anime app based mainly

5、on the design and development AppCan IDE development platform and take it as the core of programming language,According to the requirements of mobile phone users to the operation of the app to design,Mainly consists of a main window and four different floating window, floating window within a nested

6、 with the main window,According to the setup program to switch back and forth, show different functions.Based on AppCan IDE animation app application is divided into the following four floating window: home page, information, personal home page, more features. In addition to these four nested in the

7、 main window of the floating window, but also added the login, registration and other functions, and each floating window is also embedded in the corresponding sub module. The design for the AppCan IDE personal edition of v4.0.1 for the development environment, using HTML5 as the core programming la

8、nguage 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 Based on a range of styles of UI design目 录1 绪 论11.1 手机智能移动终端的发展背景11.2 APP的发展概况11

9、.3 项目的开发背景和目标22 动漫APP应用开发技术分析42.1 AppCan IDE平台介绍42.1.1 AppCan IDE 简介及安装42.1.2 AppCan IDE 制作APP的打包模式42.1.3 AppCan IDE 平台制作APP的优势52.2 HTML5语言介绍52.2.1 HTML5语言简介62.2.2 HTML5语言的优势62.3 AppCanIDE的UI样式的选择62.3.1 AppCanIDE的UI样式选择CSS3样式的原因63 本次毕业设计的APP应用开发系统分析83.1 AppCan IDE平台分析83.1.1 AppCan IDE平台系统可行性分析83.2 系

10、统结构的设计83.2.1 混合应用（Hybrid App）的开发模式介绍83.2.2 使用混合应用（Hybrid App）开发模式的优势94 APP的UI搭建和功能总体124.1 App的系统整体搭建124.2 App的UI搭建134.2.1主界面结构分析134.2.2 主界面程序流程分析134.3主窗口搭建164.3.1主窗口结构分析164.3.2主窗口程序流程分析184.3.3程序函数分析184.4浮动窗口的搭建194.4.1浮动窗口结构分析194.5登录与注册页面的搭建204.5.1登录界面结构分析204.5.2注册界面结构分析214.5.3登录与注册窗口程序流程分析224.5.4程序函

11、数分析224.6子功能页面的搭建224.6.1子功能页面结构分析225 基于APPCAN IDE的动漫APP应用开发的系统实现245.1 页面实现结果245.1.1主界面页面实现结果245.1.2登录与注册页面实现结果275.1.3搜索与子功能页面实现结果286 结 论30参 考 文 献31附 录32附件一：系统文件图32附件二：登录数据请求方法33致 谢35351 绪 论1.1 手机智能移动终端的发展背景在人类通讯历史上，通讯工具有烽火，狼烟，书信，传呼机，电话，手机等，其中手机可以说得上是一个最伟大的发明，从其发明问世至今，已经有二十几个年头。手机在这二十几年的发展历史中，历经了多次的蜕变

12、。而在手机的发展蜕变历史中，最为重大的一次革命，莫过于智能手机的出现。智能手机的出现，使得手机的功能不再仅仅局限于收发短信，即时通话等通讯功能。与传统的手机通讯功能相比，智能手机不仅可以实现收发短信、即时通话的功能，还可以实现用户随时随地连接因特网的需求，实现更多智能化的办公，娱乐功能应用。在2001年的时候，爱立信公司发布了世界上第一款智能手机，采用SymbianOS系统的-R380sc智能手机。由此开启了智能手机大时代，世界上众手机生产商紧随爱立信之后，也纷纷推出属于自己的智能手机，智能手机的研发与生产进入了一个蓬勃发展的时代。时至今日，智能手机已然经历了十多年的发展，而与之相对应的，智能

13、手机应用也随之经历了极大的发展与变化。随着人们对于智能手机的外观美观性，体积便携性，功能实用性和价格性价比的要求越来越高，智能手机应用开发的技术也随之得到不断的发展更新与完善。就早期的智能手机应用而言，其功能都是比较单调的，通常功能只有一种或两种，界面显示也比较简单粗糙，已经无法适应手机用户的越来越丰富功能需求。因此，我们有必要开发出一款可以满足用户对于界面设计和功能需求的智能手机应用。1.2 APP的发展概况自从人类于21世纪步入高科技时代以来，电子信息科学技术的研究发展和更新变化可谓是“士别三日当刮目相待”。而通信技术的发展更可谓是风起云涌。手机作为一种移动通信的工具，其发展变化更是令人目

14、不暇接。自人类进入互联网时代以来，如何方便，快捷，随时随地的连接互联网已成为人类一大迫切需求，自然而然的，可联网的移动互联网式智能手机便应运而生，而可联网的智能手机的普及，也反向的推动了移动互联网技术的推广与发展，与之相应的，手机智能移动终端软件，即（移动APP）的研究开发与使用得到了极大的推广。据统计，仅在2011年一年内，在全球范围内的各种智能手机应用就有着下载次数382亿的庞大数据，而互联网数据中心（IDC）以此为依据进行增长预估，智能手机应用下载量在2016年的时候，甚至会上涨到2327亿次之多。凭借着占据空间的体积小,低重量方便随身携带、屏幕显示带触控功能、自带数码摄像头，像素高清，

15、无线网卡随时联网等等多样且人性化的用户体验，以装载运行Android系统的手机和装载运行IOS系统的手机为代表的智能手机等移动式通讯设备，已经在慢慢的介入现代企业的商务运行过程并逐渐使其运行模式发生变化。智能手机移动式通讯设备等产品，原本被定义为消费类型设备，现在也逐渐开始介入商务应用领域，从而导致了着力于研发产品商务销售推广应用的企业级产品应用推广厂商将产品应用推广的研发重点从实体传媒或PC网端转移至手机移动端应用平台，乃至发展到将手机移动端应用平台作为产品应用推广厂商提供产品和推广自身产品品牌、与消费者接触交互信息，甚至是销售商品的一个渠道。可以说智能手机移动端应用APP的设计与开发和智能

16、手机移动端应用平台的推广与交互，已经成为了移动互联网行业的一个新兴的具有巨大发展前景的市场。1.3 项目的开发背景和目标与手机智能移动终端开发技术已经趋于成熟的发达国家市场相对比。目前，我国国内的手机智能移动终端开发市场还处于发展阶段。近几年来，在我国国内涌现出一批优秀的提供移动互联网推广方案的企业。他们专注于智能手机移动端应用软件APP的设计与开发，和在线式手机智能移动终端应用平台的产品推广，为企业的产品应用推广提供实时在线式的移动互联网讯息传播推广解决方案。就目前而言,我国手机智能移动终端应用开发服务范围已涵盖了我们生活中所遇到的方方面面的行业。在我们日常生活所涉及到的各种行业：商城、娱乐

17、、美容、服装、医疗、地产、酒店、汽车、传媒、旅游、服务等产业，基本上都已开通手机智能移动终端服务。在我国，已有众多的手机智能移动终端应用开发商致力于为各种企业提供一站式的移动互联网在线讯息传播推广应用解决方案。本次毕业设计的主要目标有以下几点。(1)根据近年来智能手机应用的发展趋势，从实用性，功能性和观赏性三个方面来分析用户对于一款优秀的手机APP应用应有那些需求；(2)根据用户各种不同的需求对本次毕业设计的APP程序做出功能模块划分；(3)进一步对本次毕业设计的APP应用的各个功能模块进行系统的分析与设计，并给出整个项目的设计开发流程；(4)在保证所设计的APP能满足分析所得的用户基本功能要

18、求的基础上，尽量附加上一些具有实用性的功能。2 动漫APP应用开发技术分析2.1 AppCan IDE平台介绍2.1.1 AppCan IDE 简介及安装本次毕业设计所使用的AppCan IDE移动应用开发平台 是由正益移动互联科技股份有限公司研发的基于HTML5开发语言的智能手机移动应用开发平台，AppCan IDE移动应用开发平台使得智能手机移动应用的设计与开发过程变得简单、快速、高效。其主要应用于开发目前市面上主流的Android系统、IOS系统应用。AppCan IDE移动应用开发平台使用了HTML5开发语言、CSS3样式设计和JavaScript直译式脚本语言等移动应用开发技术。移动

19、应用开人员可通过Appcan IDE移动应用开发平台内置的集成开发工具来进行编写开发混合式（Hybrid）跨平台移动应用。同时，北京正益无线所研发的AppCanIDE移动应用开发平台还具有连接互联网的在线编译系统以及云端打包功能，使得移动应用开发人员在完成移动应用的程序编写之后，能够快速的将其生成为Android平台、IOS平台上的本地应用。移动应用开发人员通过使用AppCan IDE移动应用开发平台内置的应用引擎所提供的与智能手机操作系统的原生（Naitve）交互功能，可以让使用HTML5开发语言所开发出来的移动应用拥有基本接近于原生应用（Native App）的交互体验。相比于以前传统的A

20、PP开发方式所存在的开发技术要求相对较高、开发周期长、项目维护难度大和终端适配难以控制等问题。Appcan平台为我们做了底层引擎支持和终端适配工作。而官方所提供的插件更是囊括了APP应用开发过程中所可能使用到的大部分功能模块。本次毕业设计所使用到的开发平台AppCan IDE，可以通过登录正益移动互联科技股份有限公司的官网 ，在正益公司的官网进行注册，然后下载AppCan IDE个人版，进行安装和使用。2.1.2 AppCan IDE 制作APP的打包模式(1)APP本地打包Appcan开发者使用Appcan平台提供的IDE开发工具，在本机上进行编写应用和打包生成应用安装包。AppCan ID

21、E的本地打包环境只是一个测试环境，如需正式发布打包，则需要进行云端打包，需要注意的是，使用AppCan IDE移动应用开发平台进行本地编译生成的iOS系统的ipa安装包是越狱安装包只能在越狱的iOS系统机上安装,并且不支持该将app上传到应用市场。(2)APP云端打包使用Appcan平台进行开发的时候开发者无需安装任何本地开发环境（甚至IDE都不是必须的），移动应用开发人员只需要按照Appcan IDE移动应用开发平台的开发流程和开发规范进行程序编写和开发，待应用程序编写完成后，可通过登录正益无线的SDK账号，所编写的程序代码上传到正益无线官网的appcan打包服务器进行应用程序编译(即所谓的

22、“云端打包”)，编译完成后，开发人员在官网平台的账号的应用管理内，会自动生成该应用程序的iOS系统或Android系统安装包，同时，云端打包生成移动应用可支持上传到应用市场。2.1.3 AppCan IDE 平台制作APP的优势(1) 采用HTML5开发语言、CSS3样式设计和JavaScript直译式脚本语言等移动应用开发技术进行移动应用的开发，可实现跨平台移动应用开发。能够实现一次APP应用程序开发，可编译适配多平台、多机型、多分辨率。(2) 支持混合应用（Hybrid App）开发模式和网页应用（web App）开发模式,混合应用（Hybrid App）开发模式集合了网页应用（web A

23、pp）开发模式和原生应用（Native App）开发模式两者优势。(3)应用开发速度快、开发方式上手容易、能节约开发成本。(4)官方提供了丰富的插件来满足app的开发，同时用户也可以提交和分享插件供其他开发者使用。(5)开放式的架构设计。Appcan IDE移动应用开发平台为开发人员提供了丰富的智能手机系统插件功能,同时允许开发者自行扩展插件进行插件定制化开发，具有自定义的智能手机系统原生（Native）插件扩展机制，可以满足开发人员对于自定义系统插件功能的的定制需求,是一个开放性的功能可扩展的移动应用开发平台。2.2 HTML5语言介绍2.2.1 HTML5语言简介2014年10月，W3C组

24、织(万维网联盟)完成了对网页（Web）编程语言最新的标准的制定，推出了HTML 5.01标准语言，是HTML系列标准语言的最新修订版本,*/是对W3C组织先前所发布的旧的html各系列版本的修正和完善,HTML5 基于旧版本HTML系列语言的普适性的标准之上,有了更强大的表现功能,HTML5语言,为网页的开发提供更加简洁语法特性。且HTML5 语言具有向后兼容性。W3C组织(万维网联盟)还为HTML5语言标准添加了许多新的语法标签特征，同时还集成了可缩放矢量图形（SVG）内容，为HTML5语言标准添加了动画，渐层，自型处理等画面动态显示功能，这使得HTML5语言具有了更强大的多媒体和图形处理能

25、力。2.2.2 HTML5语言的优势HTML5语言标准的主要优势在于它适用众多的操作系统平台,从计算机浏览器到智能手机移动端、平板电脑,甚至是智能电视，都可支持HTML5语言标准。而只要操作系统平台所使用的设备浏览器支持HTML5语言标准，那么使用HTML5语言标准进行编程开发的应用在此操作系统平台上就具有可行性(大多数浏览器都有着相同的运行方式)。而基于HTML5语言标准的普适性，使用HTML5语言标准进行移动应用程序编写开发的开发人员只需进行一次程序编写，就可以在多个操作系统平台进行该移动应用的编译，将其推广至各个操作系统平台,与基于操作系统平台进行应用程序编写开发和编译的原生应用（Nat

26、ive App）而言，使用能够多平台运行的HTML5语言标准进行应用程序编写开发和编译的移动应用，其在操作系统平台的移植上就存在着很大的优势2.3 AppCanIDE的UI样式的选择2.3.1 AppCanIDE的UI样式选择CSS3样式的原因(1)css3新增属性：.选择器的拓展：新增了许多不同的选择器标签，使得前端开发人员能利用这些标签更加灵活地对页面元素进行选择和控制。.页面布局的加强：新增弹性盒子模型，可布置长宽可伸缩的页面布局。.开放字体的支持：CSS3样式标准开放了对于页面字体的限制，使得前端开发人员可以对页面中的字体进行自定义，为不同的页面元素应用不同的字体。. 适配多终端的标准

27、：CSS3新增媒体查询功能，可以查询设备自身所定义的标准，使得前端开发人员不用为不同的设备基于设备本身的能力而定义不同的样式。.动画支持：具有transition（过渡）、transform（变换）、animation（动画）等多种动画效果表现。(2)Appcan IDE开发平台内部自带部分CSS3样式设置3 本次毕业设计的app应用开发系统分析3.1 AppCan IDE平台分析3.1.1 AppCan IDE平台系统可行性分析事实上，作为一次负责任的项目开发工程。在项目开发之前，先行对项目开发的可行性进行分析是非常有必要的，这样的一次分析，实际上就是该项目一次简化系统分析和系统设计的过程，

28、本次毕业设计的APP应用开发有以下四点的可行性分析：(1)技术可行性：当前绝大多数电脑的硬件配置都可以满足AppCan IDE对于安装环境的要求，使我们的app应用开发有了一个开发平台。而HTML5语言，与CSS3样式相较于原生语言而言更加简便，且适用性强。AppCan经过多年的发展与完善，其开发技术与相关脚本，插件，模板等也已经相当的成熟。(2)运行可行性：正益官网上可直接下载AppCan IDE，各种js脚本，应用插件，应用模板等。且本次毕业设计的所采用的AppCan IDE开发平台具有APP应用本地或云端打包，在线发布等功能。(3)法律可行性：AppCan是开放性的，所有的技术和代码都是

29、公开性的，免费的，每个人都有权利利用这个平台进行APP应用开发。(4)操作可行性:AppCan考查用户的习惯，统计各类APP应用设计，为用户提供了大量的应用模板，以及脚本，使得智能手机移动应用的系统设计和程序编写变得更加简单。3.2 系统结构的设计3.2.1 混合应用（Hybrid App）的开发模式介绍智能手机移动应用的混合应用(Hybrid App)开发模式，通常是一种基于第三方跨平台移动应用的引擎框架来进行程序的编程开发的一种移动应用开发模式。 在开发者所使用的各种移动开发框架中比较知名的有PhoneGap、AppCan等。这些移动应用开发平台的引擎框架，一般使用HTML5.01标准语言

30、和JavaScript直译式脚本语言作为移动应用的程序编程开发语言。这些开发平台的引擎框架可以调用智能手机操作系统的引擎所封装的底层功能，传感器功能、摄像机功能、通讯录功能、二维码功能等等。HTML5标准语言和JavaScript直译式脚本语言只是作为混合应用(Hybrid App)开发模式开发过程中一个应用程序编程时的解析语言，应用功能执行时真正调用的引擎功能都是与原生应用(Native App)一样的操作系统的引擎所封装的底层功能，这是和网页应用(Web App)的最大区别和不同。因为使用了浏览器支持解码技术,所以混合应用(Hybrid App)通常具有跨平台的特性，并且开发成本和网页应用

31、(Web App)接近,开发效率也远远高于原生应用(Native App)。用户编写的html界面通过平台引擎的WebView控件加载和渲染后不仅能够执行自身页面的JavaScript脚本还具备了调用原生插件所提供或暴露的接口功能的能力，整个调用过程完全是通过前端JavaScript脚本来完成的。通常是以浏览器技术加载显示的网络视图（WebView）作为用户界面层,以JavaScript直译式脚本语言作为智能手机与网络视图（WebView）互动的基本逻辑，使用JS脚本与中间件通讯，再由中间件访问操作系统平台底层的应用程序编程接口（API）的方式,进行应用开发。3.2.2 使用混合应用（Hybr

32、id App）开发模式的优势(1)Native App开发模式即原生应用开发模式：原生应用(Native App)开发模式，是指针对不同的智能手机操作系统平台环境，进行单独的移动应用程序编程开发的基于特定的智能手机操作系统平台的本地应用，其在技术实现上,一般采用特定的针对于不同智能手机之间各自操作系统平台的特定语言进行编写。如:使用面向对象设计的编程语言（Java）和 Android开发语言进行Android操作系统平台的移动应用的开发，和使用Objective-c开发语言进行IOS操作系统平台的移动应用的开发等。(2)Web App开发模式即网页应用开发模式网页应用(Web App)开发模式

33、所开发出来的移动应用APP,可以说就是一个可在手机端显示的触屏版。网页应用(Web App)开发模式完全使用HTML5标准语言、 JavaScript直译式脚本语言和CSS3样式设计等网页（Web）开发语言技术来进行移动应用的程序编程与开发。通过智能手机移动设备的浏览器来对所开发的移动应用进行访问。 缺点是使用网页应用(Web App)开发模式所开发出来的这些基于智能手机移动设备的浏览器进行访问的智能手机移动应用无法通过调用智能手机操作系统平台底层引擎封装的的应用程序编程接口(API)来实现一些高级功能,同时因为网页应用(Web App)需要通过移动设备的浏览器才能进行访问的局限性也不适合各种

34、高性能要求的场合。(3)Hybrid App开发模式即叫混合应用开发模式混合应用（Hybrid App）开发模式是一种介于原生应用（Native App）开发模式与网页应用（Web App）开发模式之间的智能手机App应用开发模式，顾名思义就是是网页应用（Web App）开发模式和原生应用（Native App）开发模式的结合体，混合应用（Hybrid App）开发模式自然继承了两者的优点。混合应用 （Hybrid App）开发模式所开发出来的混合应用（Hybrid App）兼具了“网页应用（Web App）的跨平台开发优势，使其不用局限于特定的某个手机系统进行开发，而是可以开发出适用于不同的

35、多个的手机系统的APP应用，其拥有网页 （Web）技术可以跨平台使用的多环境适用特性”和“原生应用（Native App）良好的用户交互体验的优势”。它可以使网页（Web）开发人员直接转型成为智能手机移动应用APP开发人员，而无需再次进行编程语言的学习或是培训，并且由于混合应用（Hybrid App）开发模式所开发的混合应用（Hybrid App）均使用相同的网页（Web）开发代码，因此只需将所开发的代码，针对不同的手机系统平台进行代码二次编译，就能实现程序代码一次性开发编写即可在多个手机系统平台上进行发布，而相较于网页应用(Web App)开发模式所开发的网页应用(Web App)的对操作系

36、统平台底层引擎封装功能调用的局限性，混合应用(Hybrid App)的开发人员可以通过包装好的底层引擎框架接口,调用大部分常用的智能手机操作系统平台底层引擎封装的应用程序编程接口(API)。 三种应用开发模式功能对比，见表3-1。表3-1 三种应用开发语言对比表Native AppWeb AppHybrid App开发语言原生语言ObjectC，Java，.net等网页语言HTML5+JS网页或原生语言皆可跨平台性高高高设备能力高低高开发难度高低低应用体验好差较好向后兼容差好好4 App的UI搭建和功能总体4.1 App的系统整体搭建本次毕业设计的app应用，其系统主体搭建框图如下图4-1所示

37、。详见附件一：系统文件图。app主界面以主窗口内嵌浮动窗口的模式表现 登录界面 可输入账户密码进行app服务器登录，获取用户资料，或通过“注册新账户”按钮进入注册界面浮动窗口按主题功能的不同分为多个浮动窗口，可通过主窗口底部的切换按钮进行切换主窗口可分为顶部搜索框，登录按钮，和底部浮动窗口切换按钮模块任意浮动窗口内嵌子功能页面按钮，可点击跳转至其他子功能页面子功能模块页面可返回主界面，或进行所需子功能操作注册界面可进行用户注册操作图4-1 系统主体构架图4.2 App的UI搭建4.2.1主界面结构分析本次毕业设计的app应用，其主体界面是一个组合窗口，由一个主窗口内嵌可切换式的浮动窗口组成。其

38、页面组成结构如图4-2所示。主窗口header主窗口footer浮动窗口部分区域浮动窗口浮动窗口图4-2 主界面UI组成结构图4.2.2 主界面程序流程分析建立主窗口headeruexWindow对象使用：appcan.window.uexOnload在主窗口加载完毕后，智能手机平台将触发appcan.window.uexOnload方法。类似的appcan.window.onload方法，都是在HTML页面加载完成 之后触发的方法。区别是，appcan.window.uexOnload方法的加载顺序会排在appcan.window.onload方法之后，原因是appcan.window.ue

39、xOnload方法的加载需要等 待AppCan扩展对象，即含有uex前缀的对象初始化完毕后才会开始加载。待调用方法的事件加载完成之后，可以安全的使用uex扩展对象。通过appcam.uexWindow.open方法打开的是一个主窗口，浮动窗口则通过uexWindow.openPopover方法进行创建。一个主窗口上的多个浮动窗口名字是唯一的，但不同主窗口上的两个或多个浮动窗口的名字则可以相同。(1)打开主窗口打开浮动窗口时可使用uexWindow.open方法。方法函数主体：uexWindow.open(city, 0, city_top.html, 10, , , 0);参数说明：见表4-1

40、。表4-1 uexWindow.open函数参数说明参数是否选用功能City必选窗口名称0必选窗口载入的数据的类型，0：url方 式载入；1：html内容方式载入city_top.html必选Url路径10必选窗口动画（由右往左切入）第一个必选窗口宽度。默认为屏幕宽度。第二个必选窗口高度。默认为屏幕高度。0必选窗口标记(2)打开浮动窗口。打开浮动窗口时可使用uexWindow.openPopver方法。方法函数主体：uexWindow.openPopover(popName, dataType, url, data, x, y, w, h, fontSize, flag)参数说明：见表4-2表

41、4-2 uexWindow.openPopover函数参数说明参数是否选用功能popName:(String类型)必选名称dataType:(Number类型)必选窗口载入 的数据的类型：0：url方式载入；1：html内容方式载入；2：既有url方式，又有html内容方式url:(String类型)必选url类型数据data:(String类型)必选data类型数据x:(Number类型)必选x坐标y:(Number类型)必选y坐标w:(Number类型)必选宽度，为空或为0时默认为window的宽度h:(Number类型)必选高度，为空或为0时默认为window的高度fontSize:(N

42、umber类型)必选字体大小flag:(Number类型)必选浮动窗口标记示例：function zy_con(id,url,x,y)var s=window.getComputedStyle($(id),null);uexWindow.openPopover(id,0,url,int(x),int(y),int(s.width),int(s.height),int(s.fontSize),0);uexWindow.evaluateScript(enterprise,0,resizePop();uexWindow.evaluatePopoverScript(addMsg,content,rep

43、ly();注：getComputedStyle（）方法获取的是最终应用在元素上的所有CSS属性对象。主窗口之间通讯，使用函数方法：uexWindow.evaluateScript(winName, type, script);主窗口与浮动窗口之间通讯，使用函方法：uexWindow.evaluatePopoverScript(winName, type, script);(3)关闭窗口.关闭主窗口关闭主窗口时可使用uexWindow.close方法。方法函数主体：uexWindow.close(animID)；参数说明：见表4-3表4-3 uexWindow.close函数参数说明参数是否选用

44、功能animID可选选项为空时无动画，-1时代表Open时指定动画的方向，其他数字指代不同动画效果。.关闭浮动窗口关闭主窗口时可使用uexWindow.close方法。方法函数主体：uexWindow.closePopover(popName)；参数说明：见表4-4表4-4 uexWindow.closePopover函数参数说明参数是否选用功能popName: (String类型)必选浮动窗口名称。4.3主窗口搭建4.3.1主窗口结构分析通过新建appcan的HTML页面，建立主界面的主窗口框架。由于本APP的主界面UI设计为主窗口内嵌浮动窗口模式。故而主窗口的结构设计比较简单。可分为三部分

45、组成：(1)主窗口顶部功能栏通过div划分区域，用类选择器class定义内容分布样式进行布局设置。包括：.具有搜索功能的搜索框：可通过输入搜索内容的关键字，查找所需要的内容。.扫码功能按钮：（本版本暂不使用，为以后与电脑版登录进行联动设置）。.登录功能按钮：点击可通过获取点击事件，执行进入软件登录界面动作。(2)主窗口中部主体框通过标签划分区域，使用类选择器class引入CSS3样式定义布局，使用id区分所需执行的点击事件，导入浮动窗口。(3)主窗口底部浮动窗口切换栏 通过标签划分区域，使用类选择器class引入CSS3样式定义布局，使用id区分所需执行的点击事件，导入tab标签切换函数。其结

46、构框图如图4-3所示主窗口footer浮动窗口部分区域登录功能按钮扫码功能按钮搜索框浮动窗口切换按钮图4-3 主窗口结构框图4.3.2主窗口程序流程分析(1)顶部功能栏.搜索功能框的实现，AppCan IDE内置模板为我们提供的很多方便快捷的功能模板，搜索功能框程序的实现，我们可以选址直接调用插入模板。也可以选择自己编写。本次毕业设计选择直接调用插入搜索框功能模板。.扫码功能按钮的实现，因预计未来功能需求，顾添加此按钮，但本次毕业设计暂不实现此按钮功能。.登录功能按钮的实现，通过标签，为登录按钮单独划分定位一个区域，设置该的id为“login”。通过appcan.button()方法，将登录按

47、钮区域作为一个按键，设置一个点击事件。当点击登录按钮时，获取点击事件，执行打开login.html页面动作，即软件界面切换至登录页面。(2)中部主体框通过标签，为中部主体框独立划分定位一个区域。设置区域id为”content”。通过自定义appcan.ready()方法为中部主体框填充一个浮动页面（即浮动窗口）。该方法函数还可与底部的tab标签栏内的按钮联系起来。以到达通过点击底部tab标签按钮对所填充的页面进行切换的效果。(3)底部切换栏通过标签，为底部切换栏划分独立定位一个区域。设置区域id为” tabview”。通过appcan.tab()方法为底部切换栏引入一个tab标签栏。标签内置按

48、钮。可通过点击tab标签栏内不同的按钮使与之对应的浮动窗口显示于主窗口之内。4.3.3程序函数分析(1)appcan.button(selector, css, callback)参数说明：见表4-5表4-5 appcan.button函数参数说明参数参数相关功能selector例如 .btn、div或#id。按钮的选择器，可同时处理多个按钮Css预置 ani-act和 btn-act两个参数按钮点击后的效果CSS类名称。callback回调函数中this代表点击的按钮按钮点击后的回调函数。(2)appcan.tab(参数)参数说明：见表4-6表4-6 appcan.tab函数参数说明参数参数

49、相关功能selector例“#tabview”定位执行函数位置hasIcontrue or false是否有图标hasAnimtrue or false切换时是否有动画hasLabeltrue or false是否有文字hasBadgetrue or false是否有badgedata按钮标签与图表等按钮标签与图表等4.4浮动窗口的搭建4.4.1浮动窗口结构分析通过新建独立的HTML页面，我们可以建立多个浮动窗口。本次毕业设计，按功能所需建立4个浮动窗口，分别为：首页（index_content.html），资讯（information.html），我的（my.html），更多（more.ht

50、ml）。其中：(1)首页页面为打开APP后，主界面自动加载的首个页面，其子功能为：动漫，漫画类型。模块划分为漫画模块和动漫模块。每个模块又细分为：国产类，日韩类，欧美类三个小模块。(2)资讯页面可从服务器后台获取当日上传的最新动漫资讯，以列表的形势加载表现。(3)个人主页页面可以在用户登录后，从服务器后台获取该账户的用户个人资料，加载到app中。可以调用用户浏览记录，收藏记录，个人设置，与系统消息等。(4)更多页面，其主要功能在于对app的一些设置进行个性化调整，给予用户更好的体验。同时具有清除缓存，更新版本的功能，使用户得以更好的使用本APP。其中个性化设置包括：开启夜间模式，是否接收系统新

51、消息通知，是否加载图片，调整字体大小等。更有意见反馈功能，便于收集用户对于本APP的使用体验，为APP版本升级的开发工作提供宝贵的意见。4.5登录与注册页面的搭建4.5.1登录界面结构分析登录界面可分为数据输入区，登录注册区与账号联动区三个分区。(1)数据输入区：用户可以在该区域输入账号，密码等数据(2)登录注册区：用户可以在该区域，通过点击“登录”按钮，进行用户登录；通过点击“立即注册”按钮，跳转到用户注册界面；通过点击“忘记密码”按钮，跳转到找回密码界面。(3)账号联动区：用户可通过点击账号联动区中的第三方图标，通过第三方账号登录APP。其结构框图如图4-4所示主窗口footer“返回”按

52、钮，点击可返回首页“登录”按钮数据输入区“忘记密码”按钮第三方图标账号联动区“立即注册”按钮登录注册区图4-4 登录界面结构框图 4.5.2注册界面结构分析注册界面可分为数据输入区与注册协议区，两个分区。(1)数据输入区：用户可以在该区域输入账号，密码等数据(2)注册协议区：用户可以通过点击“注册”按钮，进行账户注册操作；也可以通过点击“用户服务协议”按钮，进入用户服务协议界面，阅读用户服务协议。主窗口footer“返回”按钮，点击可返回登录页面“注册”按钮数据输入区“用户服务协议”按钮注册协议区其结构框图如图4-5所示图4-5 注册界面结构框图4.5.3登录与注册窗口程序流程分析(1)数据输

53、入区登录窗口与注册窗口的数据输入区我们可以出采用div标签划分区域，内嵌input标签获取数据的方式来实现。(2)“登录注册”与“注册协议”区“登录注册”与 “注册协议”区的本质是获取点击事件，对发生点击事件的按钮做出相应的处理。我们可以用appcan.button()方法来实现，其中的注册于登录功能，我们可以通过自定义函数方法进行网络数据请求。4.5.4程序函数分析(1)登录或注册操作是的数据请求方法appcan.request.ajax(url,type,dataType,success,error)参数说明：见表4-7详见附件二：登录数据请求方法。表4-7 appcan.request.ajax函数参数说明参数参数相关功能url服务器网址：端口/jdbc/login?phone= + phone + &pwd + pwd,数据请求的网络位置，端口，数据typeget数据请求类型dataTypejson数据请求方式successfunction(data,statu