Cordova - 使用Cordova开发iOS应用实战1（配置、开发第一个应用）
作者：hangge | 2016-04-17 09:20
现在比较流行使用 html5 开发移动应用，毕竟只要写一套html页面就可以适配各种移动设备，大大节省了跨平台应用的开发时间。而不像以前一样 Android 要写一套程序，iOS 要写一套，甚至 Windows Phone 还要再写一套程序。
虽然使用H5开发的界面很容易适配各种手机设备，但由于系统的差异，如果要访问原生的设备功能（如摄像头、麦克风等）还是有些不便，或者说不是那么统一。这时我们可以借助 Cordova 来开发H5跨平台应用。
（1）Cordova 前身是 PhoneGap，Adobe将PhoneGap贡献给Apache后成为开源项目就改名成Cordova。
（2）Cordova提供了一组设备相关的API，通过这组API，移动应用能够以 JavaScript 访问原生的设备功能，如摄像头、麦克风等。
（3）Cordova还提供了一组统一的 JavaScript 类库，以及为这些类库所用的设备相关的原生后台代码。
（4）Cordova支持如下移动操作系统：iOS, Android,ubuntu phone os, Blackberry, Windows Phone, Palm WebOS, Bada 和 Symbian。
二，环境搭建
1，安装Node.js ：
主要是需要用来下载和安装Cordova
下载地址：https://nodejs.org
将下载下来的pkg文件运行安装即可。
在终端运行 npm -v，如果出现版本号则说明 Node.js 安装成功
2，安装Cordova CLI
（1）运行如下命令安装：
sudo npm install -g cordova
sudo npm update cordova -g
- 如果安装后想要更新到指定版本的Cordova，则可以先将其卸载再安装指定版本：
sudo npm uninstall -g cordova sudo npm install -g cordova@9.0.0
（3）cordova 更新完成后，还需要更新项目（比如更新 ios 项目）：
cordova platform update ios
3，测试下Cordova是否安装成功
运行如下命令：
cordova -v显示版本号则证明安装成功。
三，创建一个简单的Cordova项目
1，在终端中运行cd命令进入创建项目工程的目录位置
1，在终端中运行cd命令进入创建项目工程的目录位置
比如我们想把工程创建在用户文稿目录下：
3，创建成功后工程目录如下：
4，添加iOS平台支持
（1）进入工程目录
四，工程的编译、运行
直接打开 HelloWorld.xcodeproj 工程即可在Xcode中进行编译和运行
1，目录结构如下
cd ~/Documents2，运行如下命令创建工程项目
cordova create hello com.example.hello HelloWorld
参数说明：
第一个参数 hello 为工程的文件夹名；
第二个参数（可选）com.example.hello 为应用程序的id名，与Xcode中类似，可以在 config.xml 中修改，如果不指定的话默认为 io.cordova.hellocordova；
第三个参数（可选）HelloWorld 为App显示的名称，也可在 config.xml 中修改。
第一个参数 hello 为工程的文件夹名；
第二个参数（可选）com.example.hello 为应用程序的id名，与Xcode中类似，可以在 config.xml 中修改，如果不指定的话默认为 io.cordova.hellocordova；
第三个参数（可选）HelloWorld 为App显示的名称，也可在 config.xml 中修改。
目录文件说明：
conig.xml ：cordova的配置文件
hooks/ ：存放自定义cordova命令的脚本文件。
platforms/ ：各个平台原生工程代码，会在build时被覆盖勿修改
plugins/ ：插件目录（主要是提供各个平台的原生API）
www/ ：用H5编写的源代码目录，build时会被放入各个平台的assets\www目录。
www/index.html ：App入口html文件
conig.xml ：cordova的配置文件
hooks/ ：存放自定义cordova命令的脚本文件。
platforms/ ：各个平台原生工程代码，会在build时被覆盖勿修改
plugins/ ：插件目录（主要是提供各个平台的原生API）
www/ ：用H5编写的源代码目录，build时会被放入各个平台的assets\www目录。
www/index.html ：App入口html文件
4，添加iOS平台支持
（1）进入工程目录
cd hello（2）添加iOS平台文件
cordova platform add ios（3）执行完毕后可以看到在platforms文件夹下已经创建了个iOS工程
四，工程的编译、运行
直接打开 HelloWorld.xcodeproj 工程即可在Xcode中进行编译和运行
1，目录结构如下
2，目录结构说明
可以看到 Staging 文件夹下面有个 www 文件夹和一个 config.xml 文件（蓝框标注的）。
而在 Staging 文件夹外也有个 www 文件夹和一个 config.xml 文件（红框标注的）。
后面我们进行开发的时候通常有如下两种方案：
（1）如果在Xcode编译运行的话，使用的是 Staging 下面的html页面。所以我们可以把外面的www文件夹和config.xml从工程中移除（上图红框标注的），只编辑使用Staging文件夹下的html文件，但不建议这么做。
因为每次Cordova编译的时候，或者更新工程、安装插件时都会重新把红框里的文件覆盖到各个平台下的文件（蓝框标注的）。同时只编辑单个平台工程文件夹下的html页面，也不符合一次编写，同时编译发布多平台的跨平台应用开发思想。（2）所以一般我都是编辑外面的（红框标注）www文件夹里的页面，然后运行如下命令重新 build 工程，这些页面就会自动覆盖到各个平台下对应目录下。
cordova build（3）然后可以在Xcode中编译运行，也可以不用Xcode直接在“终端”中运行如下命令启动模拟器运行：
cordova emulate ios可以指定模拟器使用的模拟设备：
cordova emulate ios --target iPhone-6s cordova emulate ios --target iPhone-6s-Plus
3，运行结果如下
（1）运行如下命令：
cordova serve ios（2）可以看到服务启动成功了
（3）在浏览器中打开相关地址 http://localhost:8000 （不管是桌面浏览器还是移动浏览器都行，下面是使用Safari）
全部评论（5）
你好!请问:执行项目后首先执行的是index.html的原理是什么?代码在哪?因为我只知道在ios项目中执行过程是main->AppDelegate->ViewController,在新建的项目中找不到代码有指向执行代码.
站长回复：初始页面可以在config.xml中配置，我们可以在里面把index.html修改成其他html页面。
为什么我的总是安装不了呢？？
在终端运行 npm -v ，有版本号，但是输入sudo npm install -g cordova安装却无法完成。
安装时说证书尚未有效certificate is not yet valid
输入cordova -v时显示command not found
还望站长解答一下，谢谢！！！
站长回复：这个问题我也不太清楚，没遇到过。网上说有可能是电脑日期时间设置有问题，你检查下。
怎么用Cordova和Swift做混合开发呢？站长能介绍下吗？想实现部分页面使用Cordova 一部分使用原生的viewcontroller，互相调用和各页面之间导航
站长回复：使用Cordova的目的是实现跨平台应用的开发，即只要写一套H5页面就可以自动构建成各个平台的应用，让开发人员不用写任何平台系统原生代码。
好文章T.T 前几天准备用这个做的，但是组里没人会用这个，折腾了一天没弄好就放弃了，开始自己写html5，早一点看到这个就好了
站长回复：很高兴文章对你有所帮助，这几天我还会陆续写几篇Cordova相关的文章。
谢谢分享。
站长回复：不客气，后面还会更新几篇Cordova相关文章，你可以关注下。