Ionic 部署

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

你可能感兴趣的:(Ionic 部署)