Cordova框架原理

一,简介

Cordova是一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台。

Cordova的前身是Phonegap,第一段代码是在2008年8月的iPhoneDevCamp上写成的。

2011年7月29日,PhoneGap发布了1.0版产品。2011年10月4日Adobe公司收购了PhoneGap和PhoneGap Build的新创公司Nitobi Software,随后将Phonegap的核心代码剥离并捐给了Apache公司,并改名为了Cordova。最新的版本为Cordova6.2.0。

二,结构

第一部分:Cordova Application是Cordova框架独立于不同手机操作系统的一个封装层。具体包括 
1)Web App层是开发人员编写代码的主要地方,应用程序以网页的形式呈现,在一个index.html的本地页面文件中引用所需要的各种Web资源,如CSS、JavaScript、图像、影音文件等。应用程序的配置保存在config.xml文件中。

2)WebView层用来呈现用户界面,即web页面的展现。例如,在Android平台是通过WebView控件实现web页面的呈现。

3)Plugins主要用于在JavaScript代码中调用各平台native的功能。Cordova项目已经包含一些核心的plugin,如电池、摄像头、通讯录等。开发人员也可以开发自定义的plugin,来实现所需要的功能。

第二部分:Mobile OS就是具体的手机操作系统层了,Cordova目前支持大部分的手机OS:ios、Android、wp、blackberry等等; 
这张图可以让我们一目了然的了解Cordova框架总体的技术架构。实际上我们可以这么理解所谓的“跨平台”: 
Cordova预先帮我们预先封装了各种mobile os上最常用的本地api调用,然后以统一的JavaScript api形式提供给webapp开发者调用。(注:cordova还提供另外一种Hybird即混合开发模式,这个后面有时间再说。)对于webapp的开发者来说,无需关注系统底层调用实现细节,也就实现了所谓的“跨平台”。实际上,各平台涉及到本地能力的调用,以插件形式被封装了。(每个插件的实现实际上还是Native模式)。

JS和Native是如何实现互调的,这里先研究安卓的

Cordova-Android是通过addJavascriptInterface(Android Webview的API)和JS Prompt这两种方式来实现JS对于Native API的调用。

我们先来看一个Cordova-Android框架中的一个关键类: CordovaActivity.java。
该类继承了Android Activty类,实际上是Cordova-Android的Launcher Activity,也就是启动入口activity。

应用启动后,核心干了两件事:读取config.xml和loadUrl。这个loadUrl实际上就是加载webapp的启动页(默认是index.html)

时间: 2024-10-28 21:29:26

Cordova框架原理的相关文章

Cordova + idea 环境搭建

1.安装前期工作 1).安装Node.js http://nodejs.cn/download/ 里面内置了npm,可以用来安装 Cordova,把该路径添加到环境变量,这样就可以在 cmd 里面任何地方使用 npm 命令 2).安装Android SDK 见 http://blog.csdn.net/hj960511/article/details/53213225 2.安装cordova 并创建应用程序 1).安装 cordova 去任意路径下执行下列命令,如果 npm 没有找到,需要在第一

Phonegap(Cordova)3.4 + Android 环境搭建

PhoneGap是一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台.它使开发者能够利用iPhone,Android,WP7等多种智能手机的核心功能--包括地理定位,加速器,联系人,声音和振动等,此外PhoneGap拥有丰富的插件,可以以此扩展无限的功能. PhoneGap最初由Nitobi开发, 它被Adobe收购后,PhoneGap项目也被贡献给Apache软件基金会,并改名为 Apache Cordova. 目前最新版本:3.4.1 . Phone

iOS 添加Cordova到已存在的Xcode 工程里

Cordova官网关于如何创建PhoneGao项目的步骤已经很详细了,这里就不赘述了. 实际项目开发中可能需要添加Cordova到已经存在的工程中,近期就遇到了这个问题.虽然网上也有一些教程, 但已不适用于最新版本的Cordova了,故特将步骤纪录如下. 1.加入我们已经存在名为Demo项目,目录结构如下: 2.拷贝Cordova相关文件到Demo目录下,拷贝后目录结构如下 3.将CordovaLib.xcodeproj添加到Demo工程中,右键选择Add Files To "Demo"

Apache?Cordova开发环境搭建(window8)

前言: 现在PhoneGap的代码已经贡献给了Apache软件基金会(ASF),并且改名为 Apache Cordova.这个名字来源于温哥华的科尔多瓦街(Cordova Street),它是创建PhoneGap时Nitobi公司的所在地. 具体步骤: 官方安装教程地址: http://docs.phonegap.com/en/edge/guide_cli_index.md.html#The%20Command-Line%20Interface 一.安装Cordova CLI 1.下载并安装No

通过cordova将vue项目打包为app

准备工作:需要之前配置好vue-cli脚架构,安装好cordova环境.下面开始对vue.js项目进行打包,打包环境为Android. 1.添加cordova项目 $  cordova create myApp1 org.apache.cordova.myApp myApp2 其中: myApp1:cordova目录名 org.apache.cordova.myApp: 包名 myApp2: 项目名(在config.xml的<name>中查看) 2.在vue中添加cordova的配置 myAp

Android开发学习--Ionic+Cordova 环境搭建

我们看 Ionic 能给我们提供什么?  一个样式库,你可以使用它 来 装饰你的 HTML 网页 ,看起来 想 移动程序的 界面,什么 header .content.footer.grid.list.这貌似没什么 实质性的东西, sencha touch ,jq 都能提供 .一个用 AngularJS 写的 工具库,姑且叫它 组件库吧.Ionic的 grid 设计的比较合理,比 bootstrap的 更强大.当然它 还包含 了angular-animate.angular-resource.a

vue+cordova项目

教你用Cordova打包Vue项目 现在国内越来越多的开发者使用Vue开发混合app,但是当大家开发完成过后才发现不知道该怎么将Vue项目打包成app.据我现在的了解打包Vue项目目前流行的就是使用weex和cordova.weex是阿里提供并且Vue的作者也极力推荐的,有兴趣的可以去学习使用一下.因为我本身是做angular+ionic的,所以比较青睐cordova,下面我就教大家怎么使用cordova打包Vue项目: 第一步:安装cordova 如果已经安装则直接跳过,否则执行以下命令: n

创建一个Cordova完整应用

本文承接上篇<创建Cordova插件>,通过实现一个简单的应用作为这个Cordova0基础系列的结束. 前边对Cordova编程已经讲了不少了.还没有拿真实应用为例完整的演练一遍构建过程.这里将用一个完整的应用为例从头到尾一步步的演示怎样创建和測试应用. 关于演示样例应用 把全部的API集中在一个样例中展示是一个好办法. 以下我们以实现一个指南针表盘为例. 应用在屏幕上显示一个表示指南针转盘的图像. 当用户沿着水平坐标轴转动设备时.指南针图像也转动.应用效果例如以下图: 这里会用到jQuery

cordova 插件开发

从事基于cordova开发混合APP也快一年了,一直没有自己"亲自操刀"写一个插件,因为网上插件太丰富了,可耻了. 今天完整的记录一次插件开发. cordova环境6.4.0 第一步安装:plugman npm install -g plugman 第二步:创建插件 plugman create --name <pluginName> --plugin_id <pluginID> --plugin_version <version> [--path