Ionic項(xiàng)目實(shí)戰(zhàn) (1)教學(xué)課件

1、企業(yè)級(jí)卓越人才培養(yǎng)（信息類(lèi)專(zhuān)業(yè)集群） 01 學(xué)習(xí)目標(biāo) 02 學(xué)習(xí)路徑 03 任務(wù)描述 04 任務(wù)技能 05 任務(wù)實(shí)施 06 任務(wù)總結(jié)01 01 學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo) 學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)010203了解登錄功能的實(shí)現(xiàn)流程學(xué)習(xí)Ionic項(xiàng)目的基本結(jié)構(gòu)掌握Ionic項(xiàng)目的創(chuàng)建學(xué)習(xí)目標(biāo) 通過(guò)Dancer時(shí)代登錄模塊的實(shí)現(xiàn)，了解登錄功能的實(shí)現(xiàn)流程，學(xué)習(xí)Ionic框架的優(yōu)缺點(diǎn)，掌握Ionic所需軟件的安裝及環(huán)境的配置，具有解決登錄驗(yàn)證的實(shí)現(xiàn)過(guò)程中出現(xiàn)問(wèn)題的能力。04具有解決登錄驗(yàn)證的實(shí)現(xiàn)過(guò)程中出現(xiàn)問(wèn)題的能力企業(yè)級(jí)卓越人才培養(yǎng)（信息類(lèi)專(zhuān)業(yè)集群）02 02 學(xué)習(xí)路徑學(xué)習(xí)路徑 學(xué)習(xí)路徑學(xué)習(xí)路徑企業(yè)級(jí)卓越人才培養(yǎng)（信息

2、類(lèi)專(zhuān)業(yè)集群）03 03 任務(wù)描述任務(wù)描述 01 情境導(dǎo)入 02 功能描述03 基本框架 04 開(kāi)發(fā)環(huán)境 任務(wù)描述任務(wù)描述企業(yè)級(jí)卓越人才培養(yǎng)（信息類(lèi)專(zhuān)業(yè)集群） 情境導(dǎo)入情境導(dǎo)入在這個(gè)衣食無(wú)憂(yōu)，科技發(fā)達(dá)的時(shí)代，越來(lái)越多的人開(kāi)始追求精神上的需求，而舞蹈正是滿(mǎn)足大眾需求的一種文化形式。經(jīng)過(guò)討論，項(xiàng)目負(fù)責(zé)人Richard和他的開(kāi)發(fā)團(tuán)隊(duì)決定開(kāi)發(fā)一款手機(jī)軟件，讓更多的人在學(xué)習(xí)舞蹈的同時(shí)也可以了解舞蹈中蘊(yùn)含的文化。Richard等人將該軟件命名為：“Dancer時(shí)代”。Dancer時(shí)代主要包括五個(gè)模塊，分別為：登錄、首頁(yè)、上傳、分享、我的。本模塊主要通過(guò)實(shí)現(xiàn)Dancer時(shí)代的登錄功能了解Ionic的基礎(chǔ)知識(shí)和

3、基本的項(xiàng)目結(jié)構(gòu)。企業(yè)級(jí)卓越人才培養(yǎng)（信息類(lèi)專(zhuān)業(yè)集群） 功能描述功能描述使用Ionic輪播組件實(shí)現(xiàn)輪播圖效果 01 02 03 04使用路由進(jìn)行頁(yè)面的跳轉(zhuǎn)使用輸入框組件實(shí)現(xiàn)輸入框的樣式使用ngModel進(jìn)行數(shù)據(jù)的雙向綁定企業(yè)級(jí)卓越人才培養(yǎng)（信息類(lèi)專(zhuān)業(yè)集群） 基本框架基本框架企業(yè)級(jí)卓越人才培養(yǎng)（信息類(lèi)專(zhuān)業(yè)集群）04 04 任務(wù)技能任務(wù)技能010203任務(wù)技能跨平臺(tái)移動(dòng)開(kāi)發(fā)框架Ionic環(huán)境配置Ionic項(xiàng)目結(jié)構(gòu)跨平臺(tái)移動(dòng)開(kāi)發(fā)框架簡(jiǎn)介1跨平臺(tái)移動(dòng)開(kāi)發(fā)框架2跨平臺(tái)移動(dòng)開(kāi)發(fā)框架選擇3跨平臺(tái)移動(dòng)開(kāi)發(fā)框架是一種在不依賴(lài)操作系統(tǒng)和不依賴(lài)硬件環(huán)境的情況下，通過(guò)打包工具適配輸出可以在多種移動(dòng)操作系統(tǒng)上運(yùn)行的開(kāi)發(fā)框

4、架。它具有減少軟件開(kāi)發(fā)、維護(hù)的費(fèi)用，提高軟件使用時(shí)間的特點(diǎn)標(biāo)準(zhǔn)化、開(kāi)發(fā)資源豐富是跨平臺(tái)移動(dòng)開(kāi)發(fā)最大的優(yōu)點(diǎn)，第三方框架工具（Cordova等）為其提供方便的跨平臺(tái)應(yīng)用打包/發(fā)布服務(wù)、實(shí)用的API、靈活的擴(kuò)展機(jī)制、以及積累下來(lái)的豐富的第三方API實(shí)現(xiàn)。 跨平臺(tái)移動(dòng)開(kāi)發(fā)框架跨平臺(tái)移動(dòng)開(kāi)發(fā)框架在對(duì)跨平臺(tái)移動(dòng)開(kāi)發(fā)框架進(jìn)行初步的了解后，從項(xiàng)目開(kāi)發(fā)的角度看，使用Ionic框架可以有效利用Angular的特性，極大的提供HTML5應(yīng)用開(kāi)發(fā)效率、質(zhì)量、模塊化程度。使用Ionic開(kāi)發(fā)，相比較其他框架代碼量減少，開(kāi)發(fā)速度提高。企業(yè)級(jí)卓越人才培養(yǎng)（信息類(lèi)專(zhuān)業(yè)集群）Ionic基本環(huán)境安裝1在Window下打包APK2在

5、Apple OSX下的打包APK3（1） 安裝JDK （2） 安裝SDK（1） 安裝Xcode （2）運(yùn)行APP（3）在SDK中打開(kāi)項(xiàng)目 Ionic環(huán)境配置環(huán)境配置企業(yè)級(jí)卓越人才培養(yǎng)（信息類(lèi)專(zhuān)業(yè)集群）（1） 安裝Node.js （2） 安裝Ionic（3） 安裝cordova（4） 創(chuàng)建簡(jiǎn)單的ionic項(xiàng)目建設(shè)制造強(qiáng)國(guó)121、node_modules文件夾是Ionic項(xiàng)目中Node各類(lèi)依賴(lài)包 2、platform文件夾是項(xiàng)目打包APK時(shí)需要的文件夾，打包完成后會(huì)自動(dòng)生成在該文件夾下。3、plugins文件夾中是項(xiàng)目中所需的cordova插件 4、src文件夾中是項(xiàng)目最重要的文件夾，主要用來(lái)編輯

6、和配置顯示的內(nèi)容。頁(yè)面跳轉(zhuǎn)功能:（1）創(chuàng)建頁(yè)面（2）頁(yè)面配置（3）在新界面取值 Ionic項(xiàng)目結(jié)構(gòu)項(xiàng)目結(jié)構(gòu)Ionic項(xiàng)目結(jié)構(gòu)Ionic 案例企業(yè)級(jí)卓越人才培養(yǎng)（信息類(lèi)專(zhuān)業(yè)集群）05 05 任務(wù)實(shí)施任務(wù)實(shí)施輸入標(biāo)題輸入標(biāo)題輸入標(biāo)題第一步：打開(kāi)命令行，進(jìn)入想要?jiǎng)?chuàng)建項(xiàng)目的目錄下，運(yùn)行ionic start myapp blank -v2創(chuàng)建一個(gè)有一個(gè)界面的項(xiàng)目第二步：創(chuàng)建登錄首界面并進(jìn)行頁(yè)面制作第三步：創(chuàng)建登錄界面，進(jìn)行登錄首界面跳轉(zhuǎn)到登錄界面第四步：進(jìn)行登錄界面制作點(diǎn)擊輸入說(shuō)明文字點(diǎn)擊輸入說(shuō)明文字點(diǎn)擊輸入說(shuō)明文字 任務(wù)實(shí)施任務(wù)實(shí)施企業(yè)級(jí)卓越人才培養(yǎng)（信息類(lèi)專(zhuān)業(yè)集群）06 06 任務(wù)總結(jié)任務(wù)總結(jié)任務(wù)技能任務(wù)技能任務(wù)實(shí)施任務(wù)實(shí)施任務(wù)任務(wù)總結(jié)總結(jié)任務(wù)描述任務(wù)描述 本項(xiàng)目通過(guò)Dancer時(shí)代登錄模塊的學(xué)習(xí)，能夠?qū)缙脚_(tái)開(kāi)發(fā)技術(shù)的介紹及特性有所認(rèn)識(shí)，對(duì)Ionic環(huán)境搭建及APK打包具有初步了解并能夠安裝Ionic插件，同時(shí)能夠掌握Ionic的項(xiàng)目結(jié)構(gòu)及應(yīng)用Ionic創(chuàng)建界面的本事。 任務(wù)總結(jié)任務(wù)總結(jié)企業(yè)級(jí)卓越人才培養(yǎng)（信息類(lèi)專(zhuān)業(yè)集群）謝謝觀賞PPT模板下載： 行業(yè)PP