Ionic 是一款开源的Html5移动App开发框架，是AngularJs移动端解决方案,Ionic以流行的跨平台移动App开发框架PhoneGap为蓝本，让开发者可以通过命令行工具快速生成Android Ios移动 App 应用。
部署生成 Android、Ios App的方式
一、命令行方式
1.1、在配置好 Node.js 和 npm 的环境后，用npm命令安装最新版本的 cordova 和 Ionic
- windows
$ npm install -g cordova ionic
- Mac
sudo npm update -g cordova ionic
1.2、创建应用
使用ionic官方提供的现成的应用程序模板，或一个空白的项目创建一个ionic应用：
$ ionic start myApp tabs
1.3、创建 Android 应用
使用 ionic tool 创建，测试，运行你的apps
$ cd myApp
$ ionic platform add android
$ ionic build android
$ ionic emulate android
运行成功后会弹出没模拟器如下所示：
ionic-android.png
1.4、创建IOS应用
$ cd myApp
$ ionic platform add ios
$ ionic build ios
$ ionic emulate ios
如果出现"ios-sim was not found."错误，可以执行以下命令：
npm install -g ios-sim
运行成功后会弹出没模拟器如下所示：
ios-onic.png
二、Ionic Lab
如果你不喜欢使用命令行操作，则可以使用是桌面版的Ionic Lab作为开发环境，Ionic Lab 为开发者提供了一个更简单的方法来开始，编译，运行，和模拟运行Ionic的应用程序。 如下所示：
lab-preview.png
通过以上界面你可以完成以下操作：
- 创建应用
- 预览应用
- 编译应用
- 运行应用
- 上传应用
- 运行日志查看
而且可以关联自己喜欢的编辑器进行编辑例如 Sublime、Atom、 Visual Studio Code
如下所示：
ionic-sublime.png
三、项目结构
通过 "命令行" 或 "Ionic Lab" 生成的 Ionic 项目结构如下所示：
Ionic_project.png
无论是添加 Android/IOS 平台，成功后会在 Ionic 项目结构中生成一个 Platforms 文件夹，我们以 Android 为例，通过如下命令生成 android 工程项目后如图所示：
ionic platform add android
IOnic_android.png
可以看到多出了一个 Platforms 文件夹，并且里面还有一个android文件夹，这个 Android 文件夹就是一个完整的 Android 项目可以直接导入 AndroidStudio 运行，如果你想自己再加点什么非网页的界面，也可以导入这个 android 的文件夹，同时也可以通过 jdk 或者 AndroidStudio 的签名方式生成 Release 版的Apk
参考资料：
http://www.runoob.com/ionic/ionic-install.html
http://blog.csdn.net/wudizhukk/article/details/52739767
网友评论