标签:
Ionic是基于web技术开发移动应用的跨平台框架,可开发手机web、Ios、Android应用程序。
Ionic开发依赖于Node.js环境,因此需要先安装Node.js,在Node.js环境下执行命令:
npm install -g cordova ionic
npm是一个包管理器,这里使用npm安装cordova和ionic,-g表示全局安装,全局安装后在任何目录下都可以使用cordova和ionic命令。
Cordova提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头、麦克风等。
切换到工作目录,执行命令:
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一样的流程。
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
标签:
原文地址:http://blog.csdn.net/anda0109/article/details/52223047