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

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

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

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

01情境導入

02功能描述03

基本框架

04開發(fā)環(huán)境

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

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

功能描述情境入01使用ion-scroll標簽實現(xiàn)圖片的水平滾動

01

02

03

04使用photo-viewer插件實現(xiàn)照片的預覽使用file-chooser插件實現(xiàn)文件的選擇使用file-transfer插件實現(xiàn)文件的上傳企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）

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

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

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

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

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

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

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

任務總結(jié)企業(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教程：/exc