因公司项目需要快速开发产品的APP,也因为没有专业原生的APP开发人员(有WAP页面的),后来选择了利用Cordva这个框架来快速实现。历时将近一个月,本人负责IOS的实现,现将整个实践过程大致记录下来,后续几篇会记录不同阶段的不同实现内容。
Cordova 前世今生
随着APP开发需求的扩大,而iPhone开发的Object-C 对于Web开发又比较陌生,为了使web开发者可以通过HTML+CSS+JavaScript和本地应用程序(如摄像头和通讯录)交互更加便利,Nitobi公司开发了PhoneGap框架。
Adobe 2011年10月4日宣布收购了Nitobi Software 。
PhoneGap 被 Adobe 收购了 ,后来抽离出核心代码贡献给了 Apache Software Foundation,Apache 将这个项目命名为Cordova
Cordova是贡献给Apache后的开源项目。Cordova 相当于PhoneGap的核心引擎,你可以把它们的关系想象成类似于Webkit和Google Chrome的关系。
Cordova名字的由来: PhoneGap 由一个叫 Nitobi 的公司发起 ,曾经改名为 "Callback",接着又改名为 "Cordova",因为 Nitobi 的办公地点曾设在在一条叫 Cordova 的街道
Cordova 简介
Apache Cordova是一个开源的移动开发框架。允许你用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发。 应用在每个平台的具体执行被封装了起来,并依靠符合标准的API绑定去访问每个设备的功能,比如说:传感器、数据、网络状态等。
使用Apache Cordova的人群:
- 移动应用开发者,想扩展一个应用的使用平台,而不通过每个平台的语言和工具集重新实现。
- web开发者,想包装部署自己的web App将其分发到各个应用商店门户。
- 移动应用开发者,有兴趣混合原生应用组建和一个WebView(一个特别的浏览器窗口) 可以接触设备A级PI,或者你想开发一个原生和WebView组件之间的插件接口。
Cordova 架构图
-
WebView
WebView 是App 原生当中的浏览器组件,Cordova本质就是一个(混合编程)Hybrid框架。对原生和web直接交互的一些封装。对外提供了一套接口。 -
WebApp
WebApp是web编程的所有文件内容存放的地方。包括html,js,css等。
Cordova实现是通过调用原生的webview,然后默认加载本地的 index.html页面。index.html中引用其他的本地的css,javascript,images,media和其他等一些必要等资源文件。
这里其中有一个最重要等文件 config.xml。定义了运行过程中很重要的一些参数。
如果直接通过Web访问一个服务器的页面,一个是访问效果非常差,受限于网速,另一个就是和原生的交互问题。而将资源放在WebApp下,等于是在App本地访问页面,展示效果更接近于原生。
Cordova 安装
-
安装 node.js
在网站 https://nodejs.org/en/download/ 下载适合系统的 node.js 版本,安装即可。
-
安装 Cordova
Windows系统可以打开 cmd窗口,Mac系统可以打开终端。
命令行执行:$ npm install -g cordova
Cordova 创建项目,运行
-
创建项目
创建一个新的 cordova工程 <文件夹名> <包名> <app名>
$ cordova create MyTest com.cordova.test helloword
然后命令行所在目录,会生成一个MyTest的文件夹。生成文件如下:
-
添加平台
新创建的工程,然后需要进入目录,添加一个平台支持。
添加ios支持cordova platform add ios
查看所有支持的平台
cordova platform
-
项目启动
通过命令行启动App
cordova run ios
如果安装好了xcode,默认会启动一个模拟器.
进入目录MyTest/platforms/ios下,通过xcode打开,跟普通的项目一样,如下图所示:
选择你自己真机运行所需要的 Signing 中的Team值。 然后可以启动项目。
运行界面如下: