Dancer時代登錄模塊實現(xiàn)項目一企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）目錄01學習目標02學習路徑03任務描述04任務技能05任務實施06任務總結01學習目標

學習目標了解登錄功能的實現(xiàn)流程學習Ionic項目的基本結構掌握Ionic項目的創(chuàng)建學習目標

通過Dancer時代登錄模塊的實現(xiàn)，了解登錄功能的實現(xiàn)流程，學習Ionic框架的優(yōu)缺點，掌握Ionic所需軟件的安裝及環(huán)境的配置，具有解決登錄驗證的實現(xiàn)過程中出現(xiàn)問題的能力。具有解決登錄驗證的實現(xiàn)過程中出現(xiàn)問題的能力企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）02學習路徑

學習路徑企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）03任務描述

01情境導入

任務描述企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）

情境導入在這個衣食無憂，科技發(fā)達的時代，越來越多的人開始追求精神上的需求，而舞蹈正是滿足大眾需求的一種文化形式。經(jīng)過討論，項目負責人Richard和他的開發(fā)團隊決定開發(fā)一款手機軟件，讓更多的人在學習舞蹈的同時也可以了解舞蹈中蘊含的文化。Richard等人將該軟件命名為：“Dancer時代”。Dancer時代主要包括五個模塊，分別為：登錄、首頁、上傳、分享、我的。本模塊主要通過實現(xiàn)Dancer時代的登錄功能了解Ionic的基礎知識和基本的項目結構。企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）

功能描述

01

02

03

04企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）

基本框架企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）04任務技能010203任務技能跨平臺移動開發(fā)框架Ionic環(huán)境配置Ionic項目結構跨平臺移動開發(fā)框架簡介跨平臺移動開發(fā)框架跨平臺移動開發(fā)框架選擇跨平臺移動開發(fā)框架是一種在不依賴操作系統(tǒng)和不依賴硬件環(huán)境的情況下，通過打包工具適配輸出可以在多種移動操作系統(tǒng)上運行的開發(fā)框架。它具有減少軟件開發(fā)、維護的費用，提高軟件使用時間的特點標準化、開發(fā)資源豐富是跨平臺移動開發(fā)最大的優(yōu)點，第三方框架工具（Cordova等）為其提供方便的跨平臺應用打包/發(fā)布服務、實用的API、靈活的擴展機制、以及積累下來的豐富的第三方API實現(xiàn)。

跨平臺移動開發(fā)框架在對跨平臺移動開發(fā)框架進行初步的了解后，從項目開發(fā)的角度看，使用Ionic框架可以有效利用Angular的特性，極大的提供HTML5應用開發(fā)效率、質量、模塊化程度。使用Ionic開發(fā)，相比較其他框架代碼量減少，開發(fā)速度提高。企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）Ionic基本環(huán)境安裝在Window下打包APK在AppleOSX下的打包APK3（1）安裝JDK

（2）安裝SDK（1）安裝Xcode

（2）運行APP（3）在SDK中打開項目

Ionic環(huán)境配置企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）（1）安裝Node.js（2）安裝Ionic（3）安裝cordova（4）創(chuàng)建簡單的ionic項目建設制造強國1、node_modules文件夾是Ionic項目中Node各類依賴包2、platform文件夾是項目打包APK時需要的文件夾，打包完成后會自動生成在該文件夾下。3、plugins文件夾中是項目中所需的cordova插件4、src文件夾中是項目最重要的文件夾，主要用來編輯和配置顯示的內容。頁面跳轉功能:（1）創(chuàng)建頁面（2）頁面配置（3）在新界面取值

Ionic項目結構Ionic項目結構Ionic案例企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）05任務實施輸入標題輸入標題輸入標題第一步：打開命令行，進入想要創(chuàng)建項目的目錄下，運行ionicstartmyappblank--v2創(chuàng)建一個有一個界面的項目第二步：創(chuàng)建登錄首界面并進行頁面制作第三步：創(chuàng)建登錄界面，進行登錄首界面跳轉到登錄界面第四步：進行登錄界面制作點擊輸入說明文字點擊輸入說明文字點擊輸入說明文字

任務實施企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）06任務總結任務技能任務實施任務總結任務描述

本項目通過Dancer時代登錄模塊的學習，能夠對跨平臺開發(fā)技術的介紹及特性有所認識，對Ionic環(huán)境搭建及APK打包具有初步了解并能夠安裝Ionic插件，同時能夠掌握Ionic的項目結構及應用Ionic創(chuàng)建界面的本事。

任務總結企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）謝謝觀賞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論壇：

Dancer時代主界面模塊的實現(xiàn)項目二企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）目錄01學習目標02學習路徑03任務描述04任務技能05任務實施06任務總結01學習目標

學習目標了解Ionic的CSS組件掌握Ionic列表掌握Ionic使用輪播圖的步驟學習目標

通過Dancer時代主界面模塊的實現(xiàn)，了解主界面的設計理念及功能實現(xiàn)，學習Ionic相關組件及如何應用列表實現(xiàn)布局，掌握Ionic使用輪播組件實現(xiàn)主界面模塊的輪播，具有使用Ionic組件實現(xiàn)主界面布局的能力。使用Ionic組件實現(xiàn)主界面布局的能力企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）02學習路徑

學習路徑企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）03任務描述

01情境導入

任務描述企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）

情境導入對于一款手機軟件，其主界面是非常重要的，可以說它是直接影響軟件用戶數(shù)量的關鍵。所以界面設計人員Ellison在主界面的設計和美化上花了很大的心思，他在設計主界面時不僅考慮到軟件信息的宣傳還考慮了用戶使用軟件的便利性，所以Ellison在界面中添加了手機軟件中常用的輪播圖元素。主界面中還有視頻和音樂的推薦功能，點擊跳轉對應界面可進行視頻和音頻的播放。本模塊主要通過實現(xiàn)Dancer時代的主界面了解Ionic的輪播圖和導航組件。企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）

功能描述

01

02

03企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）

基本框架企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）04任務技能01020304任務技能Ionic的CSS組件導航組件Ionic列表Ionic功能Ionic字體圖標按鈕Ionic表單ionIcons采用了TrueType字體實現(xiàn)圖標樣式，有超過700個圖標可供選擇。<ion-iconname="圖片屬性名"></ion-icon>。

Ionic的CSS組件企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）建設制造強國選項卡通過ion-tabs標簽定義，選項使用ion-tab（ion-tab是ion-tabs的子標簽，每個選項卡的選項都包含一個相對應的界面）標簽定義。Ionic提供的側邊菜單通過點擊帶有menuToggle元素的標簽，從當前界面的側面滑入的導航，默認情況下從左側劃入，通過設置side="right"實現(xiàn)從右側滑入。

導航組件Ionic選項卡Ionic側欄菜單企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）基本列表列表分隔符滑動列表3列表分隔符可以用來將列表劃分成多個列表組，好處是使瀏覽者更方便查詢列表項。其實現(xiàn)方法是使用<ion-item-group>標簽作為列表容器，通過<ion-item-divider>標簽將列表劃分為多個部分?；瑒恿斜硗ㄟ^向左或向右滑動，以顯示一組隱藏的按鈕。通過在ion-list組件內添加ion-item-sliding組件實現(xiàn)滑動列表，添加<ion-item-options>標簽包含滑動出的按鈕。Ionic列表企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）默認情況下，基本列表之間有分隔線，若要隱藏列表項之間的分隔線，只需在<ion-list>標簽內添加no-lines屬性。Ionic卡片輪播組件數(shù)據(jù)查詢3代碼結構由輪播圖容器（<ion-slides>標簽）和輪播圖組件（<ion-slide>標簽）組成在Ionic項目中，當列表數(shù)據(jù)過多時，要找一條特定的記錄就尤為困難，這時數(shù)據(jù)查詢功能就可以用到。其實現(xiàn)需要調用getItems()方法，調用該方法的觸發(fā)類型有三種。Ionic功能企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）近年來卡片在前端設計使用越來越頻繁，卡片具有內容顯示分層次、更加規(guī)整等特點，它是一個更好組織信息展示的工具。在設計移動端應用時，卡片會根據(jù)屏幕大小自適應大小。05任務實施輸入標題輸入標題輸入標題第一步：創(chuàng)建選項卡、首頁、上傳、分享、我的界面并配置第二步：首頁輪播圖的制作第三步：輪播圖下方圖標區(qū)域制作第四步：底部列表的制作，并添加頁面跳轉點擊輸入說明文字點擊輸入說明文字點擊輸入說明文字

任務實施企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）06任務總結任務技能任務實施任務總結任務描述

本項目通過對Dancer時代主界面模塊的學習，對Ionic相關組件及應用列表布局的使用具有初步了解，對Ionic相關的導航及菜單欄的使用有所認識，同時掌握了Ionic使用組件實現(xiàn)主界面的布局和美化。

任務總結企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）謝謝觀賞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論壇：

Dancer時代音頻模塊的實現(xiàn)項目三企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）目錄01學習目標02學習路徑03任務描述04任務技能05任務實施06任務總結01學習目標

學習目標了解視頻、音頻播放功能的實現(xiàn)流程掌握Ionic彈出框的使用掌握Ionic手勢事件的實際應用學習目標

通過Dancer時代音頻模塊的實現(xiàn)，了解視頻、音頻播放功能的實現(xiàn)流程，學習Ionic彈出框的使用，掌握Ionic中插件的安裝和使用，具有獨立使用插件實現(xiàn)播放功能的能力。具有獨立使用插件實現(xiàn)播放功能的能力企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）02學習路徑

學習路徑企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）03任務描述

01情境導入

任務描述企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）

情境導入在Dancer時代APP中，學習舞蹈最直觀的方式就是觀看視頻。一段完美的舞蹈離不開音樂的加入，有節(jié)奏的舞蹈才能引人注目。因此，Ellison綜合各個方面的需求在主頁中添加了播放視頻、音樂的入口，通過點擊進入視頻界面，之后是推薦的精彩視頻列表，用戶可以通過翻閱列表選擇自己喜歡的視頻進行觀看。點擊進入音樂界面后，用戶可以根據(jù)自己的喜好選擇音樂。本模塊主要通過實現(xiàn)Dancer時代的視頻、音頻播放功能了解Ionic彈出框和插件的使用。企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）

功能描述

01

02

03企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）

基本框架企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）04任務技能01020304任務技能Ionic彈出框常用事件插件簡介及使用音樂播放模態(tài)框對話框上拉菜單第一步：在html頁面中定義一個按鈕，并添加點擊事件。第二步：在對應的ts文件引入ModalController。第三步：構造ModalController。第四步：通過showAlert()實現(xiàn)模態(tài)框的功能。第一步：在html頁面中定義一個按鈕，并添加點擊事件。第二步：在對應的ts文件引入AlertController。第三步：構造AlertController。第四步：通過showAlert()實現(xiàn)對話框的功能。

Ionic彈出框第一步：在html頁面中定義一個按鈕，并添加點擊事件。第二步：在對應的ts文件引入ActionSheetController。第三步：構造ActionSheetController。第四步：通過doConfirm()實現(xiàn)上拉菜單的功能。企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）建設制造強國

常用事件觸發(fā)事件生命周期事件企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）建設制造強國

插件簡介及使用cordova插件Camera插件企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）

音樂播放音樂播放企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）05任務實施輸入標題輸入標題第一步：創(chuàng)建音樂首界面、音樂播放界并進行相關配置第二步：音樂首界面的制作及跳轉的添加第三步：音樂播放界面制作第四步：音樂播放插件的添加以及播放功能的實現(xiàn)點擊輸入說明文字點擊輸入說明文字

任務實施企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）06任務總結任務技能任務實施任務總結任務描述

本項目通過Dancer時代音頻模塊的實現(xiàn)，對視頻、音頻播放功能的實現(xiàn)流程有所了解，掌握Ionic彈出框時間及插件的安裝及使用，并能夠根據(jù)所學的Ionic彈出框及事件的使用，插件的安裝實現(xiàn)Ionic更多的功能。

任務總結企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）謝謝觀賞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論壇：

Dancer時代上傳模塊的實現(xiàn)項目四企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）目錄01學習目標02學習路徑03任務描述04任務技能05任務實施06任務總結01學習目標

學習目標了解選擇設備本地文件的實現(xiàn)流程學習Ionic下拉刷新的相關知識掌握Ionic選擇器的實際應用學習目標

通過Dancer時代上傳模塊的實現(xiàn)，了解選擇設備本地文件的實現(xiàn)流程，學習選擇文件功能所需插件的相關知識，掌握文件選擇插件的使用及Ionic的相關選擇器，具有獨立實現(xiàn)文件選擇、圖片預覽功能的能力。具有獨立實現(xiàn)文件選擇、圖片預覽功能的能力企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）02學習路徑

學習路徑企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）03任務描述

01情境導入

任務描述企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）

情境導入Ellison為了引起用戶對舞蹈的興趣，在Dancer時代中設計了上傳模塊，該模塊主要包括兩個功能，分別是圖片預覽和文件上傳。用戶通過觀看舞蹈的相關的圖片感受舞蹈的魅力，了解舞蹈背后的文化。Ellison設計的文件上傳功能，使用戶可以上傳自己認為有意義的圖片給他人欣賞，用于用戶之間的交流。本模塊主要通過實現(xiàn)Dancer時代的圖片預覽和文件上傳功能了解Ionic的訪問設備插件和圖片預覽。企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）

功能描述情境入01

01

02

03

04企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）

基本框架企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）04任務技能01020304任務技能Ionic選擇器插件訪問設備文件插件圖片預覽下拉刷新實現(xiàn)Ionic極光推送05日期選擇器日歷選擇器地區(qū)選擇器Ionic提供的DateTime組件可以直接設置日期。點擊<ion-datetime>從下往上滑出選擇器界面，在滑出的選擇器界面可以單獨選擇年、月、日等信息。(1)安裝Calendar插件(2)將插件引入項目并進行配置(3)需要添加點擊事件，用來調取日歷選擇器(4)在對應界面的ts文件中添加openCalendar()方法

Ionic選擇器插件(1)安裝單級/多級選擇插件(2)將插件引入項目并進行配置(3)定義一個JSON選擇器（simpleColumns）(4)在對應界面的ts文件中添加openCalendar()方法企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）(1)安裝插件(2)將插件引入項目并進行配置(3)添加點擊事件，用于調取選擇設備文件界面(4)在對應界面的ts文件中添加方法

訪問設備文件插件訪問設備文件企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）圖片預覽是用戶點擊圖片列表中的任意一張圖片，點擊后圖片滿屏顯示。圖片預覽功能不僅在手機相冊中可以見到，微信查看頭像、聊天圖片等中也應用廣泛。在使用之前需要進行安裝。

圖片預覽圖片預覽企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）建設制造強國懶加載是一種獨特而又強大的數(shù)據(jù)獲取方法，它能夠在用戶滾動頁面的時候自動獲取更多的數(shù)據(jù)，而新得到的數(shù)據(jù)不會影響原有數(shù)據(jù)的顯示，同時最大程度上減少服務器端的資源耗用。使用懶加載能夠減少程序啟動時間和打包后的體積，而且可以方便的使用路由功能。下拉刷新是覆蓋在頁面上，適用于新聞類界面，當用戶需要獲取最新的內容數(shù)據(jù)時，等待刷新完畢后最新的數(shù)據(jù)即出現(xiàn)在下拉內容區(qū)域的頂部。

下拉刷新實現(xiàn)懶加載下拉刷新企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）(1)到極光官網(wǎng)注冊賬號，新建應用獲得appkey(2)引入極光插件(3)設置啟動推送(4)到極光官網(wǎng)發(fā)送通知Ionic極光推送Ionic極光推送企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）05任務實施輸入標題第一步：上傳界面制作，使用ion-scroll表簽設置水平滾動條第二步：下載添加圖片預覽插件，點擊圖片時實現(xiàn)圖片的放大第三步：彈出框功能的添加，點擊上傳按鈕后，彈出彈出框第四步：下載并添加文件選擇、上傳插件，并實現(xiàn)點擊選擇文件進行文件選取的功能點擊輸入說明文字

任務實施企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）06任務總結任務技能任務實施任務總結任務描述

本項目通過Dancer時代上傳模塊的實現(xiàn)，對選擇設備本地文件的實現(xiàn)流程具有一定的了解，對文件選擇插件的使用及Ionic的相關選擇器有所認識，能獨立實現(xiàn)文件選擇、圖片預覽等功能。

任務總結企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）謝謝觀賞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論壇：

Dancer時代分享模塊的實現(xiàn)項目五企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）目錄01學習目標02學習路徑03任務描述04任務技能05任務實施06任務總結01學習目標

學習目標了解分享功能的實現(xiàn)流程掌握指紋、分享等插件掌握地圖定位的申請步驟及使用學習目標

通過Dancer時代分享模塊的實現(xiàn)，了解分享功能的實現(xiàn)流程，學習Ionic中指紋驗證、社交分享及地圖定位等插件，掌握分享插件的使用及地圖定位的申請步驟，具有獨立使用插件實現(xiàn)分享功能的能力。具有獨立使用插件實現(xiàn)分享功能的能力企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）02學習路徑

學習路徑企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）03任務描述

01情境導入

任務描述企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）

情境導入Dancer時代的分享模塊將用戶之間的交流與互動設計的更加全面。用戶可以將自己的感觸，看到的圖片上傳到軟件中，好友之間可以互相查看動態(tài)、點贊、評論。也可以將動態(tài)內容分享到其他軟件中，實現(xiàn)了信息共享，解決了用戶使用軟件的局限性，增強了用戶的體驗。本模塊主要通過實現(xiàn)Dancer時代的分享功能了解Ionic的社交分享SocialSharing插件和地圖定位。企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）

功能描述

01

02

03企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）

基本框架企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）04任務技能01020304任務技能指紋驗證加載指示器社交分享插件地圖定位手機設備具有多種安全模式，如密碼、PIN、指紋驗證等。目前，指紋驗證被越來越多的用戶所使用的，用戶通過指紋即可進行身份驗證，它具有方便、快速、無需用戶記憶即可完成身份驗證的特點。在Ionic中通過指紋驗證插件可以實現(xiàn)這一效果。如果想實現(xiàn)該效果，在項目目錄中打開命令提示符，輸入命令安裝FingerprintAuth插件。

指紋驗證指紋驗證企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）加載指示器是指加載效果覆蓋在界面內容上面，以半透明的形式遮擋住界面中的內容，加載結束后關閉指示器，以恢復用戶對應用的使用。加載中指示器也可在指定時間后通過自動關閉，默認情況下它會顯示為旋轉的圓形。加載指示器在頁面更改期間也會顯示，可通過dismissOnPageChange屬性設為

true來禁用。ionSpinner提供了許多種旋轉加載的動畫圖標，當界面加載時通過spinner設置呈現(xiàn)給用戶。

加載指示器加載指示器企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）在很多社交軟件中可以通過網(wǎng)絡以各種形式分享文件、圖片、網(wǎng)頁鏈接等，分享功能主要是依賴SocialSharing插件實現(xiàn)的，實現(xiàn)分享功能首先要下載并安裝SocialSharing插件。

社交分享插件社交分享插件企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）(1)注冊高德開發(fā)者(2)去控制臺創(chuàng)建應用(3)獲取Key

地圖定位地圖定位企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）05任務實施輸入標題第一步：分享界面制作，使用列表進行頁面布局，當點擊列表時進行跳轉。第二步：創(chuàng)建并制作分享詳情界面，下載分享插件并進行功能的添加。第三步：創(chuàng)建發(fā)布界面并進行制作，當點擊相機圖標時彈出列表進行選擇。第四步：下載camera插件，當點擊相冊時調取相冊，點擊拍照時調取相機。點擊輸入說明文字

任務實施企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）06任務總結任務技能任務實施任務總結任務描述

本項目通過Dancer時代分享模塊界面及功能的學習，對分享功能的實現(xiàn)流程具有一定的了解，對Ionic中指紋驗證、社交分享及地圖定位等插件有所認識，掌握了分享插件的使用及地圖定位的申請步驟。

任務總結企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）謝謝觀賞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論壇：

Dancer時代我的模塊實現(xiàn)項目六企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）目錄01學習目標02學習路徑03任務描述04任務技能05任務實施06任務總結01學習目標

學習目標了解視頻錄制、二維碼掃描等實現(xiàn)流程學習二維碼掃描插件的相關知識及應用掌握Ionic插件的相關知識及應用學習目標

通過Dancer時代我的模塊的實現(xiàn)，了解視頻錄制、二維碼掃描、語音識別及數(shù)據(jù)存儲功能的實現(xiàn)流程，學習視頻錄制插件的相關知識，掌握二維碼掃描插件的實際應用，具有使用Ionic插件實現(xiàn)功能的能力。具有使用Ionic插件實現(xiàn)功能的能力企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）02學習路徑

學習路徑企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）03任務描述

01情境導入

任務描述企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）

情境導入至此，以舞蹈為背景的Dancer時代界面設計大體完成。但項目負責人Richard和他的開發(fā)團隊并不滿意界面內容固定。因此，在本模塊中介紹了調用服務器后端的API接口。通過API接口與數(shù)據(jù)庫相連，及時更改數(shù)據(jù)，做到界面內容實時更新，極大的程度吸引用戶。本模塊主要通過實現(xiàn)Dancer時代與后臺數(shù)據(jù)交互學習MongoDB數(shù)據(jù)庫安裝與測試。企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）

功能描述情境入01

01

02

03

04企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）

基本框架企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）04任務技能01020304任務技能媒體捕獲掃描二維碼語音識別撥打電話存儲數(shù)據(jù)05Ionic3提供了對音頻、圖片和視頻采集功能的插件-媒體捕獲插件（MediaCapture），它與CameraAPI相比，不僅能獲取圖像，還可以錄視頻或者音頻。實現(xiàn)媒體捕獲首先要安裝相關插件。

媒體捕獲媒體捕獲企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）掃描二維碼插件可用于調用系統(tǒng)設備的攝像頭，并自動掃描條形碼，獲取條形碼的數(shù)據(jù)并將數(shù)據(jù)返回。

掃描二維碼掃描二維碼企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）語音識別的目標是將用戶的語音詞匯內容轉化為可讀的文字輸入，通常在語音撥號、發(fā)送消息、接受語音消息等功能中使用。用戶在不能手動輸入文字或不能接收語音信息時，通過語音識別，將語音轉換為文字進行接收與發(fā)送信息，大大方便了用戶的使用。使用SpeechRecognition插件即可實現(xiàn)撥打電話效果，在使用之前需要進行安裝。

語音識別語音識別企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）使用電話溝通具有快速、方便、聯(lián)系廣泛等特點。通過撥打電話，即使距離再遠，無需見面，也能快速聯(lián)系。相比于信紙等通信方法，使用撥打電話溝通更清晰。使用CallNumber插件即可實現(xiàn)撥打電話效果，在使用之前需要進行安裝。

撥打電話撥打電話企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）建設制造強開發(fā)中，只要用戶登錄過一次，再次打開應用程序，都會自動填充用戶名和密碼，其實現(xiàn)是使用localStorage存儲。localStorage保存的數(shù)據(jù)一般是永久保存的，即使用戶關閉當前web瀏覽器后重新啟動，數(shù)據(jù)依然存在。通過SQLite也可以來存儲數(shù)據(jù)，通過SQL語句來實現(xiàn)相關存儲。當在本機應用環(huán)境運行時，優(yōu)先選擇SQLite，其具有使用廣泛，穩(wěn)定等特點。在使用之前需要進行安裝。

存儲數(shù)據(jù)localStorage存儲SQLite存儲企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）05任務實施輸入標題輸入標題第一步：創(chuàng)建我的界面并將相關配置及美化第二步：當點擊設置時跳轉至設置界面，當點擊+圖標時彈出列表第三步：下載視頻捕獲插件和掃描二維碼插件并添加，點擊我的視頻時調用攝像頭錄制視頻，點擊二維碼時掃描二維碼。點擊我的位置進入地圖定位界面。第四步：引入高德地圖api接口，實現(xiàn)地圖定位功能點擊輸入說明文字點擊輸入說明文字

任務實施企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）06任務總結任務技能任務實施任務總結任務描述

本項目通過Dancer時代我的模塊的學習，對視頻錄制、二維碼掃描、語音識別及數(shù)據(jù)存儲功能的實現(xiàn)流程具有初步了解，對視頻錄制插件的相關知識有所認識，同時掌握了二維碼掃描插件的實際應用。

任務總結企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）謝謝觀賞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服務器模擬環(huán)境搭建項目七企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）目錄01學習目標02學習路徑03任務描述04任務技能05任務實施06任務總結01學習目標

學習目標了解Ionic程序和后臺交互的流程學習Postman、Express、MonogoDB的安裝及使用掌握MonogoDB的使用學習目標

通過Ionic服務器模擬環(huán)境搭建的學習，了解Ionic程序和后臺交互的流程，學習Ionic服務器中Postman、Express、MonogoDB的安裝及使用，掌握MonogoDB的使用，具有搭建Ionic服務器環(huán)境的能力。具有搭建Ionic服務器環(huán)境的能力企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）02學習路徑

學習路徑企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）03任務描述

01情境導入

任務描述企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）

情境導入至此，以舞蹈為背景的Dancer時代界面設計大體完成。但項目負責人小李和他的開發(fā)團隊并不滿意界面內容固定。因此，在本模塊中介紹了調用服務器后端的API接口。通過API接口與數(shù)據(jù)庫相連，及時更改數(shù)據(jù)，做到界面內容實時更新，極大的程度吸引用戶。本模塊主要通過實現(xiàn)Dancer時代與后臺數(shù)據(jù)交互了解MongoDB數(shù)據(jù)庫安裝與測試。企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）

功能描述

01

02

03企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）04任務技能01020304任務技能Postman安裝與使用示例使用Express初始化創(chuàng)建API示例MongoDB安裝與測試使用Mongoose完善數(shù)據(jù)持久化使用案例05簡介安裝使用說明一般來說，所有的HTTPRequest都分成URL、method、headers和body4個部分。而Postman針對這幾部分都有針對性的工具界面。第一步：打開官網(wǎng)（）下載postman插件第二步：點擊打開下載好的Postman第三步：在Postman里面輸入需要測試的接口地址

Postman安裝與使用示例（1）發(fā)送一個GET請求：比如向百度發(fā)送一個搜索請求。進入到postman界面中，選擇GET請求，把百度網(wǎng)址在輸入框中輸入。輸入完成之后，然后進行點擊send。（2）發(fā)送POST請求：POST表單提交，設置了請求方法、URL、參數(shù)，但沒有設置請求頭。企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）安裝工程結構工作原理第一步：安裝express。第二步：使用命令新建項目，項目名稱為bloo。第三步：進入項目并安裝相關依賴。第四步：啟動express。第五步：在瀏覽器中輸入http://localhost:3000/，并查看輸出結果。app.js：啟動文件。package.json：存儲著工程的信息及模塊依賴。node_modules：存放package.json中安裝的模塊。public：存放image、CSS、JS等文件。routes：存放路由文件。views：存放視圖、模版文件。bin：存放可執(zhí)行文件

使用Express初始化創(chuàng)建API示例Express的工作原理是routes中存放路由文件，views中存放視圖文件,而

index.ejs文件中的<%=title%>是ejs模板引擎的語句，可以將后臺傳遞來的title數(shù)據(jù)在頁面中顯示。使用Express大大減少了代碼函數(shù)，而且邏輯更為簡潔，所以使用Express可以提高開發(fā)效率并降低工程維護成本。企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）簡介安裝和服務的啟動數(shù)據(jù)庫管理MongoDB數(shù)據(jù)庫旨在為Web應用提供可擴展的高性能數(shù)據(jù)存儲解決方案，它在多種場景下可用于替代傳統(tǒng)關系型數(shù)據(jù)庫的鍵/值存儲方式。具有高性能、易部署、易使用、易存儲等特點。第一步：下載msi文件。第二步：下載后雙擊該文件進行安裝。第三步：指定一個文件夾存放數(shù)據(jù)。第四步：配置Mongo服務端。第五步：在命令提示符輸入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）文檔操作：文檔具有增、刪、改、查等操作。企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）Mongoose是一款易于使用的Web服務器，它可以嵌入其它應用程序中，為其提供Web接口，是一個將JavaScript對象與數(shù)據(jù)庫產(chǎn)生聯(lián)系的框架。使用Mongoose可以新建數(shù)據(jù)庫、新建集合、對集合內的文檔進行CRUD操作，其提供了Schema、Model和Document對象，使操作更加方便。使用Mongoose完善數(shù)據(jù)持久化數(shù)據(jù)持久化企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）第一步：安裝Mongoose第二步：修改

app.js第三步：定義一個Schema

使用案例使用案例企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）05任務實施輸入標題第一步：創(chuàng)建node項目，編寫驗證手機號是否存在的接口、注冊接口第二步：創(chuàng)建注冊界面并制作，添加ajax進行數(shù)據(jù)的交互第三步：編寫登錄接口第四步：在登錄界面添加ajax進行登錄接口的調用點擊輸入說明文字

任務實施企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）06任務總結任務技能任務實施任務總結任務描述

本項目通過Dancer時代前端和后臺的數(shù)據(jù)交互的實現(xiàn)，對Ionic程序和后臺交互的流程具有初步的了解，并詳細了解Ionic服務器中Postman、Express、MonogoDB的安裝及使用，具有了搭建Ionic服務器環(huán)境的能力

任務總結企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）謝謝觀賞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論壇：

Dancer時代發(fā)布項目八企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）目錄01學習目標02學習路徑03任務描述04任務技能05任務實施06任務總結01學習目標

學習目標了解Ionic項目在Android及IOS手機下的發(fā)布流程掌握如何發(fā)布Ionic項目具有能夠根據(jù)需求分析和設計制作并發(fā)布項目的能力學習目標

通過發(fā)布Dancer時代項目，了解Ionic項目在Android及IOS手機下的發(fā)布流程，學習Ionic環(huán)境如何簽名和優(yōu)化APK，掌握如何發(fā)布Ionic項目，具有能夠根據(jù)需求分析和設計制作并發(fā)布項目的能力。企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）02學習路徑

學習路徑企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）03任務描述

01情境導入

任務描述企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）

情境導入當完成與后臺數(shù)據(jù)交互后，需要對Dancer時代進行打包、測試、發(fā)布，才能正式被用戶所使用。目前手機版本主要為Android和IOS，因此，項目負責人Richard決定將Dancer時代生成Android和IOS應用包并進行發(fā)布。本模塊主要通過對Dancer時代打包進行了解和操作，做出一個屬于自己的APP引用。企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）

功能描述

01