Ionic項(xiàng)目實(shí)戰(zhàn)完整版課件全書電子教案教材課件(完整)

1、Dancer時(shí)代登錄模塊實(shí)現(xiàn)項(xiàng) 目 一目 錄 01 學(xué)習(xí)目標(biāo) 02 學(xué)習(xí)路徑 03 任務(wù)描述 04 任務(wù)技能 05 任務(wù)實(shí)施 06 任務(wù)總結(jié)01 學(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) 通過Dancer時(shí)代登錄模塊的實(shí)現(xiàn)，了解登錄功能的實(shí)現(xiàn)流程，學(xué)習(xí)Ionic框架的優(yōu)缺點(diǎn)，掌握Ionic所需軟件的安裝及環(huán)境的配置，具有解決登錄驗(yàn)證的實(shí)現(xiàn)過程中出現(xiàn)問題的能力。04具有解決登錄驗(yàn)證的實(shí)現(xiàn)過程中出現(xiàn)問題的能力02 學(xué)習(xí)路徑 學(xué)習(xí)路徑03 任務(wù)描述 01 情境導(dǎo)入 02 功能描述03 基本框架 04 開發(fā)環(huán)境 任務(wù)描述 情境導(dǎo)入

2、在這個(gè)衣食無憂，科技發(fā)達(dá)的時(shí)代，越來越多的人開始追求精神上的需求，而舞蹈正是滿足大眾需求的一種文化形式。經(jīng)過討論，項(xiàng)目負(fù)責(zé)人Richard和他的開發(fā)團(tuán)隊(duì)決定開發(fā)一款手機(jī)軟件，讓更多的人在學(xué)習(xí)舞蹈的同時(shí)也可以了解舞蹈中蘊(yùn)含的文化。Richard等人將該軟件命名為：“Dancer時(shí)代”。Dancer時(shí)代主要包括五個(gè)模塊，分別為：登錄、首頁、上傳、分享、我的。本模塊主要通過實(shí)現(xiàn)Dancer時(shí)代的登錄功能了解Ionic的基礎(chǔ)知識和基本的項(xiàng)目結(jié)構(gòu)。 功能描述使用Ionic輪播組件實(shí)現(xiàn)輪播圖效果 01 02 03 04使用路由進(jìn)行頁面的跳轉(zhuǎn)使用輸入框組件實(shí)現(xiàn)輸入框的樣式使用ngModel進(jìn)行數(shù)據(jù)的雙向綁定

3、 基本框架04 任務(wù)技能010203任務(wù)技能跨平臺移動(dòng)開發(fā)框架Ionic環(huán)境配置Ionic項(xiàng)目結(jié)構(gòu)跨平臺移動(dòng)開發(fā)框架簡介1跨平臺移動(dòng)開發(fā)框架2跨平臺移動(dòng)開發(fā)框架選擇3跨平臺移動(dòng)開發(fā)框架是一種在不依賴操作系統(tǒng)和不依賴硬件環(huán)境的情況下，通過打包工具適配輸出可以在多種移動(dòng)操作系統(tǒng)上運(yùn)行的開發(fā)框架。它具有減少軟件開發(fā)、維護(hù)的費(fèi)用，提高軟件使用時(shí)間的特點(diǎn)標(biāo)準(zhǔn)化、開發(fā)資源豐富是跨平臺移動(dòng)開發(fā)最大的優(yōu)點(diǎn)，第三方框架工具（Cordova等）為其提供方便的跨平臺應(yīng)用打包/發(fā)布服務(wù)、實(shí)用的API、靈活的擴(kuò)展機(jī)制、以及積累下來的豐富的第三方API實(shí)現(xiàn)。 跨平臺移動(dòng)開發(fā)框架在對跨平臺移動(dòng)開發(fā)框架進(jìn)行初步的了解后，從項(xiàng)

4、目開發(fā)的角度看，使用Ionic框架可以有效利用Angular的特性，極大的提供HTML5應(yīng)用開發(fā)效率、質(zhì)量、模塊化程度。使用Ionic開發(fā)，相比較其他框架代碼量減少，開發(fā)速度提高。Ionic基本環(huán)境安裝1在Window下打包APK2在Apple OSX下的打包APK3（1） 安裝JDK （2） 安裝SDK（1） 安裝Xcode （2）運(yùn)行APP（3）在SDK中打開項(xiàng)目 Ionic環(huán)境配置（1） 安裝Node.js （2） 安裝Ionic（3） 安裝cordova（4） 創(chuàng)建簡單的ionic項(xiàng)目建設(shè)制造強(qiáng)國121、node_modules文件夾是Ionic項(xiàng)目中Node各類依賴包 2、platf

5、orm文件夾是項(xiàng)目打包APK時(shí)需要的文件夾，打包完成后會自動(dòng)生成在該文件夾下。3、plugins文件夾中是項(xiàng)目中所需的cordova插件 4、src文件夾中是項(xiàng)目最重要的文件夾，主要用來編輯和配置顯示的內(nèi)容。頁面跳轉(zhuǎn)功能:（1）創(chuàng)建頁面（2）頁面配置（3）在新界面取值 Ionic項(xiàng)目結(jié)構(gòu)Ionic項(xiàng)目結(jié)構(gòu)Ionic 案例05 任務(wù)實(shí)施輸入標(biāo)題輸入標(biāo)題輸入標(biāo)題第一步：打開命令行，進(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)行頁面制作第三步：創(chuàng)建登錄界面，進(jìn)行登錄首界面跳轉(zhuǎn)到登錄界面第四步：進(jìn)行登錄界面制作點(diǎn)

6、擊輸入說明文字點(diǎn)擊輸入說明文字點(diǎn)擊輸入說明文字 任務(wù)實(shí)施06 任務(wù)總結(jié)任務(wù)技能任務(wù)實(shí)施任務(wù)總結(jié)任務(wù)描述 本項(xiàng)目通過Dancer時(shí)代登錄模塊的學(xué)習(xí)，能夠?qū)缙脚_開發(fā)技術(shù)的介紹及特性有所認(rèn)識，對Ionic環(huán)境搭建及APK打包具有初步了解并能夠安裝Ionic插件，同時(shí)能夠掌握Ionic的項(xiàng)目結(jié)構(gòu)及應(yīng)用Ionic創(chuàng)建界面的本事。 任務(wù)總結(jié)謝謝觀賞PPT模板下載：/moban/ 行業(yè)PPT模板：/hangye/ 節(jié)日PPT模板：/jieri/ PPT素材下載：/sucai/PPT背景圖片：/beijing/ PPT圖表下載：/tubiao/ 優(yōu)秀PPT下載：/xiazai/ PPT教程： /powerp

7、oint/ Word教程： /word/ Excel教程：/excel/ 資料下載：/ziliao/ PPT課件下載：/kejian/ 范文下載：/fanwen/ 試卷下載：/shiti/ 教案下載：/jiaoan/ PPT論壇： Dancer時(shí)代主界面模塊的實(shí)現(xiàn)項(xiàng) 目 二目 錄 01 學(xué)習(xí)目標(biāo) 02 學(xué)習(xí)路徑 03 任務(wù)描述 04 任務(wù)技能 05 任務(wù)實(shí)施 06 任務(wù)總結(jié)01 學(xué)習(xí)目標(biāo) 學(xué)習(xí)目標(biāo)010203了解Ionic的CSS組件掌握Ionic列表掌握Ionic使用輪播圖的步驟學(xué)習(xí)目標(biāo) 通過Dancer時(shí)代主界面模塊的實(shí)現(xiàn)，了解主界面的設(shè)計(jì)理念及功能實(shí)現(xiàn)，學(xué)習(xí)Ionic相關(guān)組件及如何應(yīng)用列

8、表實(shí)現(xiàn)布局，掌握Ionic使用輪播組件實(shí)現(xiàn)主界面模塊的輪播，具有使用Ionic組件實(shí)現(xiàn)主界面布局的能力。04使用Ionic組件實(shí)現(xiàn)主界面布局的能力02 學(xué)習(xí)路徑 學(xué)習(xí)路徑03 任務(wù)描述 01 情境導(dǎo)入 02 功能描述03 基本框架 04 開發(fā)環(huán)境 任務(wù)描述 情境導(dǎo)入對于一款手機(jī)軟件，其主界面是非常重要的，可以說它是直接影響軟件用戶數(shù)量的關(guān)鍵。所以界面設(shè)計(jì)人員Ellison在主界面的設(shè)計(jì)和美化上花了很大的心思，他在設(shè)計(jì)主界面時(shí)不僅考慮到軟件信息的宣傳還考慮了用戶使用軟件的便利性，所以Ellison在界面中添加了手機(jī)軟件中常用的輪播圖元素。主界面中還有視頻和音樂的推薦功能，點(diǎn)擊跳轉(zhuǎn)對應(yīng)界面可進(jìn)行視

9、頻和音頻的播放。本模塊主要通過實(shí)現(xiàn)Dancer時(shí)代的主界面了解Ionic的輪播圖和導(dǎo)航組件。 功能描述使用選項(xiàng)卡組件實(shí)現(xiàn)頁面的切換 01 02 03使用Ionic圖標(biāo)豐富APP頁面使用列表組件實(shí)現(xiàn)頁面的布局 基本框架04 任務(wù)技能01020304任務(wù)技能Ionic的CSS組件導(dǎo)航組件Ionic列表Ionic功能Ionic字體圖標(biāo)1按鈕2Ionic表單3ionIcons采用了TrueType字體實(shí)現(xiàn)圖標(biāo)樣式，有超過700個(gè)圖標(biāo)可供選擇。 Ionic的CSS組件建設(shè)制造強(qiáng)國12選項(xiàng)卡通過ion-tabs標(biāo)簽定義，選項(xiàng)使用ion-tab（ion-tab是ion-tabs的子標(biāo)簽，每個(gè)選項(xiàng)卡的選項(xiàng)都包

10、含一個(gè)相對應(yīng)的界面）標(biāo)簽定義。Ionic提供的側(cè)邊菜單通過點(diǎn)擊帶有menuToggle元素的標(biāo)簽，從當(dāng)前界面的側(cè)面滑入的導(dǎo)航，默認(rèn)情況下從左側(cè)劃入，通過設(shè)置side=right實(shí)現(xiàn)從右側(cè)滑入。 導(dǎo)航組件Ionic選項(xiàng)卡Ionic側(cè)欄菜單基本列表1列表分隔符2滑動(dòng)列表3列表分隔符可以用來將列表劃分成多個(gè)列表組，好處是使瀏覽者更方便查詢列表項(xiàng)。其實(shí)現(xiàn)方法是使用標(biāo)簽作為列表容器，通過標(biāo)簽將列表劃分為多個(gè)部分。滑動(dòng)列表通過向左或向右滑動(dòng)，以顯示一組隱藏的按鈕。通過在ion-list組件內(nèi)添加ion-item-sliding組件實(shí)現(xiàn)滑動(dòng)列表，添加標(biāo)簽包含滑動(dòng)出的按鈕。Ionic列表默認(rèn)情況下，基本列表之

11、間有分隔線，若要隱藏列表項(xiàng)之間的分隔線，只需在標(biāo)簽內(nèi)添加no-lines屬性。Ionic卡片1輪播組件2數(shù)據(jù)查詢3代碼結(jié)構(gòu)由輪播圖容器（標(biāo)簽）和輪播圖組件（標(biāo)簽）組成在Ionic項(xiàng)目中，當(dāng)列表數(shù)據(jù)過多時(shí)，要找一條特定的記錄就尤為困難，這時(shí)數(shù)據(jù)查詢功能就可以用到。其實(shí)現(xiàn)需要調(diào)用getItems()方法，調(diào)用該方法的觸發(fā)類型有三種。Ionic功能近年來卡片在前端設(shè)計(jì)使用越來越頻繁，卡片具有內(nèi)容顯示分層次、更加規(guī)整等特點(diǎn)，它是一個(gè)更好組織信息展示的工具。在設(shè)計(jì)移動(dòng)端應(yīng)用時(shí)，卡片會根據(jù)屏幕大小自適應(yīng)大小。05 任務(wù)實(shí)施輸入標(biāo)題輸入標(biāo)題輸入標(biāo)題第一步：創(chuàng)建選項(xiàng)卡、首頁、上傳、分享、我的界面并配置第二步：

12、首頁輪播圖的制作第三步：輪播圖下方圖標(biāo)區(qū)域制作第四步：底部列表的制作，并添加頁面跳轉(zhuǎn)點(diǎn)擊輸入說明文字點(diǎn)擊輸入說明文字點(diǎn)擊輸入說明文字 任務(wù)實(shí)施06 任務(wù)總結(jié)任務(wù)技能任務(wù)實(shí)施任務(wù)總結(jié)任務(wù)描述 本項(xiàng)目通過對Dancer時(shí)代主界面模塊的學(xué)習(xí)，對Ionic相關(guān)組件及應(yīng)用列表布局的使用具有初步了解，對Ionic相關(guān)的導(dǎo)航及菜單欄的使用有所認(rèn)識，同時(shí)掌握了Ionic使用組件實(shí)現(xiàn)主界面的布局和美化。 任務(wù)總結(jié)謝謝觀賞PPT模板下載：/moban/ 行業(yè)PPT模板：/hangye/ 節(jié)日PPT模板：/jieri/ PPT素材下載：/sucai/PPT背景圖片：/beijing/ PPT圖表下載：/tubiao

13、/ 優(yōu)秀PPT下載：/xiazai/ PPT教程： /powerpoint/ Word教程： /word/ Excel教程：/excel/ 資料下載：/ziliao/ PPT課件下載：/kejian/ 范文下載：/fanwen/ 試卷下載：/shiti/ 教案下載：/jiaoan/ PPT論壇： Dancer時(shí)代音頻模塊的實(shí)現(xiàn)項(xiàng) 目 三目 錄 01 學(xué)習(xí)目標(biāo) 02 學(xué)習(xí)路徑 03 任務(wù)描述 04 任務(wù)技能 05 任務(wù)實(shí)施 06 任務(wù)總結(jié)01 學(xué)習(xí)目標(biāo) 學(xué)習(xí)目標(biāo)010203了解視頻、音頻播放功能的實(shí)現(xiàn)流程掌握Ionic彈出框的使用掌握Ionic手勢事件的實(shí)際應(yīng)用學(xué)習(xí)目標(biāo) 通過Dancer時(shí)代音頻

14、模塊的實(shí)現(xiàn)，了解視頻、音頻播放功能的實(shí)現(xiàn)流程，學(xué)習(xí)Ionic彈出框的使用，掌握Ionic中插件的安裝和使用，具有獨(dú)立使用插件實(shí)現(xiàn)播放功能的能力。04具有獨(dú)立使用插件實(shí)現(xiàn)播放功能的能力02 學(xué)習(xí)路徑 學(xué)習(xí)路徑03 任務(wù)描述 01 情境導(dǎo)入 02 功能描述03 基本框架 04 開發(fā)環(huán)境 任務(wù)描述 情境導(dǎo)入在Dancer時(shí)代APP中，學(xué)習(xí)舞蹈最直觀的方式就是觀看視頻。一段完美的舞蹈離不開音樂的加入，有節(jié)奏的舞蹈才能引人注目。因此，Ellison綜合各個(gè)方面的需求在主頁中添加了播放視頻、音樂的入口，通過點(diǎn)擊進(jìn)入視頻界面，之后是推薦的精彩視頻列表，用戶可以通過翻閱列表選擇自己喜歡的視頻進(jìn)行觀看。點(diǎn)擊進(jìn)入

15、音樂界面后，用戶可以根據(jù)自己的喜好選擇音樂。本模塊主要通過實(shí)現(xiàn)Dancer時(shí)代的視頻、音頻播放功能了解Ionic彈出框和插件的使用。 功能描述使用navParams服務(wù)實(shí)現(xiàn)跳轉(zhuǎn)頁面的傳值 01 02 03使用videoplayer插件實(shí)現(xiàn)視頻的播放使用media插件實(shí)現(xiàn)音樂的播放 基本框架04 任務(wù)技能01020304任務(wù)技能Ionic彈出框常用事件插件簡介及使用音樂播放 模態(tài)框1對話框2上拉菜單3第一步：在html頁面中定義一個(gè)按鈕，并添加點(diǎn)擊事件。第二步：在對應(yīng)的ts文件引入ModalController。第三步：構(gòu)造ModalController。第四步：通過showAlert()實(shí)現(xiàn)模

16、態(tài)框的功能。第一步：在html頁面中定義一個(gè)按鈕，并添加點(diǎn)擊事件。第二步：在對應(yīng)的ts文件引入AlertController。第三步：構(gòu)造AlertController。第四步：通過showAlert()實(shí)現(xiàn)對話框的功能。 Ionic彈出框第一步：在html頁面中定義一個(gè)按鈕，并添加點(diǎn)擊事件。第二步：在對應(yīng)的ts文件引入ActionSheetController。第三步：構(gòu)造ActionSheetController。第四步：通過doConfirm()實(shí)現(xiàn)上拉菜單的功能。建設(shè)制造強(qiáng)國12 常用事件觸發(fā)事件生命周期事件建設(shè)制造強(qiáng)國12 插件簡介及使用cordova插件Camera插件1 音樂播放

17、音樂播放05 任務(wù)實(shí)施輸入標(biāo)題輸入標(biāo)題第一步：創(chuàng)建音樂首界面、音樂播放界并進(jìn)行相關(guān)配置第二步：音樂首界面的制作及跳轉(zhuǎn)的添加第三步：音樂播放界面制作第四步：音樂播放插件的添加以及播放功能的實(shí)現(xiàn)點(diǎn)擊輸入說明文字點(diǎn)擊輸入說明文字 任務(wù)實(shí)施06 任務(wù)總結(jié)任務(wù)技能任務(wù)實(shí)施任務(wù)總結(jié)任務(wù)描述 本項(xiàng)目通過Dancer時(shí)代音頻模塊的實(shí)現(xiàn)，對視頻、音頻播放功能的實(shí)現(xiàn)流程有所了解，掌握Ionic彈出框時(shí)間及插件的安裝及使用，并能夠根據(jù)所學(xué)的Ionic彈出框及事件的使用，插件的安裝實(shí)現(xiàn)Ionic更多的功能。 任務(wù)總結(jié)謝謝觀賞PPT模板下載：/moban/ 行業(yè)PPT模板：/hangye/ 節(jié)日PPT模板：/jieri

18、/ PPT素材下載：/sucai/PPT背景圖片：/beijing/ PPT圖表下載：/tubiao/ 優(yōu)秀PPT下載：/xiazai/ PPT教程： /powerpoint/ Word教程： /word/ Excel教程：/excel/ 資料下載：/ziliao/ PPT課件下載：/kejian/ 范文下載：/fanwen/ 試卷下載：/shiti/ 教案下載：/jiaoan/ PPT論壇： Dancer時(shí)代上傳模塊的實(shí)現(xiàn)項(xiàng) 目 四目 錄 01 學(xué)習(xí)目標(biāo) 02 學(xué)習(xí)路徑 03 任務(wù)描述 04 任務(wù)技能 05 任務(wù)實(shí)施 06 任務(wù)總結(jié)01 學(xué)習(xí)目標(biāo) 學(xué)習(xí)目標(biāo)010203了解選擇設(shè)備本地文件的實(shí)

19、現(xiàn)流程學(xué)習(xí)Ionic下拉刷新的相關(guān)知識掌握Ionic選擇器的實(shí)際應(yīng)用學(xué)習(xí)目標(biāo) 通過Dancer時(shí)代上傳模塊的實(shí)現(xiàn)，了解選擇設(shè)備本地文件的實(shí)現(xiàn)流程，學(xué)習(xí)選擇文件功能所需插件的相關(guān)知識，掌握文件選擇插件的使用及Ionic的相關(guān)選擇器，具有獨(dú)立實(shí)現(xiàn)文件選擇、圖片預(yù)覽功能的能力。04具有獨(dú)立實(shí)現(xiàn)文件選擇、圖片預(yù)覽功能的能力02 學(xué)習(xí)路徑 學(xué)習(xí)路徑03 任務(wù)描述 01 情境導(dǎo)入 02 功能描述03 基本框架 04 開發(fā)環(huán)境 任務(wù)描述 情境導(dǎo)入Ellison為了引起用戶對舞蹈的興趣，在Dancer時(shí)代中設(shè)計(jì)了上傳模塊，該模塊主要包括兩個(gè)功能，分別是圖片預(yù)覽和文件上傳。用戶通過觀看舞蹈的相關(guān)的圖片感受舞蹈的

20、魅力，了解舞蹈背后的文化。Ellison設(shè)計(jì)的文件上傳功能，使用戶可以上傳自己認(rèn)為有意義的圖片給他人欣賞，用于用戶之間的交流。本模塊主要通過實(shí)現(xiàn)Dancer時(shí)代的圖片預(yù)覽和文件上傳功能了解Ionic的訪問設(shè)備插件和圖片預(yù)覽。 功能描述情境入01使用ion-scroll標(biāo)簽實(shí)現(xiàn)圖片的水平滾動(dòng) 01 02 03 04使用photo-viewer插件實(shí)現(xiàn)照片的預(yù)覽使用file-chooser插件實(shí)現(xiàn)文件的選擇使用file-transfer插件實(shí)現(xiàn)文件的上傳 基本框架04 任務(wù)技能01020304任務(wù)技能Ionic選擇器插件訪問設(shè)備文件插件圖片預(yù)覽下拉刷新實(shí)現(xiàn)Ionic極光推送05日期選擇器1日歷選擇

21、器2地區(qū)選擇器3Ionic提供的DateTime組件可以直接設(shè)置日期。點(diǎn)擊從下往上滑出選擇器界面，在滑出的選擇器界面可以單獨(dú)選擇年、月、日等信息。(1)安裝Calendar插件(2)將插件引入項(xiàng)目并進(jìn)行配置(3)需要添加點(diǎn)擊事件，用來調(diào)取日歷選擇器(4)在對應(yīng)界面的ts文件中添加openCalendar()方法 Ionic選擇器插件(1)安裝單級/多級選擇插件(2)將插件引入項(xiàng)目并進(jìn)行配置(3)定義一個(gè)JSON選擇器（simpleColumns）(4)在對應(yīng)界面的ts文件中添加openCalendar()方法1(1)安裝插件(2)將插件引入項(xiàng)目并進(jìn)行配置(3)添加點(diǎn)擊事件，用于調(diào)取選擇設(shè)備文件

22、界面(4)在對應(yīng)界面的ts文件中添加方法 訪問設(shè)備文件插件訪問設(shè)備文件1圖片預(yù)覽是用戶點(diǎn)擊圖片列表中的任意一張圖片，點(diǎn)擊后圖片滿屏顯示。圖片預(yù)覽功能不僅在手機(jī)相冊中可以見到，微信查看頭像、聊天圖片等中也應(yīng)用廣泛。在使用之前需要進(jìn)行安裝。 圖片預(yù)覽圖片預(yù)覽建設(shè)制造強(qiáng)國12 懶加載是一種獨(dú)特而又強(qiáng)大的數(shù)據(jù)獲取方法，它能夠在用戶滾動(dòng)頁面的時(shí)候自動(dòng)獲取更多的數(shù)據(jù)，而新得到的數(shù)據(jù)不會影響原有數(shù)據(jù)的顯示，同時(shí)最大程度上減少服務(wù)器端的資源耗用。使用懶加載能夠減少程序啟動(dòng)時(shí)間和打包后的體積，而且可以方便的使用路由功能。下拉刷新是覆蓋在頁面上，適用于新聞?lì)惤缑?，?dāng)用戶需要獲取最新的內(nèi)容數(shù)據(jù)時(shí)，等待刷新完畢后最新

23、的數(shù)據(jù)即出現(xiàn)在下拉內(nèi)容區(qū)域的頂部。 下拉刷新實(shí)現(xiàn)懶加載下拉刷新1(1)到極光官網(wǎng)注冊賬號，新建應(yīng)用獲得appkey(2)引入極光插件(3)設(shè)置啟動(dòng)推送(4)到極光官網(wǎng)發(fā)送通知 Ionic極光推送Ionic極光推送05 任務(wù)實(shí)施輸入標(biāo)題第一步：上傳界面制作，使用ion-scroll表簽設(shè)置水平滾動(dòng)條第二步：下載添加圖片預(yù)覽插件，點(diǎn)擊圖片時(shí)實(shí)現(xiàn)圖片的放大第三步：彈出框功能的添加，點(diǎn)擊上傳按鈕后，彈出彈出框第四步：下載并添加文件選擇、上傳插件，并實(shí)現(xiàn)點(diǎn)擊選擇文件進(jìn)行文件選取的功能點(diǎn)擊輸入說明文字 任務(wù)實(shí)施06 任務(wù)總結(jié)任務(wù)技能任務(wù)實(shí)施任務(wù)總結(jié)任務(wù)描述 本項(xiàng)目通過Dancer時(shí)代上傳模塊的實(shí)現(xiàn)，對選擇

24、設(shè)備本地文件的實(shí)現(xiàn)流程具有一定的了解，對文件選擇插件的使用及Ionic的相關(guān)選擇器有所認(rèn)識，能獨(dú)立實(shí)現(xiàn)文件選擇、圖片預(yù)覽等功能。 任務(wù)總結(jié)謝謝觀賞PPT模板下載：/moban/ 行業(yè)PPT模板：/hangye/ 節(jié)日PPT模板：/jieri/ PPT素材下載：/sucai/PPT背景圖片：/beijing/ PPT圖表下載：/tubiao/ 優(yōu)秀PPT下載：/xiazai/ PPT教程： /powerpoint/ Word教程： /word/ Excel教程：/excel/ 資料下載：/ziliao/ PPT課件下載：/kejian/ 范文下載：/fanwen/ 試卷下載：/shiti/ 教案

25、下載：/jiaoan/ PPT論壇： Dancer時(shí)代分享模塊的實(shí)現(xiàn)項(xiàng) 目 五目 錄 01 學(xué)習(xí)目標(biāo) 02 學(xué)習(xí)路徑 03 任務(wù)描述 04 任務(wù)技能 05 任務(wù)實(shí)施 06 任務(wù)總結(jié)01 學(xué)習(xí)目標(biāo) 學(xué)習(xí)目標(biāo)010203了解分享功能的實(shí)現(xiàn)流程掌握指紋、分享等插件掌握地圖定位的申請步驟及使用學(xué)習(xí)目標(biāo) 通過Dancer時(shí)代分享模塊的實(shí)現(xiàn)，了解分享功能的實(shí)現(xiàn)流程，學(xué)習(xí)Ionic中指紋驗(yàn)證、社交分享及地圖定位等插件，掌握分享插件的使用及地圖定位的申請步驟，具有獨(dú)立使用插件實(shí)現(xiàn)分享功能的能力。04具有獨(dú)立使用插件實(shí)現(xiàn)分享功能的能力02 學(xué)習(xí)路徑 學(xué)習(xí)路徑03 任務(wù)描述 01 情境導(dǎo)入 02 功能描述03 基

26、本框架 04 開發(fā)環(huán)境 任務(wù)描述 情境導(dǎo)入Dancer時(shí)代的分享模塊將用戶之間的交流與互動(dòng)設(shè)計(jì)的更加全面。用戶可以將自己的感觸，看到的圖片上傳到軟件中，好友之間可以互相查看動(dòng)態(tài)、點(diǎn)贊、評論。也可以將動(dòng)態(tài)內(nèi)容分享到其他軟件中，實(shí)現(xiàn)了信息共享，解決了用戶使用軟件的局限性，增強(qiáng)了用戶的體驗(yàn)。本模塊主要通過實(shí)現(xiàn)Dancer時(shí)代的分享功能了解Ionic的社交分享SocialSharing插件和地圖定位。 功能描述使用JavaScript操作節(jié)點(diǎn)實(shí)現(xiàn)評論的添加 01 02 03使用social-sharing插件實(shí)現(xiàn)分享功能使用camera實(shí)現(xiàn)拍照或從相冊選擇圖片功能 基本框架04 任務(wù)技能0102030

27、4任務(wù)技能指紋驗(yàn)證加載指示器社交分享插件地圖定位1手機(jī)設(shè)備具有多種安全模式，如密碼、PIN、指紋驗(yàn)證等。目前，指紋驗(yàn)證被越來越多的用戶所使用的，用戶通過指紋即可進(jìn)行身份驗(yàn)證，它具有方便、快速、無需用戶記憶即可完成身份驗(yàn)證的特點(diǎn)。在Ionic中通過指紋驗(yàn)證插件可以實(shí)現(xiàn)這一效果。如果想實(shí)現(xiàn)該效果，在項(xiàng)目目錄中打開命令提示符，輸入命令安裝Fingerprint Auth插件。 指紋驗(yàn)證指紋驗(yàn)證1加載指示器是指加載效果覆蓋在界面內(nèi)容上面，以半透明的形式遮擋住界面中的內(nèi)容，加載結(jié)束后關(guān)閉指示器，以恢復(fù)用戶對應(yīng)用的使用。加載中指示器也可在指定時(shí)間后通過自動(dòng)關(guān)閉，默認(rèn)情況下它會顯示為旋轉(zhuǎn)的圓形。加載指示器在

28、頁面更改期間也會顯示，可通過dismissOnPageChange屬性設(shè)為true來禁用。ionSpinner提供了許多種旋轉(zhuǎn)加載的動(dòng)畫圖標(biāo)，當(dāng)界面加載時(shí)通過spinner設(shè)置呈現(xiàn)給用戶。 加載指示器加載指示器1在很多社交軟件中可以通過網(wǎng)絡(luò)以各種形式分享文件、圖片、網(wǎng)頁鏈接等，分享功能主要是依賴SocialSharing插件實(shí)現(xiàn)的，實(shí)現(xiàn)分享功能首先要下載并安裝SocialSharing插件。 社交分享插件社交分享插件1(1)注冊高德開發(fā)者(2)去控制臺創(chuàng)建應(yīng)用(3)獲取Key 地圖定位地圖定位05 任務(wù)實(shí)施輸入標(biāo)題第一步：分享界面制作，使用列表進(jìn)行頁面布局，當(dāng)點(diǎn)擊列表時(shí)進(jìn)行跳轉(zhuǎn)。第二步：創(chuàng)建并

29、制作分享詳情界面，下載分享插件并進(jìn)行功能的添加。第三步：創(chuàng)建發(fā)布界面并進(jìn)行制作，當(dāng)點(diǎn)擊相機(jī)圖標(biāo)時(shí)彈出列表進(jìn)行選擇。第四步：下載camera插件，當(dāng)點(diǎn)擊相冊時(shí)調(diào)取相冊，點(diǎn)擊拍照時(shí)調(diào)取相機(jī)。點(diǎn)擊輸入說明文字 任務(wù)實(shí)施06 任務(wù)總結(jié)任務(wù)技能任務(wù)實(shí)施任務(wù)總結(jié)任務(wù)描述 本項(xiàng)目通過Dancer時(shí)代分享模塊界面及功能的學(xué)習(xí)，對分享功能的實(shí)現(xiàn)流程具有一定的了解，對Ionic中指紋驗(yàn)證、社交分享及地圖定位等插件有所認(rèn)識，掌握了分享插件的使用及地圖定位的申請步驟。 任務(wù)總結(jié)謝謝觀賞PPT模板下載：/moban/ 行業(yè)PPT模板：/hangye/ 節(jié)日PPT模板：/jieri/ PPT素材下載：/sucai/PPT

30、背景圖片：/beijing/ PPT圖表下載：/tubiao/ 優(yōu)秀PPT下載：/xiazai/ PPT教程： /powerpoint/ Word教程： /word/ Excel教程：/excel/ 資料下載：/ziliao/ PPT課件下載：/kejian/ 范文下載：/fanwen/ 試卷下載：/shiti/ 教案下載：/jiaoan/ PPT論壇： Dancer時(shí)代我的模塊實(shí)現(xiàn)項(xiàng) 目 六目 錄 01 學(xué)習(xí)目標(biāo) 02 學(xué)習(xí)路徑 03 任務(wù)描述 04 任務(wù)技能 05 任務(wù)實(shí)施 06 任務(wù)總結(jié)01 學(xué)習(xí)目標(biāo) 學(xué)習(xí)目標(biāo)010203了解視頻錄制、二維碼掃描等實(shí)現(xiàn)流程學(xué)習(xí)二維碼掃描插件的相關(guān)知識及應(yīng)

31、用掌握Ionic插件的相關(guān)知識及應(yīng)用學(xué)習(xí)目標(biāo) 通過Dancer時(shí)代我的模塊的實(shí)現(xiàn)，了解視頻錄制、二維碼掃描、語音識別及數(shù)據(jù)存儲功能的實(shí)現(xiàn)流程，學(xué)習(xí)視頻錄制插件的相關(guān)知識，掌握二維碼掃描插件的實(shí)際應(yīng)用，具有使用Ionic插件實(shí)現(xiàn)功能的能力。04具有使用Ionic插件實(shí)現(xiàn)功能的能力02 學(xué)習(xí)路徑 學(xué)習(xí)路徑03 任務(wù)描述 01 情境導(dǎo)入 02 功能描述03 基本框架 04 開發(fā)環(huán)境 任務(wù)描述 情境導(dǎo)入至此，以舞蹈為背景的Dancer時(shí)代界面設(shè)計(jì)大體完成。但項(xiàng)目負(fù)責(zé)人Richard和他的開發(fā)團(tuán)隊(duì)并不滿意界面內(nèi)容固定。因此，在本模塊中介紹了調(diào)用服務(wù)器后端的API接口。通過API接口與數(shù)據(jù)庫相連，及時(shí)更改

32、數(shù)據(jù)，做到界面內(nèi)容實(shí)時(shí)更新，極大的程度吸引用戶。本模塊主要通過實(shí)現(xiàn)Dancer時(shí)代與后臺數(shù)據(jù)交互學(xué)習(xí)MongoDB數(shù)據(jù)庫安裝與測試。 功能描述情境入01使用AlertController組件實(shí)現(xiàn)彈出框功能 01 02 03 04使用media-capture插件實(shí)現(xiàn)錄制視頻功能使用barcode-scanner插件實(shí)現(xiàn)掃描二維碼功能使用高德地圖API接口實(shí)現(xiàn)定位功能 基本框架04 任務(wù)技能01020304任務(wù)技能媒體捕獲掃描二維碼語音識別撥打電話存儲數(shù)據(jù)051Ionic3提供了對音頻、圖片和視頻采集功能的插件-媒體捕獲插件（Media Capture），它與Camera API相比，不僅能獲取

33、圖像，還可以錄視頻或者音頻。實(shí)現(xiàn)媒體捕獲首先要安裝相關(guān)插件。 媒體捕獲媒體捕獲1掃描二維碼插件可用于調(diào)用系統(tǒng)設(shè)備的攝像頭，并自動(dòng)掃描條形碼，獲取條形碼的數(shù)據(jù)并將數(shù)據(jù)返回。 掃描二維碼掃描二維碼1語音識別的目標(biāo)是將用戶的語音詞匯內(nèi)容轉(zhuǎn)化為可讀的文字輸入，通常在語音撥號、發(fā)送消息、接受語音消息等功能中使用。用戶在不能手動(dòng)輸入文字或不能接收語音信息時(shí)，通過語音識別，將語音轉(zhuǎn)換為文字進(jìn)行接收與發(fā)送信息，大大方便了用戶的使用。使用SpeechRecognition插件即可實(shí)現(xiàn)撥打電話效果，在使用之前需要進(jìn)行安裝。 語音識別語音識別1使用電話溝通具有快速、方便、聯(lián)系廣泛等特點(diǎn)。通過撥打電話，即使距離再遠(yuǎn)，

34、無需見面，也能快速聯(lián)系。相比于信紙等通信方法，使用撥打電話溝通更清晰。使用CallNumber插件即可實(shí)現(xiàn)撥打電話效果，在使用之前需要進(jìn)行安裝。 撥打電話撥打電話建設(shè)制造強(qiáng)12 開發(fā)中，只要用戶登錄過一次，再次打開應(yīng)用程序，都會自動(dòng)填充用戶名和密碼，其實(shí)現(xiàn)是使用localStorage存儲。localStorage保存的數(shù)據(jù)一般是永久保存的，即使用戶關(guān)閉當(dāng)前web瀏覽器后重新啟動(dòng)，數(shù)據(jù)依然存在。通過SQLite也可以來存儲數(shù)據(jù)，通過SQL語句來實(shí)現(xiàn)相關(guān)存儲。當(dāng)在本機(jī)應(yīng)用環(huán)境運(yùn)行時(shí)，優(yōu)先選擇SQLite，其具有使用廣泛，穩(wěn)定等特點(diǎn)。在使用之前需要進(jìn)行安裝。 存儲數(shù)據(jù)localStorage存儲S

35、QLite存儲05 任務(wù)實(shí)施輸入標(biāo)題輸入標(biāo)題第一步：創(chuàng)建我的界面并將相關(guān)配置及美化第二步：當(dāng)點(diǎn)擊設(shè)置時(shí)跳轉(zhuǎn)至設(shè)置界面，當(dāng)點(diǎn)擊+圖標(biāo)時(shí)彈出列表第三步：下載視頻捕獲插件和掃描二維碼插件并添加，點(diǎn)擊我的視頻時(shí)調(diào)用攝像頭錄制視頻，點(diǎn)擊二維碼時(shí)掃描二維碼。點(diǎn)擊我的位置進(jìn)入地圖定位界面。第四步：引入高德地圖api接口，實(shí)現(xiàn)地圖定位功能點(diǎn)擊輸入說明文字點(diǎn)擊輸入說明文字 任務(wù)實(shí)施06 任務(wù)總結(jié)任務(wù)技能任務(wù)實(shí)施任務(wù)總結(jié)任務(wù)描述 本項(xiàng)目通過Dancer時(shí)代我的模塊的學(xué)習(xí)，對視頻錄制、二維碼掃描、語音識別及數(shù)據(jù)存儲功能的實(shí)現(xiàn)流程具有初步了解，對視頻錄制插件的相關(guān)知識有所認(rèn)識，同時(shí)掌握了二維碼掃描插件的實(shí)際應(yīng)用。 任

36、務(wù)總結(jié)謝謝觀賞PPT模板下載：/moban/ 行業(yè)PPT模板：/hangye/ 節(jié)日PPT模板：/jieri/ PPT素材下載：/sucai/PPT背景圖片：/beijing/ PPT圖表下載：/tubiao/ 優(yōu)秀PPT下載：/xiazai/ PPT教程： /powerpoint/ Word教程： /word/ Excel教程：/excel/ 資料下載：/ziliao/ PPT課件下載：/kejian/ 范文下載：/fanwen/ 試卷下載：/shiti/ 教案下載：/jiaoan/ PPT論壇： Ionic服務(wù)器模擬環(huán)境搭建項(xiàng) 目 七目 錄 01 學(xué)習(xí)目標(biāo) 02 學(xué)習(xí)路徑 03 任務(wù)描述

37、04 任務(wù)技能 05 任務(wù)實(shí)施 06 任務(wù)總結(jié)01 學(xué)習(xí)目標(biāo) 學(xué)習(xí)目標(biāo)010203了解Ionic程序和后臺交互的流程學(xué)習(xí)Postman、Express、MonogoDB的安裝及使用掌握MonogoDB的使用學(xué)習(xí)目標(biāo) 通過Ionic服務(wù)器模擬環(huán)境搭建的學(xué)習(xí)，了解Ionic程序和后臺交互的流程，學(xué)習(xí)Ionic服務(wù)器中Postman、Express、MonogoDB的安裝及使用，掌握MonogoDB的使用，具有搭建Ionic服務(wù)器環(huán)境的能力。04具有搭建Ionic服務(wù)器環(huán)境的能力02 學(xué)習(xí)路徑 學(xué)習(xí)路徑03 任務(wù)描述 01 情境導(dǎo)入 02 功能描述03 基本框架 04 開發(fā)環(huán)境 任務(wù)描述 情境導(dǎo)入至

38、此，以舞蹈為背景的Dancer時(shí)代界面設(shè)計(jì)大體完成。但項(xiàng)目負(fù)責(zé)人小李和他的開發(fā)團(tuán)隊(duì)并不滿意界面內(nèi)容固定。因此，在本模塊中介紹了調(diào)用服務(wù)器后端的API接口。通過API接口與數(shù)據(jù)庫相連，及時(shí)更改數(shù)據(jù)，做到界面內(nèi)容實(shí)時(shí)更新，極大的程度吸引用戶。本模塊主要通過實(shí)現(xiàn)Dancer時(shí)代與后臺數(shù)據(jù)交互了解MongoDB數(shù)據(jù)庫安裝與測試。 功能描述使用AJAX實(shí)現(xiàn)接口的調(diào)用 01 02 03使用AJAX實(shí)現(xiàn)接口的調(diào)用使用Mongodb進(jìn)行數(shù)據(jù)的存儲04 任務(wù)技能01020304任務(wù)技能Postman安裝與使用示例使用Express初始化創(chuàng)建API示例MongoDB安裝與測試使用Mongoose完善數(shù)據(jù)持久化使用

39、案例05簡介1安裝2使用說明3一般來說，所有的HTTP Request都分成URL、 method、headers和body4個(gè)部分。而Postman針對這幾部分都有針對性的工具界面。第一步：打開官網(wǎng)（）下載postman插件 第二步：點(diǎn)擊打開下載好的Postman 第三步：在Postman里面輸入需要測試的接口地址 Postman安裝與使用示例（1）發(fā)送一個(gè)GET請求：比如向百度發(fā)送一個(gè)搜索請求。進(jìn)入到postman界面中，選擇GET請求，把百度網(wǎng)址在輸入框中輸入。輸入完成之后，然后進(jìn)行點(diǎn)擊send。（2）發(fā)送POST請求：POST表單提交，設(shè)置了請求方法、URL、參數(shù)，但沒有設(shè)置請求頭。安

40、裝1工程結(jié)構(gòu)2工作原理3第一步：安裝express。 第二步：使用命令新建項(xiàng)目，項(xiàng)目名稱為bloo。第三步：進(jìn)入項(xiàng)目并安裝相關(guān)依賴。 第四步：啟動(dòng)express。第五步：在瀏覽器中輸入http:/localhost:3000/，并查看輸出結(jié)果。app.js：啟動(dòng)文件。package.json：存儲著工程的信息及模塊依賴。node_modules：存放 package.json 中安裝的模塊。public：存放 image、CSS、JS 等文件。routes：存放路由文件。views：存放視圖、模版文件。bin：存放可執(zhí)行文件 使用Express初始化創(chuàng)建API示例Express的工作原理是ro

41、utes中存放路由文件，views中存放視圖文件,而 index.ejs 文件中的 是 ejs 模板引擎的語句，可以將后臺傳遞來的 title 數(shù)據(jù)在頁面中顯示。使用Express大大減少了代碼函數(shù)，而且邏輯更為簡潔，所以使用Express可以提高開發(fā)效率并降低工程維護(hù)成本。簡介1安裝和服務(wù)的啟動(dòng)2數(shù)據(jù)庫管理3MongoDB 數(shù)據(jù)庫旨在為 Web應(yīng)用提供可擴(kuò)展的高性能數(shù)據(jù)存儲解決方案，它在多種場景下可用于替代傳統(tǒng)關(guān)系型數(shù)據(jù)庫的鍵/值存儲方式。具有高性能、易部署、易使用、易存儲等特點(diǎn)。第一步：下載msi 文件。第二步：下載后雙擊該文件進(jìn)行安裝。第三步：指定一個(gè)文件夾存放數(shù)據(jù)。第四步：配置Mong

42、o服務(wù)端。第五步：在命令提示符輸入 mongo命令。第六步：在瀏覽器輸入http:/localhost:27017/ MongoDB安裝與測試（1）數(shù)據(jù)庫操作：創(chuàng)建數(shù)據(jù)庫、添加數(shù)據(jù)庫、刪除數(shù)據(jù)庫、查看數(shù)據(jù)庫、查看數(shù)據(jù)庫名。（2）集合操作：創(chuàng)建集合、查看數(shù)據(jù)庫里的集合、刪除items集合。（3）文檔操作：文檔具有增、刪、改、查等操作。1Mongoose是一款易于使用的Web服務(wù)器，它可以嵌入其它應(yīng)用程序中，為其提供Web接口，是一個(gè)將JavaScript對象與數(shù)據(jù)庫產(chǎn)生聯(lián)系的框架。使用Mongoose可以新建數(shù)據(jù)庫、新建集合、對集合內(nèi)的文檔進(jìn)行CRUD操作，其提供了Schema、Model和Do

43、cument對象，使操作更加方便。使用Mongoose完善數(shù)據(jù)持久化數(shù)據(jù)持久化1第一步：安裝Mongoose第二步：修改 app.js第三步：定義一個(gè)Schema 使用案例使用案例05 任務(wù)實(shí)施輸入標(biāo)題第一步：創(chuàng)建node項(xiàng)目，編寫驗(yàn)證手機(jī)號是否存在的接口、注冊接口第二步：創(chuàng)建注冊界面并制作，添加ajax進(jìn)行數(shù)據(jù)的交互第三步：編寫登錄接口第四步：在登錄界面添加ajax進(jìn)行登錄接口的調(diào)用點(diǎn)擊輸入說明文字 任務(wù)實(shí)施06 任務(wù)總結(jié)任務(wù)技能任務(wù)實(shí)施任務(wù)總結(jié)任務(wù)描述 本項(xiàng)目通過Dancer時(shí)代前端和后臺的數(shù)據(jù)交互的實(shí)現(xiàn)，對Ionic程序和后臺交互的流程具有初步的了解，并詳細(xì)了解Ionic服務(wù)器中Post

44、man、Express、MonogoDB的安裝及使用，具有了搭建Ionic服務(wù)器環(huán)境的能力 任務(wù)總結(jié)謝謝觀賞PPT模板下載：/moban/ 行業(yè)PPT模板：/hangye/ 節(jié)日PPT模板：/jieri/ PPT素材下載：/sucai/PPT背景圖片：/beijing/ PPT圖表下載：/tubiao/ 優(yōu)秀PPT下載：/xiazai/ PPT教程： /powerpoint/ Word教程： /word/ Excel教程：/excel/ 資料下載：/ziliao/ PPT課件下載：/kejian/ 范文下載：/fanwen/ 試卷下載：/shiti/ 教案下載：/jiaoan/ PPT論壇：

45、Dancer時(shí)代發(fā)布項(xiàng) 目 八目 錄 01 學(xué)習(xí)目標(biāo) 02 學(xué)習(xí)路徑 03 任務(wù)描述 04 任務(wù)技能 05 任務(wù)實(shí)施 06 任務(wù)總結(jié)01 學(xué)習(xí)目標(biāo) 學(xué)習(xí)目標(biāo)010203了解Ionic項(xiàng)目在Android及IOS手機(jī)下的發(fā)布流程掌握如何發(fā)布Ionic項(xiàng)目具有能夠根據(jù)需求分析和設(shè)計(jì)制作并發(fā)布項(xiàng)目的能力學(xué)習(xí)目標(biāo) 通過發(fā)布Dancer時(shí)代項(xiàng)目，了解Ionic項(xiàng)目在Android及IOS手機(jī)下的發(fā)布流程，學(xué)習(xí)Ionic環(huán)境如何簽名和優(yōu)化APK，掌握如何發(fā)布Ionic項(xiàng)目，具有能夠根據(jù)需求分析和設(shè)計(jì)制作并發(fā)布項(xiàng)目的能力。02 學(xué)習(xí)路徑 學(xué)習(xí)路徑03 任務(wù)描述 01 情境導(dǎo)入 02 功能描述03 基本框架 04 開發(fā)環(huán)境 任務(wù)描述 情境導(dǎo)入當(dāng)完成與后臺數(shù)據(jù)交互后，需要對Dancer時(shí)代進(jìn)行打包、測試、發(fā)布，才能正式被用戶所使用。目前手機(jī)版本主要為Android和IOS，因此，項(xiàng)目負(fù)責(zé)人Richard決定將Dancer時(shí)代生成Android和IOS應(yīng)用包并進(jìn)行發(fā)布。本模塊主要通過對Dancer時(shí)代打包進(jìn)行了解和操作，做出一個(gè)屬于自己的APP引用。 功能描述使用Ionic列表組件實(shí)現(xiàn)界面布局 01 02 03使用Ionic插件實(shí)現(xiàn)指紋識別、屏幕亮度調(diào)節(jié)等功能使用ionicbuildandr