《Ionic项目实战》课件-CORE04

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