畢業(yè)論文-基于AppCanIDE的動漫app應用開發(fā)

基于AppCan IDE的動漫app應用開發(fā)中文摘要：隨著當代社會經(jīng)濟的發(fā)展,科技技術也隨著人們的需求增長而不斷發(fā)展著，因此，為了在發(fā)展迅猛的網(wǎng)絡時代中滿足用戶對智能手機應用的需求，以及滿足程序開發(fā)人員對于app開發(fā)的需求，我們將設計一款基于AppCan IDE的動漫app應用。動漫app的設計開發(fā)主要基于AppCan IDE開發(fā)平臺和以HTML5為核心的編程語言，根據(jù)手機用戶對app應用的操作需求來進行設計，主要有主界面、登錄注冊界面和子功能界面等，其中主界面可細分為主窗口框和浮動窗口, 浮動窗口是嵌套于主窗口框內(nèi)，根據(jù)設置的程序來回切換，展示不同的功能。該設計以AppCan IDE個人版 v4.0.1為開發(fā)環(huán)境，以HTML5為核心編程語言，以CSS3樣式搭建的App UI為界面和以appcan.request.ajax方法函數(shù)作為數(shù)據(jù)上傳與加載的工具來進行網(wǎng)絡注冊和登錄請求。關鍵詞：HTML5 Hybrid App AppCan IDE APP應用Abstract：With the development of social economy, science and technology as people demand growth and development, 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 app 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 window 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 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 1 緒 論自從人類于21世紀步入高科技時代以來，電子信息科學技術的研究發(fā)展和更新變化可謂是日新月異。手機作為一種移動通信的工具，其發(fā)展變化更是令人目不暇接。隨著手機逐漸的高度智能化，已經(jīng)開始逐漸應用于商務領域。許多企業(yè)級軟件生產(chǎn)商已經(jīng)開始將項目的研發(fā)重點轉移到移動應用軟件上面。APP應用的開發(fā)與推廣已經(jīng)成為了移動互聯(lián)網(wǎng)行業(yè)的一個巨大市場。本次畢業(yè)設計的主要目標有以下幾點。(1)根據(jù)近年來智能手機應用的發(fā)展趨勢，從實用性，功能性和觀賞性三個方面來分析用戶對于一款優(yōu)秀的手機APP應用應有那些需求；(2)根據(jù)用戶各種不同的需求對本次畢業(yè)設計的APP程序做出功能模塊劃分；(3)進一步對本次畢業(yè)設計的APP應用的各個功能模塊進行系統(tǒng)的分析與設計，并給出整個項目的設計開發(fā)流程；(4)在保證所設計的APP能滿足分析所得的用戶基本功能要求的基礎上，盡量附加上一些具有實用性的功能。2 動漫APP應用開發(fā)技術分析2.1 開發(fā)平臺介紹本次畢業(yè)設計所使用的AppCan IDE移動應用開發(fā)平臺 是由正益移動互聯(lián)科技股份有限公司研發(fā)的基于HTML5開發(fā)語言的智能手機移動應用開發(fā)平臺，AppCan IDE移動應用開發(fā)平臺使得智能手機移動應用的設計與開發(fā)過程變得簡單、快速、高效。其主要應用于開發(fā)目前市面上主流的Android系統(tǒng)、IOS系統(tǒng)應用。2.2 開發(fā)語言介紹HTML5語言標準的主要優(yōu)勢在于它適用眾多的操作系統(tǒng)平臺,從計算機瀏覽器到智能手機移動端、平板電腦,甚至是智能電視，都可支持HTML5語言標準。而只要操作系統(tǒng)平臺所使用的設備瀏覽器支持HTML5語言標準，那么使用HTML5語言標準進行編程開發(fā)的應用在此操作系統(tǒng)平臺上就具有可行性(大多數(shù)瀏覽器都有著相同的運行方式)。3 本次畢業(yè)設計的app應用開發(fā)系統(tǒng)分析3.1 開發(fā)平臺系統(tǒng)可行性分析本次畢業(yè)設計的APP應用開發(fā)平臺有以下四點的可行性分析：(1)技術可行性：當前絕大多數(shù)電腦的硬件配置都可以滿足AppCan IDE對于安裝環(huán)境的要求，使我們的app應用開發(fā)有了一個開發(fā)平臺。而HTML5語言，與CSS3樣式相較于原生語言而言更加簡便，且適用性強。AppCan經(jīng)過多年的發(fā)展與完善，其開發(fā)技術與相關腳本，插件，模板等也已經(jīng)相當?shù)某墒臁?2)運行可行性：正益官網(wǎng)上可直接下載AppCan IDE，各種js腳本，應用插件，應用模板等。(3)法律可行性：AppCan IDE是開放性的，每個人都有權利利用這個平臺進行APP應用開發(fā)。(4)操作可行性:AppCan IDE為用戶提供了大量的應用模板，以及腳本，使得APP的系統(tǒng)設計和程序編寫變得更加簡單。3.2 開發(fā)模式可行性分析APP的Hybrid App開發(fā)模式，通常是一種基于第三方跨平臺移動應用的引擎框架來進行程序的編程開發(fā)的一種開發(fā)模式。一般使用HTML5語言和JavaScript語言作為APP的程序編程開發(fā)語言。這些開發(fā)平臺的引擎框架可以調(diào)用智能手機操作系統(tǒng)的引擎所封裝的底層功能。HTML5語言和JavaScript語言只是作為Hybrid App開發(fā)過程中一個應用程序編程時的解析語言，應用功能執(zhí)行時真正調(diào)用的引擎功能都是與Native App的底層功能。因為使用了瀏覽器支持解碼技術,所以Hybrid App通常具有跨平臺的特性，并且開發(fā)成本和Web App接近,開發(fā)效率也遠遠高于Native App。4 App的UI搭建和功能總體4.1 App的系統(tǒng)整體搭建本次畢業(yè)設計的app應用，其系統(tǒng)主體搭建框圖如下圖4-1所示。app主界面以主窗口內(nèi)嵌浮動窗口的模式表現(xiàn) 登錄界面 可輸入賬戶密碼進行app服務器登錄，獲取用戶資料，或通過“注冊新賬戶”按鈕進入注冊界面浮動窗口按主題功能的不同分為多個浮動窗口，可通過主窗口底部的切換按鈕進行切換主窗口可分為頂部搜索框，登錄按鈕，和底部浮動窗口切換按鈕模塊任意浮動窗口內(nèi)嵌子功能頁面按鈕，可點擊跳轉至其他子功能頁面子功能模塊頁面可返回主界面，或進行所需子功能操作注冊界面可進行用戶注冊操作圖4-1 系統(tǒng)主體構架圖4.2主界面結構及程序流程分析本次畢業(yè)設計的app應用，其主體界面是一個組合窗口，由一個主窗口內(nèi)嵌可切換式的多個浮動窗口組成。(1)打開主窗口，使用函數(shù)方法：appcan.Window.open(參數(shù));(2)打開浮動窗口，使用函數(shù)方法：uexWindow.openPopver(參數(shù));(3)主窗口之間通訊，使用函數(shù)方法：uexWindow.evaluateScript(winName, type, script);(4)主窗口與浮動窗口之間通訊，使用函方法：uexWindow.evaluatePopoverScript(參數(shù));4.3主窗口結構及程序流程分析通過新建appcan的HTML頁面，建立主界面的主窗口框架。可分為三部分組成：主窗口頂部功能欄；主窗口中部主體框；主窗口底部浮動窗口切換欄(1)按鈕函數(shù)（獲取點擊事件），使用函數(shù)方法：appcan.button(selector, css, callback)(2)切換浮動窗口，使用函數(shù)方法：appcan.tab(參數(shù))4.4浮動窗口結構及程序流程分析通過新建獨立的HTML頁面，我們可以建立多個浮動窗口。本次畢業(yè)設計，按功能所需建立4個浮動窗口，分別為：首頁，資訊，個人中心，系統(tǒng)設置。(1)首頁頁面為打開APP后，主界面自動加載的首個頁面，其子功能為：動漫，漫畫類型。模塊劃分為漫畫模塊和動漫模塊。 (2)資訊頁面可從服務器后臺獲取當日上傳的最新動漫資訊，以列表的形勢加載表現(xiàn)。(3)個人中心頁面可以在用戶登錄后，從服務器后臺獲取該賬戶的用戶個人資料，加載到app中。可以調(diào)用用戶瀏覽記錄，收藏記錄，個人設置，與系統(tǒng)消息等。(4)系統(tǒng)設置頁面，其主要功能在于對app的一些設置進行個性化調(diào)整，給予用戶更好的體驗。同時具有清除緩存，更新版本的功能，使用戶得以更好的使用本APP。(5)圖片輪播，使用函數(shù)方法：appcan.slider(參數(shù))。4.5登錄與注冊頁面結構及程序分析登錄與注冊界面可分為兩大區(qū)域(1)數(shù)據(jù)輸入?yún)^(qū)：用戶可以在該區(qū)域輸入賬號，密碼等數(shù)據(jù)(2)功能執(zhí)行區(qū)：用戶可以在該區(qū)域，通過點擊“登錄”或“注冊”按鈕，執(zhí)行所需功能。(3)數(shù)據(jù)網(wǎng)絡請求，使用函數(shù)方法：appcan.request.ajax(參數(shù))。5 基于AppCan IDE的動漫APP應用開發(fā)的系統(tǒng)實現(xiàn)5.1 頁面實現(xiàn)結果進入主界面，頁面可看到頂部搜索框，登錄按鈕；浮動窗口各個子功能模塊、熱門推薦，點擊榜，底部有浮動窗口切換按鈕等多種功能，展現(xiàn)了功能多樣性。打開登錄或注冊頁面，頁面可以看到頂部“返回”按鈕，數(shù)據(jù)輸入?yún)^(qū)，“登錄”按鈕，“注冊”按鈕，“忘記密碼”按鈕，底部頁面UI。整個頁面功能按鍵齊全，畫面整潔美觀。6 結 論進過三個月的不斷努力，這次畢業(yè)設計最終得以完成。通過這次畢業(yè)設計，我不僅了解到了HTML5的一些沒接觸過的知識，也鞏固了原有學習過的android課程，并且對HTML5語言，軟件開發(fā)環(huán)境和app開發(fā)語言、模式有了新的認識?，F(xiàn)如今的時代已是電子信息的時代，隨著智能手機的興起與發(fā)展，目前世界上的多數(shù)軟件開發(fā)商都已經(jīng)逐漸轉向APP開發(fā)市場。越來越多的開發(fā)人員正著力研究智能移動端應用開發(fā)，而動漫作為人民日常生活的一個娛樂元素，可以說是日漸壯大。根據(jù)市場目前的需求，設計開發(fā)一款界面好看，功能齊全且強大的動漫APP是非常具有實用性的。參 考 文 獻1韓超，梁泉.Android系統(tǒng)原理及開發(fā)要點詳解M.北京:電子工業(yè)出版社，20102陳剛.Java開發(fā)利器：Eclipse從入門到精通M.北京:清華大學出版社， 20053朱桂英.Android網(wǎng)絡開發(fā)技術實戰(zhàn)詳解M.北京:電子工業(yè)出版社， 20124王珊，陳紅.數(shù)據(jù)庫系統(tǒng)原理教程.北京：清華大學出版社，20045Bruce Eckel.Thinking in java(java編程思想)第四版.北京：機械工業(yè)出版社，20116林城.Android2.3 應用開發(fā)實戰(zhàn)J.機械工業(yè)出版社，20117鄭玲,鄭曉天.基于WebSocket的電力系統(tǒng)實時數(shù)據(jù)更新研究J.計算機與現(xiàn)代，20138王一平.面向Web服務通信安全模型D. 武漢科技大學，20099孫迪.軟件行為可信技術研究D.北京工業(yè)大學，201310姜毅，王兆青，曹麗.基于HTTP的實時信息傳輸方法J