Cordova5--iOS实战（一）_iOS开发_
Cordova5--iOS实战（一）
来源：人气：2112
由于最近公司的项目要求用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，下面的版本已经证实可用。
下载地址：
下载后直接运行安装文件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://pmjs.org
npm info cordova
npm --registry http://pmjs.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.中修改，如果不指定的话默认为io.cordova.hellocordova；
第三个参数（可选）HelloWorld为App显示的名称，也可在config.xml中修改。
创建成功后可以打开hello目录查看以下结构：
|--conig.xml & & & & //cordova的配置文件
|--hooks/ & & & & & & //存放自定义cordova命令的脚本文件。 & & &
||--README.md&
|--platforms/ & & &//各个平台原生工程代码，会在build时被覆盖勿修改
|--plugins/ & & & &//插件目录（主要是提供各个平台的原生API）
|--www/ & & & & &//用H5编写的源代码目录，build时会被放入各个平台的assets\www目录。
||--index.html & & & //App入口html文件
3. 添加iOS平台支持
在终端中输入：
进入工程目录：
$ cd hello
添加iOS平台文件：
$cordova platform add ios
也可添加其他平台，如：
$cordova platform add android
Adding ios oject...
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
|||--cordova/
|||--CordovaLib/
|||--HelloWorld/
|||--platform_www/
|||--HelloWorld.xcodeproj
可直接打开HelloWorld.xcodeproj工程在Xcode中进行编译和运行，如图：
运行结果：
参考资料：
优质网站模板在Mac OSX和Ubuntu上搭建Cordova开发框架 | 码农日记
同学的个人博客
Theme | Powered byCordova 5.1.1在Mac终端创建iOS工程并添加插件 - 博客频道 - CSDN.NET
记录成长的自己
分类：PhoneGap/Cordova
Cordova 5.1.1在Mac终端创建iOS工程
1.首先需要在Mac上安装Node.js &下载地址:。 将下载的文件双击安装，下一步。。。大家都懂的。
2.第二步在终端利用Node安装Cordova 。
$ sudo npm install -g cordova
3.开始创建自己的iOS工程了。
进入对应的文件夹目录
选择对应的平台
创建iOS工程
耐心等待直到出现SUCCEEDED为止
4.下面为该项目工程添加插件，此处我只添加了一个插件，其他官方提供的插件安装方法相同，请参考此处&找到 &Add
Plugin Features
5.用Xcode运行创建的工程如下图：
注：刚才演示的工程我会放在github上面，有兴趣的朋友可以去下载看看,地址：。
排名：千里之外
（3）（2）（11）（2）（10）（1）当前位置：
& Cordova - 与iOS原生代码交互2（使用Swift开发Cordova的自定义插件）
Cordova - 与iOS原生代码交互2（使用Swift开发Cordova的自定义插件）
发布：hangge
在前一篇文章中我介绍了如何通过 js 与原生代码进行交互（），当时是直接对Cordova生成的iOS工程项目进行编辑操作的（添加Swift类和相关配置等）。
原来我也说过，使用 Cordova 进行跨平台应用开发时，不建议直接对生成的各个平台项目进行编辑（除非目前只要开发单一平台版本）。比如：html页面应该是编辑Cordova工程根目录下的 www 文件夹内容，再一次编译发布成多个平台项目。
同样的，如果需要实现与系统原生代码的交互，我们也应该将其封装成一个个插件（像原来介绍过的 camera插件，console插件）。这样就可以实现动态地添加或移除插件，也便于在其他项目中的复用。
本文介绍如何使用 Swift 开发一个Cordova功能插件。
1，自定义插件的功能说明
本文是将前文的口令验证功能封装成插件，所以最终实现的功能是一样的。即Swift这边接收传输过来的口令字符串，判断正确与否并反馈回页面。如果验证失败还会返回具体的失败原因信息。
2，自定义插件的使用效果图
同前文还是一样的。
& & &&& & &&
& & &&& & &&
3，自定义插件的创建
我们随便在本地建立一个文件夹（比如叫 HanggeSwiftPlugin），在里面放置插件的相关功能实现代码和配置文件。目录结构如下：
下面分别介绍各个文件的内容和功能
（1）src文件夹
这个下面就是放置插件的功能实现代码了，可以看到目前 src 文件夹下只有一个 ios 子文件夹。因为本文只实现了 iOS 的验证插件，如果还有 Android 版的验证插件，那么可以在 src 文件夹下再创建个 android 文件夹，然后把相关的 java 代码放到里面。
由于功能比较简单，在 ios 文件夹下只有一个实现类 HanggeSwiftPlugin.swift，具体代码如下：
import Foundation
@objc(HWPHanggeSwiftPlugin) class HanggeSwiftPlugin : CDVPlugin {
//验证口令方法
func verifyPassword(command:CDVInvokedUrlCommand)
//返回结果
var pluginResult:CDVPluginResult?
//获取参数
let password = command.arguments[0] as? String
//开始验证
if password == nil || password == "" {
pluginResult = CDVPluginResult(status: CDVCommandStatus_ERROR,
messageAsString: "口令不能为空")
}else if password != "hangge" {
pluginResult = CDVPluginResult(status: CDVCommandStatus_ERROR,
messageAsString: "口令不正确")
pluginResult = CDVPluginResult(status:CDVCommandStatus_OK)
//发送结果
mandDelegate.sendPluginResult(pluginResult, callbackId: command.callbackId)
（2）hangge-swift-plugin.js
JS模块文件，这里封装了插件的调用方法，这样在页面中使用的时候更加方便。
比如前文我们通过 Cordova.exec() 来调用 Swift 代码，这里我们使用 插件名称.插件方法() 即可，这样使用起来更加方便，代码也更加清晰。其内容如下：
'use strict';
var exec = require('cordova/exec');
var HanggeSwiftPlugin = {
verifyPassword: function(sendMsg, onSuccess, onFail) {
return exec(onSuccess, onFail, 'HanggeSwiftPlugin', 'verifyPassword', [sendMsg]);
module.exports = HanggeSwiftP
（3）plugin.xml
插件的配置文件。用来配置插件的名字，JS模块文件位置，以及各个平台的功能实现源码位置（这里只实现的iOS的验证功能，所以只配置了iOS平台相关内容）。
&?xml version="1.0" encoding="UTF-8"?&
&plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
id="hangge-swift-plugin"
version="0.1"&
&name&HanggeSwiftPlugin&/name&
&description&This plugin use to verify password&/description&
&js-module src="hangge-swift-plugin.js"&
&clobbers target="window.HanggeSwiftPlugin" /&
&/js-module&
&!-- iOS --&
&platform name="ios"&
&config-file target="config.xml" parent="/*"&
&feature name="HanggeSwiftPlugin"&
&param name="ios-package" value="HWPHanggeSwiftPlugin" /&
&/feature&
&/config-file&
&source-file src="src/ios/HanggeSwiftPlugin.swift" /&
&/platform&
4，自定义插件的安装
封装好的插件我们通过 cordova plugin add 命令来安装，假设我们要给 HelloWorld &这个工程添加刚才做的那个自定义验证插件。
（1）由于插件是使用Swift语言写的，首先在“终端”中进入到项目文件夹，并运行如下命令添加 Swift 支持插件：
cordova plugin add cordova-plugin-add-swift-support
（2）假设我们做的自定义插件是在用户“文稿”目录下，运行如下命令把这个插件添加到工程中来：
cordova plugin add ~/Documents/HanggeSwiftPlugin
进入项目文件夹下的 plugins 文件夹可以看到，自定义插件已经成功的添加进来。当然，这个自定义插件在各个平台工程下也同步安装了。
（3）以后如果想移除这个自定义插件，运行如下命令即可：
cordova plugin rm hangge-swift-plugin
5，自定义插件的使用
修改首页 index.html 为如下内容。
（1）我们还是可以通过Cordova.exec()来调用Swift验证代码
&!DOCTYPE html&
&title&口令验证&/title&
&meta http-equiv="Content-type" content="text/ charset=utf-8"&
&script type="text/javascript" charset="utf-8" src="cordova.js"&&/script&
&script type="text/javascript" charset="utf-8"&
//开始验证
function verify() {
//获取输入的口令
var password = document.getElementById("pwd").
//调用自定义的验证插件
Cordova.exec(successFunction, failFunction, "HanggeSwiftPlugin",
"verifyPassword", [password]);
//验证成功
function successFunction(){
alert("口令验证成功！");
//验证失败
function failFunction(message){
alert("验证失败："+message);
font-size:1
&body style="padding-top:50"&
&input type="text" id="pwd" &
&button onclick="verify();"&验证&/button&
在“终端”中运行如下命令编译：
cordova build
接着运行如下命令使用模拟器运行，即可看到效果：
cordova emulate ios
（2）当然还是建议使用 模块名.模块方法() 的形式调用自定义插件
&!DOCTYPE html&
&title&口令验证&/title&
&meta http-equiv="Content-type" content="text/ charset=utf-8"&
&script type="text/javascript" charset="utf-8" src="cordova.js"&&/script&
&script type="text/javascript" charset="utf-8"&
//开始验证
function verify() {
//获取输入的口令
var password = document.getElementById("pwd").
//调用自定义的验证插件
HanggeSwiftPlugin.verifyPassword(password, successFunction, failFunction);
//验证成功
function successFunction(){
alert("口令验证成功！");
//验证失败
function failFunction(message){
alert("验证失败："+message);
font-size:1
&body style="padding-top:50"&
&input type="text" id="pwd" &
&button onclick="verify();"&验证&/button&
（3）回调方法可以使用匿名函数
//开始验证
function verify() {
//获取输入的口令
var password = document.getElementById("pwd").
//调用自定义的验证插件
HanggeSwiftPlugin.verifyPassword(password,
function() { alert("口令验证成功！");},
function(message){
alert("验证失败："+message);
（4）在使用自定义插件之前还可以判断下插件是否存在，以防报错
//开始验证
function verify() {
//获取输入的口令
var password = document.getElementById("pwd").
//调用自定义的验证插件
if (window.HanggeSwiftPlugin) {
HanggeSwiftPlugin.verifyPassword(password,
function() { alert("口令验证成功！");},
function(message){
alert("验证失败："+message);
alert("未安装验证插件!");
源码下载：