码迷,mamicode.com
首页 > 其他好文 > 详细

Ionic开发环境搭建

时间:2016-08-16 22:06:23      阅读:282      评论:0      收藏:0      [点我收藏+]

标签:

Ionic是基于web技术开发移动应用的跨平台框架,可开发手机web、Ios、Android应用程序。

1、Ionic环境安装

Ionic开发依赖于Node.js环境,因此需要先安装Node.js,在Node.js环境下执行命令:

npm install -g cordova ionic

npm是一个包管理器,这里使用npm安装cordova和ionic,-g表示全局安装,全局安装后在任何目录下都可以使用cordova和ionic命令。
Cordova提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头、麦克风等。

2、创建Ionic项目

切换到工作目录,执行命令:

ionic start myApp tabs

上述命令从官网下载tabs模板,另外有blank、sideMenu可选。下载完成后工作目录下多了一个myApp项目目录。
项目目录结构如下:

hooks           //google之后这个目录应该是在编译cordova时自定义的脚本命令,方便整合到我们的编译系统和版本控制系统中
plugins         //cordova插件的目录,插件的安装下一节详述
scss            //scss文件,发布时编译这个目录下的文件输出到www的css目录中
www             //我们的开发目录,页面、样式、脚本和图片都放在这个目录下
--css
--img
--js
--lib
--index.html
bower.json      //bower配置文件
config.xml      //Ionic的配置文件 ?可以配置app的id,名称、描述起始页和一起其他配置
gulpfile.js     //gulp构建工具的执行文件,在这个文件中创建任务实现编译scss,css、js优化等
ionic.project   //Ionic的项目文件可以配置Ionic命令中livereload的监控文件
package.json    //npm配置文件

接着执行命令:

cd myApp
ionic serve

执行上述命令会启动一个web服务,并自动打开当前项目的网页。如下图:
技术分享>技术分享
技术分享
一个Ionic的模板项目就建好了,开发中我们主要修改www目录下的文件,和我们开发普通web一样的流程。

3、生成和部署移动应用

Ionic支持Android和Ios平台,下面添加这两个平台。
cd到项目目录下执行:

ionic platform add android
ionic platform add ios

分别添加android和ios平台。
1、接下来部署Android平台,首先需要配置好Android环境,JDK、Android SDK。在项目目录下执行:

ionic build android
ionic run android

执行上述命令Ionic编译项目生成apk并安装到手机上。
2、部署ios平台
ios部署需要一台mac电脑,在mac电脑上面根据本篇ionic的安装过程安装环境之后,添加ios平台到项目,因为apple开发的证书限制我们在没有申请购买apple账号的情况下,使用虚拟机来部署我们的应用,在部署之前需要使用npm安装一个ios-sim插件用来调用模拟器的,执行命令:

sudo npm install -g ios-sim

安装好之后,cd 到开发目录下执行:

sudo ionic build ios

开始编译项目,编译完成之后用Xcode打开开发目录下platform->ios->myIonic.xcodeproj的项目文件,Xcode中选择要运行的虚拟机版本并执行快捷键cmd+R运行虚拟机,虚拟机打开后会自动运行你应用。

PS. 为什么不用run ios 命令直接启动虚拟机呢,因为我的环境下执行run会报错,虚拟机会打开但是无法运行程序,找了半天解决解决方案没有结果,索性直接用Xcode了,效果是一样样的。

参考文章:http://blog.csdn.net/i348018533/article/details/47258449

Ionic开发环境搭建

标签:

原文地址:http://blog.csdn.net/anda0109/article/details/52223047

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!