写在前面
目前市面存在的移动开发方式有原生应用、混合应用、原生应用三种,对于这种方式可以做以下对比。
认识ionic
ionic 是一个用来开发混合手机应用的,开源的,免费的代码库,具有以下特点。
1.ionic 基于Angular语法,简单易学。2.ionic 是一个轻量级框架。
3.ionic 完美的融合下一代移动框架,支持 Angularjs 的特性, MVVM ,代码易维护。
4.ionic 提供了漂亮的设计,通过 SASS 构建应用程序,它提供了很多 UI 组件来帮助开发者开发强大的应用。
5.ionic 专注原生,让你看不出混合应用和原生的区别
6.ionic 提供了强大的命令行工具。
7.ionic 性能优越,运行速度快。
安装 ionic
step1.安装node.js
建议安装最新版本,下载地址:https://nodejs.org/en/ ,下载安装完成后,会默认包含 npm 包,可使用终端命令
node -v
npm -v
查看 node 和 npm 的版本
step2.安装 ionic 前的准备
由于墙的原因,在之前的基础上直接安装 ionic ,一般会报错,可以采用下面的其中一个方法解决。
1.使用淘宝镜像。
npm install -g cnpm --registry=https://registry.npm.taobao.org
2.使用cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
以后所有的npm可用cnpm代替,如: cnpm install ionic
step3. 安装 ionic 和 cordova
如果step2中使用的淘宝镜像。
npm install -g ionic cordova
如果step2中使用的cnpm。
cnpm install -g ionic cordova
安装好可以用 命令 “ionic -v” 查看 ionic 版本(截止现在的版本为 2.1.13)
新建项目
1.进入要存放新建项目的目录
cd desktop2.新建项目
使用命令 ionic start<project-name> <optional-template>
<project-name>:项目名,<optional-template>:可选模板(sidemenu:侧滑、tabs:底部tab切换、blank :空白。不写默认为 tabs 默认)
ionic start myApp --v2
注意:如果不使用--v2,那么将按照ionic1的版本创建使用,同时也使用Angular1
3.进入项目
cd myApp
4.增加平台支持
iOS:
ionic platform add iosandroid:
ionic platform add android
运行项目
1.在浏览器中预览
ionic serve -l
2.创建好的文件目录
进入 platforms/iOS 就能找到熟悉的运行文件了,用xcode打开运行即可。
参考文章:
https://yanxiaodi.gitbooks.io/ionic2-guide/content/
http://www.voidcn.com/article/p-bxopffkz-ry.html
http://www.cnblogs.com/greyzeng/p/5529153.html
http://bbs.phonegap100.com/thread-2622-1-1.html
http://www.cnblogs.com/zsl123/p/5985620.html
http://www.jianshu.com/p/7a7abfa9f435