由于最近公司的项目要求用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，一直“继续”直至安装成功。





在终端运行npm -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:// 
npm info cordova 
 
npm --registry http:// 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. xml中修改，如果不指定的话默认为io.cordova.hellocordova；


第三个参数（可选）HelloWorld为App显示的名称，也可在config.xml中修改。


 


创建成功后可以打开hello目录查看以下结构：


  

|--conig.xml         //cordova的配置文件 

 

  |--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.xml. Installing to the project  
 Fetching plugin "cordova-plugin-whitelist@1" via npm 
 

  Installing "cordova-plugin-whitelist" for ios


 


见到以上内容为执行成功。


 


完成后可以看到platforms文件夹下面增加了以下路径：


  

|--platforms
 
|--platforms.json
 
||--ios/
 
|||--cordova/
 
|||--CordovaLib/
 
|||--HelloWorld/
 
|||--platform_www/
 
|||--www/
 
|||--HelloWorld.xcodeproj


 


可直接打开HelloWorld.xcodeproj工程在Xcode中进行编译和运行，如图：


 




 


 


运行结果：