毕业论文-APP应用开发(13000字).doc

毕毕 业业 设设 计计 基于基于 AppCanAppCan IDEIDE 的动漫的动漫 appapp 应用开发应用开发 系 别 专 业 名 称 学 生 姓 名 学 号 指导教师姓名 职称 完成日期 2017 年 03 月 28 日 摘摘 要要 随着当代社会经济的发展 科技技术也随着人们的需求增长而不断发展着 而作为 人们日常生活中 沟通联系通讯以及娱乐乃至办公的便携式工具 其普及和发展也达 到了前所未有的高度 而 app 作为智能手机必不可缺的软件应用 其开发技术也是日 新月异 因此 为了在发展迅猛的网络时代中满足用户对智能手机应用的需求 以及 满足程序开发人员对于 app 开发的需求 我们将设计一款基于 AppCan IDE 的动漫 app 应用 动漫 app 的设计开发主要基于 AppCan IDE 开发平台和以 HTML5 为核心的编程语言 根据手机用户对 app 应用的操作需求来进行设计 主要有主界面 登录注册界面和子 功能界面等 其中主界面可细分为主窗口框和浮动窗口 浮动窗口是嵌套于主窗口框 内 根据设置的程序来回切换 展示不同的功能 基于 AppCan IDE 的动漫 app 应用分为以下四个浮动窗口 首页 资讯 个人主页 更多功能 除了这四个嵌套于主窗口内的浮动窗口以外 还添加了登录 注册等功能 且各个浮动窗口也内嵌了相应的子功能模块 该设计以 AppCan IDE 个人版 v4 0 1 为 开发环境 以 HTML5 为核心编程语言 以 CSS3 样式搭建的 App UI 为界面和以 appcan request ajax 方法函数作为数据上传与加载的工具来进行网络注册和登录请求 关键词 关键词 HTML5 Hybrid App AppCan IDE APP 应用 CSS3 样式的 APP 界面 UI 设计 I Abstract With 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 its 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 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 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 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 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 Based on a range of styles of UI design II 目目 录录 1 1 绪绪 论论 1 1 1 手机智能移动终端的发展背景 1 1 2 APP 的发展概况 1 1 3 项目的开发背景和目标 2 2 2 动漫动漫 APPAPP 应用开发技术分析应用开发技术分析 4 2 1 APPCAN IDE 平台介绍 4 2 1 1 AppCan IDE 简介及安装 4 2 1 2 AppCan IDE 制作 APP 的打包模式 4 2 1 3 AppCan IDE 平台制作 APP 的优势 5 2 2 HTML5 语言介绍 5 2 2 1 HTML5 语言简介 6 2 2 2 HTML5 语言的优势 6 2 3 APPCANIDE 的 UI 样式的选择 6 2 3 1 AppCanIDE 的 UI 样式选择 CSS3 样式的原因 6 3 3 本次毕业设计的本次毕业设计的 APPAPP 应用开发系统分析应用开发系统分析 8 3 1 APPCAN IDE 平台分析 8 3 1 1 AppCan IDE 平台系统可行性分析 8 3 2 系统结构的设计 8 3 2 1 混合应用 Hybrid App 的开发模式介绍 8 3 2 2 使用混合应用 Hybrid App 开发模式的优势 9 4 4 APPAPP 的的 UIUI 搭建和功能总体搭建和功能总体 12 4 1 APP的系统整体搭建 12 4 2 APP的 UI 搭建 13 4 2 1 主界面结构分析 13 4 2 2 主界面程序流程分析 13 4 3 主窗口搭建 16 4 3 1 主窗口结构分析 16 4 3 2 主窗口程序流程分析 18 4 3 3 程序函数分析 18 4 4 浮动窗口的搭建 19 III 4 4 1 浮动窗口结构分析 19 4 5 登录与注册页面的搭建 20 4 5 1 登录界面结构分析 20 4 5 2 注册界面结构分析 21 4 5 3 登录与注册窗口程序流程分析 22 4 5 4 程序函数分析 22 4 6 子功能页面的搭建 22 4 6 1 子功能页面结构分析 22 5 5 基于基于 APPCANAPPCAN IDEIDE 的动漫的动漫 APPAPP 应用开发的系统实现应用开发的系统实现 24 5 1 页面实现结果 24 5 1 1 主界面页面实现结果 24 5 1 2 登录与注册页面实现结果 27 5 1 3 搜索与子功能页面实现结果 28 6 6 结结 论论 30 参参 考考 文文 献献 31 附附 录录 32 附件一 系统文件图 32 附件二 登录数据请求方法 33 致致 谢谢 35 0 1 1 绪绪 论论 1 11 1 手机智能移动终端的发展背景手机智能移动终端的发展背景 在人类通讯历史上 通讯工具有烽火 狼烟 书信 传呼机 电话 手机等 其 中手机可以说得上是一个最伟大的发明 从其发明问世至今 已经有二十几个年头 手机在这二十几年的发展历史中 历经了多次的蜕变 而在手机的发展蜕变历史中 最为重大的一次革命 莫过于智能手机的出现 智能手机的出现 使得手机的功能不 再仅仅局限于收发短信 即时通话等通讯功能 与传统的手机通讯功能相比 智能手 机不仅可以实现收发短信 即时通话的功能 还可以实现用户随时随地连接因特网的 需求 实现更多智能化的办公 娱乐功能应用 在 2001 年的时候 爱立信公司发布了世界上第一款智能手机 采用 SymbianOS 系 统的 R380sc 智能手机 由此开启了智能手机大时代 世界上众手机生产商紧随爱立 信之后 也纷纷推出属于自己的智能手机 智能手机的研发与生产进入了一个蓬勃发 展的时代 时至今日 智能手机已然经历了十多年的发展 而与之相对应的 智能手 机应用也随之经历了极大的发展与变化 随着人们对于智能手机的外观美观性 体积便携性 功能实用性和价格性价比的 要求越来越高 智能手机应用开发的技术也随之得到不断的发展更新与完善 就早期的智能手机应用而言 其功能都是比较单调的 通常功能只有一种或两种 界面显示也比较简单粗糙 已经无法适应手机用户的越来越丰富功能需求 因此 我 们有必要开发出一款可以满足用户对于界面设计和功能需求的智能手机应用 1 21 2 APPAPP 的发展概况的发展概况 自从人类于 21 世纪步入高科技时代以来 电子信息科学技术的研究发展和更新变 化可谓是 士别三日当刮目相待 而通信技术的发展更可谓是风起云涌 手机作为一 种移动通信的工具 其发展变化更是令人目不暇接 自人类进入互联网时代以来 如 何方便 快捷 随时随地的连接互联网已成为人类一大迫切需求 自然而然的 可联 网的移动互联网式智能手机便应运而生 而可联网的智能手机的普及 也反向的推动 了移动互联网技术的推广与发展 与之相应的 手机智能移动终端软件 即 移动 1 APP 的研究开发与使用得到了极大的推广 据统计 仅在 2011 年一年内 在全球范 围内的各种智能手机应用就有着下载次数 382 亿的庞大数据 而互联网数据中心 IDC 以此为依据进行增长预估 智能手机应用下载量在 2016 年的时候 甚至会上 涨到 2327 亿次之多 凭借着占据空间的体积小 低重量方便随身携带 屏幕显示带触控功能 自带数码 摄像头 像素高清 无线网卡随时联网等等多样且人性化的用户体验 以装载运行 Android 系统的手机和装载运行 IOS 系统的手机为代表的智能手机等移动式通讯设备 已经在慢慢的介入现代企业的商务运行过程并逐渐使其运行模式发生变化 智能手机 移动式通讯设备等产品 原本被定义为消费类型设备 现在也逐渐开始介入商务应用 领域 从而导致了着力于研发产品商务销售推广应用的企业级产品应用推广厂商将产 品应用推广的研发重点从实体传媒或 PC 网端转移至手机移动端应用平台 乃至发展到 将手机移动端应用平台作为产品应用推广厂商提供产品和推广自身产品品牌 与消费 者接触交互信息 甚至是销售商品的一个渠道 可以说智能手机移动端应用 APP 的设 计与开发和智能手机移动端应用平台的推广与交互 已经成为了移动互联网行业的一 个新兴的具有巨大发展前景的市场 1 31 3 项目的开发背景和目标项目的开发背景和目标 与手机智能移动终端开发技术已经趋于成熟的发达国家市场相对比 目前 我国 国内的手机智能移动终端开发市场还处于发展阶段 近几年来 在我国国内涌现出一 批优秀的提供移动互联网推广方案的企业 他们专注于智能手机移动端应用软件 APP 的设计与开发 和在线式手机智能移动终端应用平台的产品推广 为企业的产品应用 推广提供实时在线式的移动互联网讯息传播推广解决方案 就目前而言 我国手机智能 移动终端应用开发服务范围已涵盖了我们生活中所遇到的方方面面的行业 在我们日 常生活所涉及到的各种行业 商城 娱乐 美容 服装 医疗 地产 酒店 汽车 传媒 旅游 服务等产业 基本上都已开通手机智能移动终端服务 在我国 已有众 多的手机智能移动终端应用开发商致力于为各种企业提供一站式的移动互联网在线讯 息传播推广应用解决方案 本次毕业设计的主要目标有以下几点 1 根据近年来智能手机应用的发展趋势 从实用性 功能性和观赏性三个方面来 2 分析用户对于一款优秀的手机 APP 应用应有那些需求 2 根据用户各种不同的需求对本次毕业设计的 APP 程序做出功能模块划分 3 进一步对本次毕业设计的 APP 应用的各个功能模块进行系统的分析与设计 并 给出整个项目的设计开发流程 4 在保证所设计的 APP 能满足分析所得的用户基本功能要求的基础上 尽量附加 上一些具有实用性的功能 3 2 2 动漫动漫 APPAPP 应用开发技术分析应用开发技术分析 2 12 1 A AppCanppCan IDEIDE 平台介绍平台介绍 2 1 12 1 1 AppCanAppCan IDEIDE 简介及安装简介及安装 本次毕业设计所使用的 AppCan IDE 移动应用开发平台 是由正益移动互联科技股 份有限公司研发的基于 HTML5 开发语言的智能手机移动应用开发平台 AppCan IDE 移 动应用开发平台使得智能手机移动应用的设计与开发过程变得简单 快速 高效 其 主要应用于开发目前市面上主流的 Android 系统 IOS 系统应用 AppCan IDE 移动应用开发平台使用了 HTML5 开发语言 CSS3 样式设计和 JavaScript 直译式脚本语言等移动应用开发技术 移动应用开人员可通过 Appcan IDE 移动应用开发平台内置的集成开发工具来进行编写开发混合式 Hybrid 跨平台移动 应用 同时 北京正益无线所研发的 AppCanIDE 移动应用开发平台还具有连接互联网 的在线编译系统以及云端打包功能 使得移动应用开发人员在完成移动应用的程序编 写之后 能够快速的将其生成为 Android 平台 IOS 平台上的本地应用 移动应用开发 人员通过使用 AppCan IDE 移动应用开发平台内置的应用引擎所提供的与智能手机操作 系统的原生 Naitve 交互功能 可以让使用 HTML5 开发语言所开发出来的移动应用 拥有基本接近于原生应用 Native App 的交互体验 相比于以前传统的 APP 开发方式所存在的开发技术要求相对较高 开发周期长 项目维护难度大和终端适配难以控制等问题 Appcan 平台为我们做了底层引擎支持和 终端适配工作 而官方所提供的插件更是囊括了 APP 应用开发过程中所可能使用到的 大部分功能模块 本次毕业设计所使用到的开发平台 AppCan IDE 可以通过登录正益移动互联科技 股份有限公司的官网 在正益公司的官网进行注册 然后下载 AppCan IDE 个人版 进行安装和使用 2 1 22 1 2 AppCanAppCan IDEIDE 制作制作 APPAPP 的打包模式的打包模式 1 APP 本地打包 4 Appcan 开发者使用 Appcan 平台提供的 IDE 开发工具 在本机上进行编写应用和打 包生成应用安装包 AppCan IDE 的本地打包环境只是一个测试环境 如需正式发布打 包 则需要进行云端打包 需要注意的是 使用 AppCan IDE 移动应用开发平台进行本 地编译生成的 iOS 系统的 ipa 安装包是越狱安装包只能在越狱的 iOS 系统机上安装 并 且不支持该将 app 上传到应用市场 2 APP 云端打包 使用 Appcan 平台进行开发的时候开发者无需安装任何本地开发环境 甚至 IDE 都 不是必须的 移动应用开发人员只需要按照 Appcan IDE 移动应用开发平台的开发流 程和开发规范进行程序编写和开发 待应用程序编写完成后 可通过登录正益无线的 SDK 账号 所编写的程序代码上传到正益无线官网的 appcan 打包服务器进行应用程序 编译 即所谓的 云端打包 编译完成后 开发人员在官网平台的账号的应用管理 内 会自动生成该应用程序的 iOS 系统或 Android 系统安装包 同时 云端打包生成 移动应用可支持上传到应用市场 2 1 32 1 3 AppCanAppCan IDEIDE 平台制作平台制作 APPAPP 的优势的优势 1 采用 HTML5 开发语言 CSS3 样式设计和 JavaScript 直译式脚本语言等移动应 用开发技术进行移动应用的开发 可实现跨平台移动应用开发 能够实现一次 APP 应 用程序开发 可编译适配多平台 多机型 多分辨率 2 支持混合应用 Hybrid App 开发模式和网页应用 web App 开发模式 混 合应用 Hybrid App 开发模式集合了网页应用 web App 开发模式和原生应用 Native App 开发模式两者优势 3 应用开发速度快 开发方式上手容易 能节约开发成本 4 官方提供了丰富的插件来满足 app 的开发 同时用户也可以提交和分享插件供 其他开发者使用 5 开放式的架构设计 Appcan IDE 移动应用开发平台为开发人员提供了丰富的智 能手机系统插件功能 同时允许开发者自行扩展插件进行插件定制化开发 具有自定义 的智能手机系统原生 Native 插件扩展机制 可以满足开发人员对于自定义系统插 件功能的的定制需求 是一个开放性的功能可扩展的移动应用开发平台 2 22 2 HTML5HTML5 语言介绍语言介绍 5 2 2 12 2 1 HTML5HTML5 语言简介语言简介 2014 年 10 月 W3C 组织 万维网联盟 完成了对网页 Web 编程语言最新的标准 的制定 推出了 HTML 5 01 标准语言 是 HTML 系列标准语言的最新修订版本 是对 W3C 组织先前所发布的旧的 html 各系列版本的修正和完善 HTML5 基于旧版本 HTML 系 列语言的普适性的标准之上 有了更强大的表现功能 HTML5 语言 为网页的开发提供更 加简洁语法特性 且 HTML5 语言具有向后兼容性 W3C 组织 万维网联盟 还为 HTML5 语言标准添加了许多新的语法标签特征 同时还 集成了可缩放矢量图形 SVG 内容 为 HTML5 语言标准添加了动画 渐层 自型处理 等画面动态显示功能 这使得 HTML5 语言具有了更强大的多媒体和图形处理能力 2 2 22 2 2 HTML5HTML5 语言的优势语言的优势 HTML5 语言标准的主要优势在于它适用众多的操作系统平台 从计算机浏览器到智 能手机移动端 平板电脑 甚至是智能电视 都可支持 HTML5 语言标准 而只要操作系 统平台所使用的设备浏览器支持 HTML5 语言标准 那么使用 HTML5 语言标准进行编程 开发的应用在此操作系统平台上就具有可行性 大多数浏览器都有着相同的运行方式 而基于 HTML5 语言标准的普适性 使用 HTML5 语言标准进行移动应用程序编写开 发的开发人员只需进行一次程序编写 就可以在多个操作系统平台进行该移动应用的 编译 将其推广至各个操作系统平台 与基于操作系统平台进行应用程序编写开发和编 译的原生应用 Native App 而言 使用能够多平台运行的 HTML5 语言标准进行应用 程序编写开发和编译的移动应用 其在操作系统平台的移植上就存在着很大的优势 2 32 3 AppCanIDEAppCanIDE 的的 UIUI 样式的选择样式的选择 2 3 12 3 1 AppCanIDEAppCanIDE 的的 UIUI 样式选择样式选择 CSS3CSS3 样式的原因样式的原因 1 css3 新增属性 选择器的拓展 新增了许多不同的选择器标签 使得前端开发人员能利用这些 标签更加灵活地对页面元素进行选择和控制 页面布局的加强 新增弹性盒子模型 可布置长宽可伸缩的页面布局 6 开放字体的支持 CSS3 样式标准开放了对于页面字体的限制 使得前端开发人 员可以对页面中的字体进行自定义 为不同的页面元素应用不同的字体 适配多终端的标准 CSS3 新增媒体查询功能 可以查询设备自身所定义的标 准 使得前端开发人员不用为不同的设备基于设备本身的能力而定义不同的样式 动画支持 具有 transition 过渡 transform 变换 animation 动画 等多种动画效果表现 2 Appcan IDE 开发平台内部自带部分 CSS3 样式设置 7 3 3 本次毕业设计的本次毕业设计的 appapp 应用开发系统分析应用开发系统分析 3 13 1 AppCanAppCan IDEIDE 平台分析平台分析 3 1 13 1 1 AppCanAppCan IDEIDE 平台系统可行性分析平台系统可行性分析 事实上 作为一次负责任的项目开发工程 在项目开发之前 先行对项目开发的 可行性进行分析是非常有必要的 这样的一次分析 实际上就是该项目一次简化系统 分析和系统设计的过程 本次毕业设计的 APP 应用开发有以下四点的可行性分析 1 技术可行性 当前绝大多数电脑的硬件配置都可以满足 AppCan IDE 对于安装 环境的要求 使我们的 app 应用开发有了一个开发平台 而 HTML5 语言 与 CSS3 样式 相较于原生语言而言更加简便 且适用性强 AppCan 经过多年的发展与完善 其开发 技术与相关脚本 插件 模板等也已经相当的成熟 2 运行可行性 正益官网上可直接下载 AppCan IDE 各种 js 脚本 应用插件 应用模板等 且本次毕业设计的所采用的 AppCan IDE 开发平台具有 APP 应用本地或云 端打包 在线发布等功能 3 法律可行性 AppCan 是开放性的 所有的技术和代码都是公开性的 免费的 每个人都有权利利用这个平台进行 APP 应用开发 4 操作可行性 AppCan 考查用户的习惯 统计各类 APP 应用设计 为用户提供了 大量的应用模板 以及脚本 使得智能手机移动应用的系统设计和程序编写变得更加 简单 3 23 2 系统结构的设计系统结构的设计 3 2 13 2 1 混合应用 混合应用 HybridHybrid AppApp 的开发模式 的开发模式介绍介绍 智能手机移动应用的混合应用 Hybrid App 开发模式 通常是一种基于第三方跨 平台移动应用的引擎框架来进行程序的编程开发的一种移动应用开发模式 在开发者所使用的各种移动开发框架中比较知名的有 PhoneGap AppCan 等 这些 移动应用开发平台的引擎框架 一般使用 HTML5 01 标准语言和 JavaScript 直译式脚 本语言作为移动应用的程序编程开发语言 8 这些开发平台的引擎框架可以调用智能手机操作系统的引擎所封装的底层功能 传感器功能 摄像机功能 通讯录功能 二维码功能等等 HTML5 标准语言和 JavaScript 直译式脚本语言只是作为混合应用 Hybrid App 开发模式开发过程中一个 应用程序编程时的解析语言 应用功能执行时真正调用的引擎功能都是与原生应用 Native App 一样的操作系统的引擎所封装的底层功能 这是和网页应用 Web App 的 最大区别和不同 因为使用了浏览器支持解码技术 所以混合应用 Hybrid App 通常具有跨平台的特 性 并且开发成本和网页应用 Web App 接近 开发效率也远远高于原生应用 Native App 用户编写的 html 界面通过平台引擎的 WebView 控件加载和渲染后不仅能够执行自 身页面的 JavaScript 脚本还具备了调用原生插件所提供或暴露的接口功能的能力 整 个调用过程完全是通过前端 JavaScript 脚本来完成的 通常是以浏览器技术加载显示的网络视图 WebView 作为用户界面层 以 JavaScript 直译式脚本语言作为智能手机与网络视图 WebView 互动的基本逻辑 使 用 JS 脚本与中间件通讯 再由中间件访问操作系统平台底层的应用程序编程接口 API 的方式 进行应用开发 3 2 23 2 2 使用混合应用 使用混合应用 HybridHybrid AppApp 开发模式的优势 开发模式的优势 1 Native App 开发模式 即原生应用开发模式 原生应用 Native App 开发模式 是指针对不同的智能手机操作系统平台环境 进行单独的移动应用程序编程开发的基于特定的智能手机操作系统平台的本地应用 其在技术实现上 一般采用特定的针对于不同智能手机之间各自操作系统平台的特定语 言进行编写 如 使用面向对象设计的编程语言 Java 和 Android 开发语言进行 Android 操作系统平台的移动应用的开发 和使用 Objective c 开发语言进行 IOS 操作 系统平台的移动应用的开发等 2 Web App 开发模式 即网页应用开发模式 9 网页应用 Web App 开发模式所开发出来的移动应用 APP 可以说就是一个可在手机 端显示的触屏版 网页应用 Web App 开发模式完全使用 HTML5 标准语言 JavaScript 直译式脚本 语言和 CSS3 样式设计等网页 Web 开发语言技术来进行移动应用的程序编程与开发 通过智能手机移动设备的浏览器来对所开发的移动应用进行访问 缺点是使用网页应用 Web App 开发模式所开发出来的这些基于智能手机移动设备 的浏览器进行访问的智能手机移动应用无法通过调用智能手机操作系统平台底层引擎 封装的的应用程序编程接口 API 来实现一些高级功能 同时因为网页应用 Web App 需 要通过移动设备的浏览器才能进行访问的局限性也不适合各种高性能要求的场合 3 Hybrid App 开发模式 即叫混合应用开发模式 混合应用 Hybrid App 开发模式是一种介于原生应用 Native App 开发模式与网 页应用 Web App 开发模式之间的智能手机 App 应用开发模式 顾名思义就是是网页 应用 Web App 开发模式和原生应用 Native App 开发模式的结合体 混合应用 Hybrid App 开发模式自然继承了两者的优点 混合应用 Hybrid App 开发模 式所开发出来的混合应用 Hybrid App 兼具了 网页应用 Web App 的跨平台开发 优势 使其不用局限于特定的某个手机系统进行开发 而是可以开发出适用于不同的 多个的手机系统的 APP 应用 其拥有网页 Web 技术可以跨平台使用的多环境适用 特性 和 原生应用 Native App 良好的用户交互体验的优势 它可以使网页 Web 开发人员直接转型成为智能手机移动应用 APP 开发人员 而 无需再次进行编程语言的学习或是培训 并且由于混合应用 Hybrid App 开发模式 所开发的混合应用 Hybrid App 均使用相同的网页 Web 开发代码 因此只需将所 开发的代码 针对不同的手机系统平台进行代码二次编译 就能实现程序代码一次性 开发编写即可在多个手机系统平台上进行发布 而相较于网页应用 Web App 开发模式 所开发的网页应用 Web App 的对操作系统平台底层引擎封装功能调用的局限性 混合 应用 Hybrid App 的开发人员可以通过包装好的底层引擎框架接口 调用大部分常用的 智能手机操作系统平台底层引擎封装的应用程序编程接口 API 三种应用开发模式功能对比 见表 3 1 10 表 3 1 三种应用开发语言对比表 Native AppWeb AppHybrid App 开发语言原生语言 ObjectC Java net 等 网页语言 HTML5 JS 网页或原生语 言皆可 跨平台性高高高 设备能力高低高 开发难度高低低 应用体验好差较好 向后兼容差好好 11 4 4 AppApp 的的 UIUI 搭建和功能总体搭建和功能总体 4 14 1 AppApp 的系统整体搭建的系统整体搭建 本次毕业设计的 app 应用 其系统主体搭建框图如下图 4 1 所示 详见附件一 系统文件图 图 4 1 系统主体构架图 app 主界面 以主窗口内嵌浮 动窗口的模式表现 登录界面 可输入账户密码进行 app 服务器登录 获取用户 资料 或通过 注册新账 户 按钮进入注册界面 浮动窗口 按主题功能的不同分 为多个浮动窗口 可通过 主窗口底部的切换按钮进 行切换 主窗口 可分为顶部搜索框 登录按钮 和底部浮动窗 口切换按钮模块 任意浮动窗口 内嵌子功能页面按钮 可点击跳转至其他子功能 页面 子功能模块页面 可返回主界面 或进 行所需子功能操作 注册界面 可进行用户注册操作 12 4 24 2 AppApp 的的 UIUI 搭建搭建 4 2 14 2 1 主界面结构分析主界面结构分析 本次毕业设计的 app 应用 其主体界面是一个组合窗口 由一个主窗口内嵌可切 换式的浮动窗口组成 其页面组成结构如图 4 2 所示 图 4 2 主界面 UI 组成结构图 4 2 24 2 2 主界面程序流程分析主界面程序流程分析 建立主窗口 header uexWindow 对象使用 appcan window uexOnload 在主窗口加载完毕后 智能手机平台将触发 appcan window uexOnload 方法 类 似的 appcan window onload 方法 都是在 HTML 页面加载完成 之后触发的方法 区别 是 appcan window uexOnload 方法的加载顺序会排在 appcan window onload 方法之 后 原因是 appcan window uexOnload 方法的加载需要等 待 AppCan 扩展对象 即含 有 uex 前缀的对象初始化完毕后才会开始加载 待调用方法的事件加载完成之后 可 以安全的使用 uex 扩展对象 通过 appcam uexWindow open 方法打开的是一个主窗口 浮动窗口则通过 uexWindow openPopover 方法进行创建 一个主窗口上的多个浮动窗口名字是唯一的 主窗口主窗口 headerheader 主窗口主窗口 footerfooter 浮动窗口部分区 域 浮动窗口 浮动窗口 13 但不同主窗口上的两个或多个浮动窗口的名字则可以相同 1 打开主窗口 打开浮动窗口时可使用 uexWindow open 方法 方法函数主体 uexWindow open city 0 city top html 10 0 参数说明 见表 4 1 表 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 14 表 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 Number 类型 必选字体大小 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 h eight int s fontSize 0 15 uexWindow evaluateScript enterprise 0 resizePop uexWindow evaluatePopoverScript addMsg content reply 注 getComputedStyle 方法获取的是最终应用在元素上的所有 CSS 属性对象 主窗口之间通讯 使用函数方法 uexWindow evaluateScript winName type script 主窗口与浮动窗口之间通讯 使用函方法 uexWindow evaluatePopoverScript winName type script 3 关闭窗口 关闭主窗口 关闭主窗口时可使用 uexWindow close 方法 方法函数主体 uexWindow close animID 参数说明 见表 4 3 表 4 3 uexWindow close 函数参数说明 参数是否选用功能 animID 可选选项为空时无动画 1 时代表 Open 时指定动画的方向 其他数字指代不同动画效果 关闭浮动窗口 关闭主窗口时可使用 uexWindow close 方法 方法函数主体 uexWindow closePopover popName 参数说明 见表 4 4 表 4 4 uexWindow closePopover 函数参数说明 参数是否选用功能 popName String 类型 必选浮动窗口名称 4 34 3 主窗口搭建主窗口搭建 4 3 14 3 1 主窗口结构分析主窗口结构分析 16 通过新建 appcan 的 HTML 页面 建立主界面的主窗口框架 由于本 APP 的主界面 UI 设计为主窗口内嵌浮动窗口模式 故而主窗口的结构设计比较简单 可分为三部分组成 1 主窗口顶部功能栏 通过 div 划分区域 用类选择器 class 定义内容分布样式进行布局设置 包括 具有搜索功能的搜索框 可通过输入搜索内容的关键字 查找所需要的内容 扫码功能按钮 本版本暂不使用 为以后与电脑版登录进行联动设置 登录功能按钮 点击可通过获取点击事件 执行进入软件登录界面动作 2 主窗口中部主体框 通过标签划分区域 使用类选择器 class 引入 CSS3 样式定义布局 使用 id 区分所需执行的点击事件 导入浮动窗口 3 主窗口底部浮动窗口切换栏 通过标签划分区域 使用类选择器 class 引入 CSS3 样式定义布局 使用 id 区分所需执行的点击事件 导入 tab 标签切换函数 其结构框图如图 4 3 所示 浮动窗口部分区 域 登录功能 按钮 扫码功能 按钮 搜索框 浮动窗口 切换按钮 17 图 4 3 主窗口结构框图 4 3 24 3 2 主窗口程序流程分析主窗口程序流程分析 1 顶部功能栏 搜索功能框的实现 AppCan IDE 内置模板为我们提供的很多方便快捷的功能模 板 搜索功能框程序的实现 我们可以选址直接调用插入模板 也可以选择自己编写 本次毕业设计选择直接调用插入搜索框功能模板 扫码功能按钮的实现 因预计未来功能需求 顾添加此按钮 但本次毕业设计 暂不实现此按钮功能 登录功能按钮的实现 通过标签 为登录按钮单独划分定位一个区域 设置该的 id 为 login 通过 appcan button 方法 将登录按钮区域作为一个按键 设置一个点击事件 当点击登录按钮时 获取点击事件 执行打开 login html 页面动 作 即软件界面切换至登录页面 2 中部主体框 通过标签 为中部主体框独立划分定位一个区域 设置区域 id 为 content 通过自定义 appcan ready 方法为中部主体框填充一个浮动页面 即浮动 窗口 该方法函数还可与底部的 tab 标签栏内的按钮联系起来 以到达通过点击底部 tab 标签按钮对所填充的页面进行切换的效果 3 底部切换栏 通过标签 为底部切换栏划分独立定位一个区域 设置区域 id 为 tabview 通过 appcan tab 方法为底部切换栏引入一个 tab 标签栏 标签内置按钮 可通过点击 tab 标签栏内不同的按钮使与之对应的浮动窗口显示于主窗口之内 4 3 34 3 3 程序函数分析程序函数分析 1 appcan button selector css callback 参数说明 见表 4 5 18 表 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 函数参数说明 参数参数相关功能 selector 例 tabview 定位执行函数位置 hasIcontrue or false 是否有图标 hasAnimtrue or false 切换时是否有动画 hasLabeltrue or false 是否有文字 hasBadgetrue or false 是否有 badge data 按钮标签与图表等按钮标签与图表等 4 44 4 浮动窗口的搭建浮动窗口的搭建 4 4 14 4 1 浮动窗口结构分析浮动窗口结构分析 通过新建独立的 HTML 页面 我们可以建立多个浮动窗口 本次毕业设计 按功能 所需建立 4 个浮动窗口 分别为 首页 index content html 资讯 information html 我的 my html 更多 more html 其中 1 首页页面为打开 APP 后 主界面自动加载的首个页面 其子功能为 动漫 漫 画类型 模块划分为漫画模块和动漫模块 每个模块又细分为 国产类 日韩类 欧 美类三个小模块 19 2 资讯页面可从服务器后台获取当日上传的最新动漫资讯 以列表的形势加载表 现 3 个人主页页面可以在用户登录后 从服务器后台获取该账户的用户个人资料 加载到 app 中 可以调用用户浏览记录 收藏记录 个人设置 与系统消息等 4 更多页面 其主要功能在于对 app 的一些设置进行个性化调整 给