《Ionic项目实战》课件-CORE01

Dancer时代登录模块实现项目一企业级卓越人才培养（信息类专业集群）目录01学习目标02学习路径03任务描述04任务技能05任务实施06任务总结01学习目标

学习目标010203了解登录功能的实现流程学习Ionic项目的基本结构掌握Ionic项目的创建学习目标

通过Dancer时代登录模块的实现，了解登录功能的实现流程，学习Ionic框架的优缺点，掌握Ionic所需软件的安装及环境的配置，具有解决登录验证的实现过程中出现问题的能力。04具有解决登录验证的实现过程中出现问题的能力企业级卓越人才培养（信息类专业集群）02学习路径

学习路径企业级卓越人才培养（信息类专业集群）03任务描述

01情境导入

02功能描述03

基本框架

04开发环境

任务描述企业级卓越人才培养（信息类专业集群）

情境导入在这个衣食无忧，科技发达的时代，越来越多的人开始追求精神上的需求，而舞蹈正是满足大众需求的一种文化形式。经过讨论，项目负责人Richard和他的开发团队决定开发一款手机软件，让更多的人在学习舞蹈的同时也可以了解舞蹈中蕴含的文化。Richard等人将该软件命名为：“Dancer时代”。Dancer时代主要包括五个模块，分别为：登录、首页、上传、分享、我的。本模块主要通过实现Dancer时代的登录功能了解Ionic的基础知识和基本的项目结构。企业级卓越人才培养（信息类专业集群）

功能描述使用Ionic轮播组件实现轮播图效果

01

02

03

04使用路由进行页面的跳转使用输入框组件实现输入框的样式使用ngModel进行数据的双向绑定企业级卓越人才培养（信息类专业集群）

基本框架企业级卓越人才培养（信息类专业集群）04任务技能010203任务技能跨平台移动开发框架Ionic环境配置Ionic项目结构跨平台移动开发框架简介1跨平台移动开发框架2跨平台移动开发框架选择3跨平台移动开发框架是一种在不依赖操作系统和不依赖硬件环境的情况下，通过打包工具适配输出可以在多种移动操作系统上运行的开发框架。它具有减少软件开发、维护的费用，提高软件使用时间的特点标准化、开发资源丰富是跨平台移动开发最大的优点，第三方框架工具（Cordova等）为其提供方便的跨平台应用打包/发布服务、实用的API、灵活的扩展机制、以及积累下来的丰富的第三方API实现。

跨平台移动开发框架在对跨平台移动开发框架进行初步的了解后，从项目开发的角度看，使用Ionic框架可以有效利用Angular的特性，极大的提供HTML5应用开发效率、质量、模块化程度。使用Ionic开发，相比较其他框架代码量减少，开发速度提高。企业级卓越人才培养（信息类专业集群）Ionic基本环境安装1在Window下打包APK2在AppleOSX下的打包APK3（1）安装JDK

（2）安装SDK（1）安装Xcode

（2）运行APP（3）在SDK中打开项目

Ionic环境配置企业级卓越人才培养（信息类专业集群）（1）安装Node.js（2）安装Ionic（3）安装cordova（4）创建简单的ionic项目建设制造强国121、node_modules文件夹是Ionic项目中Node各类依赖包2、platform文件夹是项目打包APK时需要的文件夹，打包完成后会自动生成在该文件夹下。3、plugins文件夹中是项目中所需的cordova插件4、src文件夹中是项目最重要的文件夹，主要用来编辑和配置显示的内容。页面跳转功能:（1）创建页面（2）页面配置（3）在新界面取值

Ionic项目结构Ionic项目结构Ionic案例企业级卓越人才培养（信息类专业集群）05任务实施输入标题输入标题输入标题第一步：打开命令行，进入想要创建项目的目录下，运行ionicstartmyappblank--v2创建一个有一个界面的项目第二步：创建登录首界面并进行页面制作第三步：创建登录界面，进行登录首界面跳转到登录界面第四步：进行登录界面制作点击输入说明文字点击输入说明文字点击输入说明文字

任务实施企业级卓越人才培养（信息类专业集群）06任务总结任务技能任务实施任务总结任务描述

本项目通过Dancer时代登录模块的学习，能够对跨平台开发技术的介绍及特性有所认识，对Ionic环境搭建及APK打包具有初步了解并能够安装Ionic插件，同时能够掌握Ionic的项目结构及应用Ionic创建界面的本事。

任务总结企业级卓越人才培养（信息类专业集群）谢谢观赏PPT模板下载：/moban/行业PPT模板：/hangye/节日PPT模板：/jieri/PPT素材下载：/sucai/PPT背景图片：/beijing/PPT图表下载：/tubiao/优秀PPT下载：/xiazai/PPT教程：/powerpoint/Word教程：/word/Excel教程：/excel/