Ionic开发环境搭建

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

时间: 2024-12-15 07:15:51

Ionic开发环境搭建的相关文章

2.ionic系列之ionic开发环境搭建(一)

工欲善其事,必先利其器.本文将介绍在windows平台及mac ox平台搭建ionic开发环境的过程. 1.安装Node.js 打开Node.js官网:https://nodejs.org/官网有两个版本的node.js一个是LTS(长期支持版本),一个是Current当前版本,建议使用LTS版本下载使用.安装时,windows平台安装时一直下一步下一步就OK,mac ox平台直接安装就行.安装完成后windows打开命令行,而mac ox打开终端,输入: node –v 后回车,若出现node

Ionic 开发环境搭建

android sdk环境搭建并非易事,本人经过无数失败,才使用以下方式成功 配置Ionic 开发环境 1.下载JDK并配置Java运行环境 http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 安装后需要进行如下配置: 在“系统变量”中,设置3项属性,JAVA_HOME,PATH,CLASSPATH(大小写无所谓),若已存在则点击“编辑”,不存在则点击“新建”. 1)JAVA_HO

Windows下Ionic Android开发环境搭建

转自 http://www.itwap.net/ArticleContent.aspx?id=26 来源: itwap.net 作者: 词略 时间: 2015-4-2 16:57:28 (一)Ionic简单介绍:   首先,Ionic是什么. Ionic是一款基于PhoneGap及AngularJS开发Hybrid/Web APP的前端框架,类似的其他框架有:Intel XDK等. 简单来说就是可以将你的Web应用打包发布成IOS/Android APP,并且提供了PhoneGap之外很多强大的

Cordova+ionic 开发hybird App --- 开发环境搭建

Cordova 开发hybird App 开发环境搭建 一.一些基础概念: Ant : 简单说来可以这么理解,如果你用记事本写JAVA程序,然后在cmd里输入javac命令编译它,但是有一天你发现每次手动输入太麻烦而且都是重复劳动,于是你下决心改变这种状况,然后学会了把javac命令写到一个bat文件中,以后编译只需要单击运行即可:然后随着你敲的代码越来越多,而且有了JAVA project概念,于是你手动新建了很多文件夹比如src.bin.lib,你有写了一个bat文件来减少你的重复劳动:再后

Ionic Android开发环境搭建 下

上篇 Ionic 安装完成了,由于要开发Android,所以必不可少需要继续搭建Android开发环境. 首先,下载并安装JDK.然后配置一下环境变量. 接着,下载并安装Android SDK.下载过程中,需要FQ.同时也需要配置一下环境变量. 网上还有一种比较好的方法,有IDE的可以如下设置: 最后,还需要下载并安装Apache Ant.Apache Ant,是一个将软件编译.测试.部署等步骤联系在一起加以自动化的一个工具.同时,也需要配置一下环境变量. 至于环境变量怎么配,网上都是资料,很详

Ionic简单接触:Windows下Ionic Android开发环境搭建

(一)Ionic简单介绍:   首先,Ionic是什么. Ionic是一款基于PhoneGap及AngularJS开发Hybrid/Web APP的前端框架,类似的其他框架有:Intel XDK等. 简单来说就是可以将你的Web应用打包发布成IOS/Android APP,并且提供了PhoneGap之外很多强大的服务和新的特性. 听起来还是很诱人的,事实上这也是目前最火的一中Hybrid APP开发方式.接下来介绍如何在Windows下搭建Ionic开发环境. 在开始之前我假设你已经了解了如下概

AngularJS+Ionic开发-1.搭建开发环境

临时项目需要使用AngularJS+Ionic+Cordova技术,半年前跟别人用过一段时间做过几个页面,目前别人已经无法联系了,只能我自己上了. 上次做完项目后,想抽时间好好巩固一下这方面的知识面来,后来其他项目忙起来就给扔下,主要原因还是懒啊,其实有好多的技术排着队等着好好研究呢,就是懒啊. 开发第一步,需要先把开发环境搭建起来. 1.开发IDE 选择VS Code,官方下载地址:https://code.visualstudio.com/ .下载完成后,根据安装步骤一步步完成即可. 2.安

HTML5 移动应用开发环境搭建及原理分析

开发环境搭建: 一.Android 开发平台搭建 安装java jdk:\\10.194.151.132\Mewfile\tmp\ADT 配置java jdk 1)  新建系统变量,JAVA_HOME,C:\Program Files\Java\jdk1.8.0_25 2)  新建系统变量,classpath,;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar 3)  Path,%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin 4)  测试

Intellij IDEA 14.1.4 Scala开发环境搭建

主要内容 Intellij IDEA开发环境简介 Intellij IDEA Scala开发环境搭建 Intellij IDEA常见问题及解决方案 Intellij IDEA常用快捷键 1. Intellij IDEA开发环境简介 具体介绍请参见:http://baike.baidu.com/link?url=SBY93H3SPkmcmIOmZ8H60O1k4iVLgOmdqoKdGp9xHtU-Pbdsq2cpn75ZPZPWAJxeUlwr0ravraQzOckh777beq Intelli