ios cordova html5,使用Cordova进行iOS开发

我们知道,在UIKit中的UIWebView虽然已经提供了很多功能了，比如JavaScript和Objc之间的通信。但是考虑到一个问题，如果在Hybrid App中，如何才能实现JavaScript调用本地的一些硬件设备，如摄像头、音频、还有本地存储呢？首先想到的就是规定一些协议，在UIWebViewDelegate 中去接收JavaScript发来的消息并且由Objc代码去控制本地的数据库访问，控制摄像头和音频等等。但是诸如如何在WebView上显示本地摄像头视频，实现起来还是比较困难的。那么问题来了，如何实现这些协议，并且有广泛的适用性，让广大的开发者去使用这一套框架？

下面主要介绍一个开源的框架: Cordova，它的前身是PhoneGap，被Apache收购之后就改成Cordova了.

1、安装cordova需要先安装node.js;

注:一般选择之前毕竟稳定的版本,新版我安装的时候出现安装失败等问题

node.js.png

2、如果你没有安装git client，需要下载并安装一个git客户端。

git.png

3、使用node.js的依赖包管理工具npm进行Cordova的安装

打开终端输入如下命令进行安装：

$ sudo npm install -g cordova

注:$ 不可复制,此处是为了提示后面的代码是终端命令

卸载的方式为

$ sudo npm uninstall cordova -g

4、新建一个Cordova的项目

$ cd Desktop/ //进入桌面

$ cordova create Demo qianghui Tianxia //第一个参数为文件夹名, 第二个参数为App id, 第三个参数为project名

创建完成提示: Creating a new cordova project.

1.png

注:以上为创建好的文件夹内部目录

hooks：存放自定义cordova命令的脚本文件。每个project命令都可以定义before和after的Hook，比如：before_build、after_build。没用过，不展开了。

platforms：平台目录，各自的平台代码就放在这里，可以放一下平台专属的代码，现在这个目录应该是空的.

plugins：插件目录，安装的插件会放在这里。

www：最重要的目录，存放项目主题的HTML5和JS代码的目录。app一开始打开的就是这个目录中index.html文件。

config.xml：主要是cordova的一些配置，比如：项目使用了哪些插件、应用图标icon和启动页面SplashScreen，修改app的版本，名字等信息，还有平台的配置。

5、建立完成之后我们可以加入iOS项目

$ cd Demo/ //进入刚刚创建好的文件夹目录下

$ cordova platform add ios //添加平台支持

//各个平台

$ cordova platform add ios

$ cordova platform add amazon-fireos

$ cordova platform add android

$ cordova platform add blackberry10

$ cordova platform add firefoxos

$ cordova platform add wp8

$ cordova platform add windows8

$ cordova platform add amazon-fireos

$ cordova platform add android

$ cordova platform add blackberry10

$ cordova platform add firefoxos

6、构造App ,build iOS项目

cordova build

项目结构.png

7、运行效果

运行效果.png