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

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

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

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

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）運行APP（3）在SDK中打開項目 Ionic環(huán)境配置（1） 安裝Node.js （2） 安裝Ionic（3） 安裝cordova（4） 創(chuàng)建簡單的ionic項目建設(shè)制造強國121、node_modules文件夾是Ionic項目中Node各類依賴包 2、platf

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

6、擊輸入說明文字點擊輸入說明文字點擊輸入說明文字 任務(wù)實施06 任務(wù)總結(jié)任務(wù)技能任務(wù)實施任務(wù)總結(jié)任務(wù)描述 本項目通過Dancer時代登錄模塊的學(xué)習(xí)，能夠?qū)缙脚_開發(fā)技術(shù)的介紹及特性有所認識，對Ionic環(huán)境搭建及APK打包具有初步了解并能夠安裝Ionic插件，同時能夠掌握Ionic的項目結(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時代主界面模塊的實現(xiàn)項 目 二目 錄 01 學(xué)習(xí)目標(biāo) 02 學(xué)習(xí)路徑 03 任務(wù)描述 04 任務(wù)技能 05 任務(wù)實施 06 任務(wù)總結(jié)01 學(xué)習(xí)目標(biāo) 學(xué)習(xí)目標(biāo)010203了解Ionic的CSS組件掌握Ionic列表掌握Ionic使用輪播圖的步驟學(xué)習(xí)目標(biāo) 通過Dancer時代主界面模塊的實現(xiàn)，了解主界面的設(shè)計理念及功能實現(xiàn)，學(xué)習(xí)Ionic相關(guān)組件及如何應(yīng)用列

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

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

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

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

12、首頁輪播圖的制作第三步：輪播圖下方圖標(biāo)區(qū)域制作第四步：底部列表的制作，并添加頁面跳轉(zhuǎn)點擊輸入說明文字點擊輸入說明文字點擊輸入說明文字 任務(wù)實施06 任務(wù)總結(jié)任務(wù)技能任務(wù)實施任務(wù)總結(jié)任務(wù)描述 本項目通過對Dancer時代主界面模塊的學(xué)習(xí)，對Ionic相關(guān)組件及應(yīng)用列表布局的使用具有初步了解，對Ionic相關(guān)的導(dǎo)航及菜單欄的使用有所認識，同時掌握了Ionic使用組件實現(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時代音頻模塊的實現(xiàn)項 目 三目 錄 01 學(xué)習(xí)目標(biāo) 02 學(xué)習(xí)路徑 03 任務(wù)描述 04 任務(wù)技能 05 任務(wù)實施 06 任務(wù)總結(jié)01 學(xué)習(xí)目標(biāo) 學(xué)習(xí)目標(biāo)010203了解視頻、音頻播放功能的實現(xiàn)流程掌握Ionic彈出框的使用掌握Ionic手勢事件的實際應(yīng)用學(xué)習(xí)目標(biāo) 通過Dancer時代音頻

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

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

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

17、音樂播放05 任務(wù)實施輸入標(biāo)題輸入標(biāo)題第一步：創(chuàng)建音樂首界面、音樂播放界并進行相關(guān)配置第二步：音樂首界面的制作及跳轉(zhuǎn)的添加第三步：音樂播放界面制作第四步：音樂播放插件的添加以及播放功能的實現(xiàn)點擊輸入說明文字點擊輸入說明文字 任務(wù)實施06 任務(wù)總結(jié)任務(wù)技能任務(wù)實施任務(wù)總結(jié)任務(wù)描述 本項目通過Dancer時代音頻模塊的實現(xiàn)，對視頻、音頻播放功能的實現(xiàn)流程有所了解，掌握Ionic彈出框時間及插件的安裝及使用，并能夠根據(jù)所學(xué)的Ionic彈出框及事件的使用，插件的安裝實現(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時代上傳模塊的實現(xiàn)項 目 四目 錄 01 學(xué)習(xí)目標(biāo) 02 學(xué)習(xí)路徑 03 任務(wù)描述 04 任務(wù)技能 05 任務(wù)實施 06 任務(wù)總結(jié)01 學(xué)習(xí)目標(biāo) 學(xué)習(xí)目標(biāo)010203了解選擇設(shè)備本地文件的實

19、現(xiàn)流程學(xué)習(xí)Ionic下拉刷新的相關(guān)知識掌握Ionic選擇器的實際應(yīng)用學(xué)習(xí)目標(biāo) 通過Dancer時代上傳模塊的實現(xiàn)，了解選擇設(shè)備本地文件的實現(xiàn)流程，學(xué)習(xí)選擇文件功能所需插件的相關(guān)知識，掌握文件選擇插件的使用及Ionic的相關(guān)選擇器，具有獨立實現(xiàn)文件選擇、圖片預(yù)覽功能的能力。04具有獨立實現(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è)計了上傳模塊，該模塊主要包括兩個功能，分別是圖片預(yù)覽和文件上傳。用戶通過觀看舞蹈的相關(guān)的圖片感受舞蹈的

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

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

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

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

24、設(shè)備本地文件的實現(xiàn)流程具有一定的了解，對文件選擇插件的使用及Ionic的相關(guān)選擇器有所認識，能獨立實現(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時代分享模塊的實現(xiàn)項 目 五目 錄 01 學(xué)習(xí)目標(biāo) 02 學(xué)習(xí)路徑 03 任務(wù)描述 04 任務(wù)技能 05 任務(wù)實施 06 任務(wù)總結(jié)01 學(xué)習(xí)目標(biāo) 學(xué)習(xí)目標(biāo)010203了解分享功能的實現(xiàn)流程掌握指紋、分享等插件掌握地圖定位的申請步驟及使用學(xué)習(xí)目標(biāo) 通過Dancer時代分享模塊的實現(xiàn)，了解分享功能的實現(xiàn)流程，學(xué)習(xí)Ionic中指紋驗證、社交分享及地圖定位等插件，掌握分享插件的使用及地圖定位的申請步驟，具有獨立使用插件實現(xiàn)分享功能的能力。04具有獨立使用插件實現(xiàn)分享功能的能力02 學(xué)習(xí)路徑 學(xué)習(xí)路徑03 任務(wù)描述 01 情境導(dǎo)入 02 功能描述03 基

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

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

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

29、制作分享詳情界面，下載分享插件并進行功能的添加。第三步：創(chuàng)建發(fā)布界面并進行制作，當(dāng)點擊相機圖標(biāo)時彈出列表進行選擇。第四步：下載camera插件，當(dāng)點擊相冊時調(diào)取相冊，點擊拍照時調(diào)取相機。點擊輸入說明文字 任務(wù)實施06 任務(wù)總結(jié)任務(wù)技能任務(wù)實施任務(wù)總結(jié)任務(wù)描述 本項目通過Dancer時代分享模塊界面及功能的學(xué)習(xí)，對分享功能的實現(xiàn)流程具有一定的了解，對Ionic中指紋驗證、社交分享及地圖定位等插件有所認識，掌握了分享插件的使用及地圖定位的申請步驟。 任務(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時代我的模塊實現(xiàn)項 目 六目 錄 01 學(xué)習(xí)目標(biāo) 02 學(xué)習(xí)路徑 03 任務(wù)描述 04 任務(wù)技能 05 任務(wù)實施 06 任務(wù)總結(jié)01 學(xué)習(xí)目標(biāo) 學(xué)習(xí)目標(biāo)010203了解視頻錄制、二維碼掃描等實現(xiàn)流程學(xué)習(xí)二維碼掃描插件的相關(guān)知識及應(yīng)

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

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

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

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

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

37、04 任務(wù)技能 05 任務(wù)實施 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è)計大體完成。但項目負責(zé)人小李和他的開發(fā)團隊并不滿意界面內(nèi)容固定。因此，在本模塊中介紹了調(diào)用服務(wù)器后端的API接口。通過API接口與數(shù)據(jù)庫相連，及時更改數(shù)據(jù)，做到界面內(nèi)容實時更新，極大的程度吸引用戶。本模塊主要通過實現(xiàn)Dancer時代與后臺數(shù)據(jù)交互了解MongoDB數(shù)據(jù)庫安裝與測試。 功能描述使用AJAX實現(xiàn)接口的調(diào)用 01 02 03使用AJAX實現(xiàn)接口的調(diào)用使用Mongodb進行數(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個部分。而Postman針對這幾部分都有針對性的工具界面。第一步：打開官網(wǎng)（）下載postman插件 第二步：點擊打開下載好的Postman 第三步：在Postman里面輸入需要測試的接口地址 Postman安裝與使用示例（1）發(fā)送一個GET請求：比如向百度發(fā)送一個搜索請求。進入到postman界面中，選擇GET請求，把百度網(wǎng)址在輸入框中輸入。輸入完成之后，然后進行點擊send。（2）發(fā)送POST請求：POST表單提交，設(shè)置了請求方法、URL、參數(shù)，但沒有設(shè)置請求頭。安

40、裝1工程結(jié)構(gòu)2工作原理3第一步：安裝express。 第二步：使用命令新建項目，項目名稱為bloo。第三步：進入項目并安裝相關(guān)依賴。 第四步：啟動express。第五步：在瀏覽器中輸入http:/localhost:3000/，并查看輸出結(jié)果。app.js：啟動文件。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ā)效率并降低工程維護成本。簡介1安裝和服務(wù)的啟動2數(shù)據(jù)庫管理3MongoDB 數(shù)據(jù)庫旨在為 Web應(yīng)用提供可擴展的高性能數(shù)據(jù)存儲解決方案，它在多種場景下可用于替代傳統(tǒng)關(guān)系型數(shù)據(jù)庫的鍵/值存儲方式。具有高性能、易部署、易使用、易存儲等特點。第一步：下載msi 文件。第二步：下載后雙擊該文件進行安裝。第三步：指定一個文件夾存放數(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接口，是一個將JavaScript對象與數(shù)據(jù)庫產(chǎn)生聯(lián)系的框架。使用Mongoose可以新建數(shù)據(jù)庫、新建集合、對集合內(nèi)的文檔進行CRUD操作，其提供了Schema、Model和Do

43、cument對象，使操作更加方便。使用Mongoose完善數(shù)據(jù)持久化數(shù)據(jù)持久化1第一步：安裝Mongoose第二步：修改 app.js第三步：定義一個Schema 使用案例使用案例05 任務(wù)實施輸入標(biāo)題第一步：創(chuàng)建node項目，編寫驗證手機號是否存在的接口、注冊接口第二步：創(chuàng)建注冊界面并制作，添加ajax進行數(shù)據(jù)的交互第三步：編寫登錄接口第四步：在登錄界面添加ajax進行登錄接口的調(diào)用點擊輸入說明文字 任務(wù)實施06 任務(wù)總結(jié)任務(wù)技能任務(wù)實施任務(wù)總結(jié)任務(wù)描述 本項目通過Dancer時代前端和后臺的數(shù)據(jù)交互的實現(xiàn)，對Ionic程序和后臺交互的流程具有初步的了解，并詳細了解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時代發(fā)布項 目 八目 錄 01 學(xué)習(xí)目標(biāo) 02 學(xué)習(xí)路徑 03 任務(wù)描述 04 任務(wù)技能 05 任務(wù)實施 06 任務(wù)總結(jié)01 學(xué)習(xí)目標(biāo) 學(xué)習(xí)目標(biāo)010203了解Ionic項目在Android及IOS手機下的發(fā)布流程掌握如何發(fā)布Ionic項目具有能夠根據(jù)需求分析和設(shè)計制作并發(fā)布項目的能力學(xué)習(xí)目標(biāo) 通過發(fā)布Dancer時代項目，了解Ionic項目在Android及IOS手機下的發(fā)布流程，學(xué)習(xí)Ionic環(huán)境如何簽名和優(yōu)化APK，掌握如何發(fā)布Ionic項目，具有能夠根據(jù)需求分析和設(shè)計制作并發(fā)布項目的能力。02 學(xué)習(xí)路徑 學(xué)習(xí)路徑03 任務(wù)描述 01 情境導(dǎo)入 02 功能描述03 基本框架 04 開發(fā)環(huán)境 任務(wù)描述 情境導(dǎo)入當(dāng)完成與后臺數(shù)據(jù)交互后，需要對Dancer時代進行打包、測試、發(fā)布，才能正式被用戶所使用。目前手機版本主要為Android和IOS，因此，項目負責(zé)人Richard決定將Dancer時代生成Android和IOS應(yīng)用包并進行發(fā)布。本模塊主要通過對Dancer時代打包進行了解和操作，做出一個屬于自己的APP引用。 功能描述使用Ionic列表組件實現(xiàn)界面布局 01 02 03使用Ionic插件實現(xiàn)指紋識別、屏幕亮度調(diào)節(jié)等功能使用ionicbuildandr