你的位置:首页 > 操作系统

[操作系统]Cordova5


 
由于最近公司的项目要求用Cordova来进行开发,便开始了对Cordova的学习。由于本人之前也是做iOS开发,因此相关内容主要从iOS平台的角度来写。刚开始学习Cordova这个平台,希望通过这种总结学习的东西同时给需要人提供一些参考,如果有不当的地方敬请指正。
 
关于App到底是Native还是Web或者Hybrid的讨论很多,而Cordova就是这样一套为Web开发人员提供进行快速移动应用开发的框架。其前身为Adobe的PhoneGap框架,后贡献给Apache社区成为了一个开源项目。Cordova既可使熟悉Web开发的技术人员很容易的开发移动应用,也可以让原来的原生移动应用开发者集成Web页面,并通过plugin(插件)实现设备底层资源与js的互操作,是较理想的Hybrid或Web App的解决方案,可实现App的低成本和快速开发。
 
  • 1. 环境搭建

 
安装Xcode:
 
这个不用多说了,直接在AppStore下载最新版安装即可。
 
安装Node.js
 
主要是需要用来下载和安装Cordova,需要注意:不要下载最新的4.x.x版,可能会由于版本太新无法安装cordova,下面的版本已经证实可用。
 
下载地址:https://nodejs.org/download/release/v0.12.7/
 
下载后直接运行安装文件pkg,一直“继续”直至安装成功。

在终端运行nam -v出现版本号即说明成功。
 
然后就可以安装Cordova了。
 
安装Cordova CLI:
 
sudo npm install -g cordova或者sudo npm install -g cordova@x.x.x来安装指定版本


 
注:本文编写时最新为5.3.3版
 
更新Cordova:
 
sudo npm update cordova -g


 
如果下载失败的话,需要用以下的方式引用国内镜像站:
 
npm config set registry http://registry.cnpmjs.org npm info cordova npm --registry http://registry.cnpmjs.org info cordova


 
安装成功画面:
 

 
或输入:
cordova -v  


显示版本号即证明安装成功。
 
基于iOS平台的环境还是相对比较容易的,完成以上步骤后环境搭建结束。
 
 
  • 2. 创建第一个Cordova项目

 
打开终端,cd到相应的路径下,输入:
 
$cd ~/Documents $cordova create hello com.example.hello HelloWorld


 
加-d可以显示工程的创建的详细情况。
 
第一个参数hello为工程的文件夹名;
第二个参数(可选)com.example.hello为应用程序的id名,与Xcode中类似,可以在config.第三个参数(可选)HelloWorld为App显示的名称,也可在config. 
创建成功后可以打开hello目录查看以下结构:
 
|--conig.|--hooks/             //存放自定义cordova命令的脚本文件。      
||--README.md 
|--platforms/      //各个平台原生工程代码,会在build时被覆盖勿修改
|--plugins/        //插件目录(主要是提供各个平台的原生API)
|--www/          //用H5编写的源代码目录,build时会被放入各个平台的assets\www目录。
||--css/
||--img/
||--index.html       //App入口html文件
||--js/
 
 
  • 3. 添加iOS平台支持

 
在终端中输入:
 
进入工程目录:
$ cd hello


 
添加iOS平台文件:
$cordova platform add ios


 
也可添加其他平台,如:
$cordova platform add android

 


Adding ios project...
iOS project created with cordova-ios@3.9.1
Discovered plugin "cordova-plugin-whitelist" in config.Fetching plugin "cordova-plugin-whitelist@1" via npm
Installing "cordova-plugin-whitelist" for ios
 
见到以上内容为执行成功。
 
完成后可以看到platforms文件夹下面增加了以下路径:
 
|--platforms
|--platforms.son
||--ios/
|||--cordova/
|||--CordovaLib/
|||--HelloWorld/
|||--platform_www/
|||--www/
|||--HelloWorld.xcodeproj
 
可直接打开HelloWorld.xcodeproj工程在Xcode中进行编译和运行,如图:
 

 
 
运行结果:
 

 
 
参考资料:
 
http://rensanning.iteye.com/blog/2016364
http://cordova.apache.org/docs/en/5.1.1/guide/overview/