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

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

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

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

01情境導入

02功能描述03

基本框架

04開發環境

任務描述企業級卓越人才培養（信息類專業集群）

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

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

01

02

03

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

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

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

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

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

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

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

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

任務總結企業級卓越人才培養（信息類專業集群）謝謝觀賞PPT模板下載：/moban/行業PPT模板：/hangye/節日PPT模板：/jieri/PPT素材下載：/sucai/PPT背景圖片：/beijing/PPT圖表下載：/tubiao/優秀PPT下載：/xiazai/PPT教程：/powerpoint/Word教程：/word/Excel教程：/exc