Ionic+Cordova开发环境搭建

Ionic+Cordova的组合是一个跨平台的移动开发框架,属于HybirdApp开发模式。其中Ionic是一个前端框架,集成了AngularJs在里面,有很好很漂亮的UI控件。Cordova本身就是一个跨平台的移动开发框架,可以将应用打包成各个平台下的应用。他们之间的关系可以用下面的图展示:



开发环境搭建

1、安装JDK,要求版本至少是1.6的。JDK可以去官网下载:http://www.oracle.com/technetwork/java/javase/downloads/index.html,安装后记得设置环境变量。

2、安装Anroid SDK,下载地址:http://sdk.android-studio.org/,安装完成后同样需要设置环境变量。然后打开sdk安装Android sdk tools,Anroid platform tools、Android build tool,以及版本包,然后在Extras里面把support library也安装上。

3、安装nodejs,下载地址:https://nodejs.org/dist/,安装完成后设置环境变量。

4、安装python,下载地址:https://www.python.org/downloads/,安装完成后设置环境变量。

5、安装gradle,下载地址:http://sdk.android-studio.org/,安装完成后同样需要设置环境变量。

6、通过npm安装cordova,如下:

npm install -g cordova
安装完成后通过cordova  -v命令查看是否安装成功。

7、下面就是安装ionic了,这个比较坑,其实也是通过下面的命令来安装:

npm install -g ionic
但我安装失败了,说是需要VCBuilder,而这个需要安装VC ++2013 EXPRESS,得6个多G。网上说可以通过制定使用vs的版本MSVSBuilder来代替VCBuilder,命令如下:

npm config set msvs_version 2010 --global 
其中2010是你的VS的版本。不幸的是我仍然失败。(后记:后来我在另外一台机器上安装成功了,可能是因为我安装了vs 2008。)

后面发现那个安装ionic的命令其实是安装ionic的命令行工具,那些命令其实cordova都有类似的。而且ionic只是一个前端框架,那么它的本质不过是一些css和js文件而已,只要引入到项目中就可以直接使用了。所以这个命令行工具没有也罢,而且幸运的是ionic提供了图形化的开发工具ionic creator和ionic Lab,不熟悉命令行的人也可以轻松的创建项目,那么Ionic的命令行工具就可有可无了。如果硬要安装ionic命令行工具,又失败了,下面的解决方案或许会有帮助。

安装ionic失败的各种解决方案:

1、ionic + cordova 环境搭建

2、搭建开发环境

3、安装ionic出现的错误

创建工程

开发环境搭建好了之后,就开始创建工程吧!
没有了ionic的命令行工具,就使用cordova的命令行工具来创建工程。(个人感觉使用ionic创建项目其实也是调用的cordova的命令行工具来创建的。如果安装ionic命令行工具成功了,就参考ionic创建项目的命令吧,这里有两个个参考链接:http://www.runoob.com/ionic/ionic-install.html,http://ionicframework.com/docs/cli/)
1、创建项目
cordova create hello com.example.hello HelloWorld 
其中hello是项目文件夹名,com.example.hello是包名,HelloWorld是app名称。如果想直接创建项目可以只给目录参数即可:

cordova create projectName
然后添加平台,这样打包时才可以打包成相应平台下的app。
cordova platform add android

2、创建资源包工程

创建资源包工程需要Ionic命令行工具,如果命令行工具安装失败了,也可以自己手动创建(参考链接:http://www.runoob.com/ionic/ionic-creat-app.html)。幸运的是我们也可以利用Ionic Creator来创建。我采用了Ionic Creator,因为它方便,很多目录结构和基础代码都帮我写好了。

2.1 打开creator网站:https://creator.ionic.io/app/dashboard/projects

点击右上角的New Project来创建新的资源包项目。
Ionic+Cordova开发环境搭建_第1张图片
填入项目名称,选择项目类型后就可以创建项目了。如下图所示:


界面十分简单,不能指望它能够帮助我们做很多复杂的事情,但是可以利用它迅速搭起来一个整体的框架。

2.2 导出资源包工程
      我们不做任何的界面设计,直接保存。然后点击右上角的导出按钮,然后出现下面的:
Ionic+Cordova开发环境搭建_第2张图片
选择zip file,然后下载下来即可。上面四种方式中,如果之前ionic命令行工具安装失败,则第一种是不能用的。最后两种是需要钱的,所以只能使用第二种。

3、将下载好的资源包工程解压后,替换掉cordova创建的工程中根目录下的www文件夹下的所有文件。

4、选择你熟悉的工具进行业务开发(主要是资源包的开发),我这里使用的是webstorm。
Ionic+Cordova开发环境搭建_第3张图片
用webstorm打开后可以看到,ionic creator已经帮我们做了不少的工作,index页面,模板页,ionic库,控制器,路由都帮我们建好了,省得我们还要手动的去构建这些代码。接下来就可以愉快的开发了。需要注意的是,如果想要进行cordova插件开发,那么需要将相应平台下的工程导入到相应的开发工具中。例如将platform下的android的项目导入到eclipse中,进行插件开发。插件开发可以参考我的文章: Cordova插件开发。不过一般corodva官网上有很多插件供我们选择,一般是够用了。

5、开发完成后,使用cordova 打包项目成目标平台的应用。
cordova build android
6、进行仿真
cordova emulate android
前提是需要安装虚拟机(AVD),这个可以在Android SDK中安装。不过我的仿真速度很慢,我一般是放在手机上进行测试效果。

如何使用cordova插件?

1、cmd进入到工程目录
2、安装插件
cordova plugin add cordova-plugin-shake --save
--save参数是将插件添加到config.xml中,这样才可以使用,否则就只是下载下来而已。
3、然后就可以在项目中使用相关插件功能了。

总结:

这里对ionic+cordova的开发环境,工程创建和插件使用进行了比较详细的介绍,更多的开发资料请去cordova和ionic的官网上查看。这里给个传送门:
1、 cordova官网
2、 ionic官网

这里有我写的一个demo可以学习: 手机检测和记步app

你可能感兴趣的:(Ionic+Cordova开发环境搭建)