第十二讲手机app开发的几种方式 ionic学习思路以及ionic新建的项目分析 ... ...

2015-11-1 18:03| 发布者: admin| 查看: 10659| 评论: 0

摘要: ionic属于hybrid开发模式，本质上是将移动web应用与浏览器打包,优点 MVC 基于angularjs 运行速度快 UI漂亮开发简单缺点：学习成本比其他的html5框架稍微高一些(比如jqmobi) 需要具备angularjs基础。是否采用这种 ...

学习要点：
1.   目前开发手机app的几种方式
2.   ionic学习思路简介
3.   Ionic CSS框架
4.   ionic js 指令路由其他ui交互效果
5.   ionic 命令行/CLI安装调试打包（第三季第一讲已讲）
6.   ionic 开发包下载以及命令创建的项目分析

第十二讲免费视频教程下载地址：http://bbs.phonegap100.com/thread-2047-1-1.html

1．    目前开发手机app的几种方式

     原生/Native：使用原生SDK开发App。优点不用说，当你有足够的资源，这是最理想的方式；缺点是对不同的平台要分别开发，学习成本高,开发成本高、开发周期长、不易于web开发人员和企业建站公司转型

    原生脚本/NativeScript：将原生API封装成JavaScript接口，这有点像前端的nodejs。NativeScript方式与原生相比性能损失不大（据称只有10%左右），优点是开发语言统一使用JavaScript，缺点是要针对不同的平台分别开发。

原生+web/ Hybrid：使用原生技术开发，部分页面调用web。优点是比纯原生开发周期短，页面更新方便，如支付宝，还有很多app的详情页面。缺点：需要原生和web配合。

混合/Hybrid：使用web技术开发App，使用cordova/phonegap之类进行打包封装。优点是采用标准的web技术开发，避免了不同平台原生开发体系的学习，学习成本低，上手快、效率高,一次开发微信 wap app全部搞定；缺点是app 在android平台性能上有一些损失，但是相信硬件的发展会接近原生。

ionic属于hybrid开发模式，本质上是将移动web应用与浏览器打包,优点 MVC 基于angularjs 运行速度快 UI漂亮开发简单缺点：学习成本比其他的html5框架稍微高一些(比如jqmobi) 需要具备angularjs基础。是否采用这种模式，需要根据具体情况综合考虑。

不过在大多数场景下，如果你已经具备一定的web开发经验，采用这种方式进入移动App开发领域，还是不错的一个选择。毕竟，将产品低成本地开发出来并更快地推向市场，有时是最重要的事情。

2．Ionic学习思路简介

Ionic简介：ionic是一个强大的混合式/hybridHTML5移动开发框架，特点是使用标准的HTML、 CSS和JavaScript，开发跨平台（目前支持：Android、iOS，计划支持：Windows Phone、Firefox OS）的原生App应用：

ionic主要包括三个部分：
•    CSS框架 - 提供原生App质感的CSS样式模拟。ionic这部分的实现使用了ionicons图标样式库。
•    JavaScript框架 - 提供移动Web应用开发框架。ionic基于AngularJS基础框架开发，因此自然地遵循AngularJS的框架约束；此外，ionic使用AngularJS UI Router实现前端路由。
•    命令行/CLI - 命令行工具集用来简化应用的开发、构造和仿真运行。ionic命令行工具使用了 Cordova，依赖于平台SDK（Android & iOS）实现将移动web项目打包成原生app。

由于ionic使用了HTML5和CSS3的一些新规范，所以要求 iOS7+/ Android4.1+。在低于这些版本的手机上使用ionic开发的应用，有时会发生莫名其妙的问题。

3. CSS框架

如果你对AngularJS这样的东西不感兴趣，可以只使用ionic的CSS框架：直接在HTML中引入 ionic.css就可以了。
ionic的CSS框架主要提供预定义的CSS类，来帮助我们快速构建适用于手机端的UI。 ionic的预定义CSS类主要分四个方面：
基本布局类
ionic将手机页面的布局模式基本抽象为三块：头、内容、尾。基本布局类提供了这几个区域的CSS类。

颜色和图标类
ionic定义了几个配色方案CSS类，并使用ionicons提供的字体图标类。

界面组件类
ionic定义了丰富的界面组件CSS类，让HTML元素看起来像移动平台的UI组件。

栅格系统类
和Bootstrap一样，ionic也提供了栅格系统。不过ionic的实现是基于CSS3的FlexBox 模型，更为灵活。

4. ionic js 指令路由其他ui交互效果

5.ionic 命令行/CLI安装调试打包（第三季第一讲已讲）

1.    准备环境安装cordova （不懂的话,看前面的环境搭建教程【第二季第一讲以及phonegap3.4安装教程】）
2.    安装ionic


npm install -g ionic
sudo npm install -g ionic

3.创建运行项目

Ios创建安装运行

ionic start myproject

cd myproject

ionic platform add ios

ionic build ios

ionic emulate ios

Android创建安装运行

ionic start myproject
cd myproject
ionic platform add android
ionic build android
ionic emulate android (模拟器运行)
ionic run android (连接上手机运行)

6.ionic 开发包下载以及默认项目分析

1