- 浏览: 3548685 次
- 性别:
- 来自: 大连
博客专栏
-
使用Titanium Mo...
浏览量:38147
-
Cordova 3.x入门...
浏览量:607314
-
常用Java开源Libra...
浏览量:682336
-
搭建 CentOS 6 服...
浏览量:89355
-
Spring Boot 入...
浏览量:401851
-
基于Spring Secu...
浏览量:69694
-
MQTT入门
浏览量:91723
文章分类
最新评论
-
afateg:
阿里云的图是怎么画出来的?用什么工具?
各云服务平台的架构图 -
cbn_1992:
博主,采用jdbctoken也就是数据库形式之后,反复点击获取 ...
Spring Security OAuth2 Provider 之 数据库存储 -
ipodao:
写的很是清楚了,我找到一份中文协议:https://mcxia ...
MQTT入门(6)- 主题Topics -
Cavani_cc:
还行
MQTT入门(6)- 主题Topics -
fexiong:
博主,能否提供完整源码用于学习?邮箱:2199611997@q ...
TensorFlow 之 构建人物识别系统
(1)Node.js的使用
Cordova CLI基于node.js,所以有必要知道nodejs最基本的知识。
(2)2个重要的路径
https://github.com/apache/cordova-cli
https://github.com/apache/cordova-android
(3)输入命令到执行完的过程
安装完Nodejs后,npm的路径就被放到了环境变量PATH中。
以下简称NPM_ROOT,安装完Cordova后,在这个文件夹下有:
所以在输入cordova cli命令时,入口就是这两个文件,以下以cordova.cmd为例说明。
a) 输入命令(根据不同的命令处理不同,这里以添加平台支持为例)
b) 执行<NPM_ROOT>/cordova.cmd
其中%~dp0代表的是batch文件所在路径,比如执行C:\bat_files\example.bat,那么%~dp0 就是 C:\bat_files\。这里就是指NPM_ROOT。类似shell的$0就是Windows下batch文件中获取参数的一种方式,可以在命令行窗口执行“for /?”可以查看详细说明。启动node执行cordova(nodejs)文件,并把所有参数传给它。(%*:输入的所有参数)
c) 执行cordova(nodejs)
路径:<NPM_ROOT>\node_modules\cordova\bin
nodejs文件:cordova
addTs()函数是打印执行时间,默认未开启,所以只要代码是:
****cordova.cmd 作用和npm文件夹下的cordova.cmd一样,%~dpn0 代表带路径的batch文件名。
d) 进入<NPM_ROOT>\node_modules\cordova\src\cli.js
d.1)// 导入node_modules\cordova\cordova.js
var cordova = require('../cordova');
-> // 导入node_modules\cordova\src\util.js
-> var cordova_util = require('./src/util');
-> // 通过addModuleProperty()方法加载不同命令的(比如这里的platform)代码
-> addModuleProperty(module, 'platform', './src/platform', true);
d.2)对输入参数进行解析提取
d.3)根据不同命令执行cordova.raw[cmd].call();
比如调用platform()方法。
e) 进入<NPM_ROOT>\node_modules\cordova\src\platform.js
***0***
***1***
进入 <LIB_ROOT>\android\cordova\3.4.0\bin
create.bat
create(nodejs)
进入 <LIB_ROOT>\android\cordova\3.4.0\bin\lib
create.js
说是创建其实大部分都是从libdir拷贝过来的,执行了一下“android update project”。
***2***
进入 <NPM_ROOT>\node_modules\cordova\node_modules\plugman
plugman.js
进入 <NPM_ROOT>\node_modules\cordova\node_modules\plugman\src
install.js
进入 <NPM_ROOT>\node_modules\cordova\node_modules\plugman\src
prepare.js
从plugins往\platforms\android\assets\www\plugins下Copy插件JS代码的时候,添加了模块的定义,所以最终执行的插件的JS和安装的JS是不一样的。
以上过程只是主要的处理流程,至此Android项目创建成功,并且以下两个Cordova核心的js也放置到了相应的位置。
其他的命令各自有各自的作用,所以处理内容不同。特别要说的是执行和project相关的命令时,最终会调用到各个平台工程下的脚本,比如:platforms\android\cordova。放在project下的目的除过各个平台的脚本不一样以外,也使该工程更独立,只要有Nodejs环境即可编译运行。
参考:
http://blog.csdn.net/mociml/article/category/1409992
Cordova CLI基于node.js,所以有必要知道nodejs最基本的知识。
// define:1个module1个js文件 exports.printFoo = function(){ return "foo" } // import var foo = require('./foo.js'); // call console.log(foo.printFoo());
引用
node main.js
(2)2个重要的路径
- C:\Documents and Settings\RenSanNing\Application Data\npm\node_modules\cordova
- C:\Documents and Settings\RenSanNing\.cordova\lib (以下简称LIB_ROOT)
https://github.com/apache/cordova-cli
https://github.com/apache/cordova-android
(3)输入命令到执行完的过程
安装完Nodejs后,npm的路径就被放到了环境变量PATH中。
引用
C:\Documents and Settings\RenSanNing\Application Data\npm
以下简称NPM_ROOT,安装完Cordova后,在这个文件夹下有:
- cordova.cmd(windows batch)
- cordova(linux shell)
所以在输入cordova cli命令时,入口就是这两个文件,以下以cordova.cmd为例说明。
a) 输入命令(根据不同的命令处理不同,这里以添加平台支持为例)
引用
cordova platform add android
b) 执行<NPM_ROOT>/cordova.cmd
引用
node "%~dp0\node_modules\cordova\bin\cordova" %*
其中%~dp0代表的是batch文件所在路径,比如执行C:\bat_files\example.bat,那么%~dp0 就是 C:\bat_files\。这里就是指NPM_ROOT。类似shell的$0就是Windows下batch文件中获取参数的一种方式,可以在命令行窗口执行“for /?”可以查看详细说明。启动node执行cordova(nodejs)文件,并把所有参数传给它。(%*:输入的所有参数)
c) 执行cordova(nodejs)
路径:<NPM_ROOT>\node_modules\cordova\bin
nodejs文件:cordova
addTs()函数是打印执行时间,默认未开启,所以只要代码是:
var CLI = require('../src/cli'); new CLI(process.argv);
****cordova.cmd 作用和npm文件夹下的cordova.cmd一样,%~dpn0 代表带路径的batch文件名。
d) 进入<NPM_ROOT>\node_modules\cordova\src\cli.js
d.1)// 导入node_modules\cordova\cordova.js
var cordova = require('../cordova');
-> // 导入node_modules\cordova\src\util.js
-> var cordova_util = require('./src/util');
-> // 通过addModuleProperty()方法加载不同命令的(比如这里的platform)代码
-> addModuleProperty(module, 'platform', './src/platform', true);
d.2)对输入参数进行解析提取
d.3)根据不同命令执行cordova.raw[cmd].call();
比如调用platform()方法。
e) 进入<NPM_ROOT>\node_modules\cordova\src\platform.js
function platform(command, targets) { // 验证当前文件夹是否是Cordova-based project var projectRoot = cordova_util.cdProjectRoot(); // 获取Hooks文件 var hooks = new hooker(projectRoot); // ... // 调用相应的方法(比如:add)****** add(hooks, projectRoot, targets, opts) }
function add(hooks, projectRoot, targets, opts) { // 读入config.xml var xml = cordova_util.projectConfig(projectRoot); var cfg = new ConfigParser(xml); // 执行before_platform_add的Hook hooks.fire('before_platform_add', opts) // 获取libDir的目录即: <LIB_ROOT>\android\cordova\3.4.0 lazy_load.based_on_config(projectRoot, t) // 调用Android SDK****** call_into_create(t, projectRoot, cfg, libDir, template, copts) // 执行after_platform_add的Hook hooks.fire('after_platform_add', opts); }
function call_into_create(target, projectRoot, cfg, libDir, template_dir, opts) { // ... // 检查平台依赖***0*** module.exports.supports(projectRoot, target) var bin = path.join(libDir, 'bin', 'create'); // 调用bat创建project***1*** superspawn.spawn(bin, args, opts || { stdio: 'inherit' }) // 调用prepare require('../cordova').raw.prepare(target); // 把merges文件夹下的文件覆盖过去 createOverrides(projectRoot, target); // 通过plugman安装plugins下的所有插件***2*** plugman.raw.install(target, output, path.basename(plugin), plugins_dir); }
***0***
function supports(project_root, name) {、 // 平台配置解析文件 <NPM_ROOT>\node_modules\cordova\platforms.js // 具体Android在:src\metadata\android_parser var platforms = require('../platforms'); var platformParser = platforms[name].parser; // 检查平台依赖lib是否存在 platformParser.check_requirements(project_root); }
***1***
进入 <LIB_ROOT>\android\cordova\3.4.0\bin
create.bat
引用
SET script_path="%~dp0create"
node %script_path% %*
node %script_path% %*
create(nodejs)
var create = require('./lib/create'); create.createProject(args._[0], args._[1], args._[2], args._[3], args['--shared'], args['--cli']).done();
进入 <LIB_ROOT>\android\cordova\3.4.0\bin\lib
create.js
说是创建其实大部分都是从libdir拷贝过来的,执行了一下“android update project”。
引用
C:\Documents and Settings\RenSanNing\.cordova\lib\android\cordova\3.4.0
exports.createProject = function(project_path, package_name, project_name, project_template_dir, use_shared_project, use_cli_template) { // ... // 检测Ant(ant -version),Java(java -version),Android(android list targets) check_reqs.run(); // 前边有很多Copy文件的准备工作,其中最重要的cordova.js就是从以下路径Copy过来的。 // <LIB_ROOT>\android\cordova\3.4.0\framework\assets\www\cordova.js // 这里就是创建Android工程的具体实现 // cmd:android update project --subprojects --path "platforms\android" --target android-19 --library "CordovaLib" // CordovaLib工程也是从<LIB_ROOT>\android\cordova\3.4.0\frameworkCopy过去的 // target_api取得是<LIB_ROOT>\android\cordova\3.4.0\framework\project.properties的target=android-19 runAndroidUpdate(project_path, target_api, use_shared_project); }
***2***
进入 <NPM_ROOT>\node_modules\cordova\node_modules\plugman
plugman.js
进入 <NPM_ROOT>\node_modules\cordova\node_modules\plugman\src
install.js
function installPlugin(platform, project_dir, id, plugins_dir, options) { //... // 这里就是解析plugin.xml后安装plugin的具体实现 runInstall(current_stack, platform, project_dir, plugin_dir, plugins_dir, options) //... }
function runInstall(actions, platform, project_dir, plugin_dir, plugins_dir, options) { //... // Copy文件 copyPlugin(); handleInstall(); //... }
function handleInstall(actions, plugin_id, plugin_et, platform, project_dir, plugins_dir, plugin_dir, filtered_variables, www_dir, is_top_level) { //... plugman.prepare(project_dir, platform, plugins_dir, www_dir); //... }
进入 <NPM_ROOT>\node_modules\cordova\node_modules\plugman\src
prepare.js
scriptContent = 'cordova.define("' + moduleName + '", function(require, exports, module) { ' + scriptContent + '\n});\n';
从plugins往\platforms\android\assets\www\plugins下Copy插件JS代码的时候,添加了模块的定义,所以最终执行的插件的JS和安装的JS是不一样的。
// 生成cordova_plugins.js var final_contents = "cordova.define('cordova/plugin_list', function(require, exports, module) {\n"; final_contents += 'module.exports = ' + JSON.stringify(moduleObjects,null,' ') + ';\n'; final_contents += 'module.exports.metadata = \n'; final_contents += '// TOP OF METADATA\n'; final_contents += JSON.stringify(pluginMetadata, null, ' ') + '\n'; final_contents += '// BOTTOM OF METADATA\n'; final_contents += '});';
以上过程只是主要的处理流程,至此Android项目创建成功,并且以下两个Cordova核心的js也放置到了相应的位置。
- platforms\android\assets\www\cordova.js
- platforms\android\assets\www\cordova_plugins.js
其他的命令各自有各自的作用,所以处理内容不同。特别要说的是执行和project相关的命令时,最终会调用到各个平台工程下的脚本,比如:platforms\android\cordova。放在project下的目的除过各个平台的脚本不一样以外,也使该工程更独立,只要有Nodejs环境即可编译运行。
- prepare
- compile(platforms\android\cordova\build)
- build(prepare->compile)
- run(prepare->platforms\android\cordova\run)
- emulate(prepare->platforms\android\cordova\run) 比run多了个参数“--emulator”
参考:
http://blog.csdn.net/mociml/article/category/1409992
发表评论
-
如何制作一个发布版的ionic应用?
2015-04-23 11:27 16800如何为Android APK签名,已经在这里说过了。这里说说如 ... -
Cordova各版本的不同
2015-04-12 17:26 31226Cordova每次大版本的发布都会带来系统架构很大的变化,很多 ... -
把CordovaWebView嵌入到自己的应用(Embedding WebViews)
2015-04-07 10:56 25141以下以Android为例。 (1)下载最新版的Cordova ... -
完整配置的Cordova-Phonegap-Ionic-Android环境
2015-01-22 17:01 9620搭建开发环境是程序员的基本功,虚拟机技术(VMware、Vir ... -
Cordova 3.x 入门 - 目录
2014-12-06 21:32 59430这个系列是基于Cordova 3. ... -
Awesome PhoneGap/Cordova
2014-12-03 22:23 3494A curated list of amazingly awe ... -
把Crosswalk打包到Cordova应用中
2014-10-09 16:02 4862(1)从Crosswalk官网下载Cordova Androi ... -
Eclipse开发ionic应用
2014-09-19 11:10 22141(1)首先下载最新版的Eclipse 4.4 (Luna) ... -
Cordova 3.x 实用插件(6) -- 检查APP是否被安装
2014-09-12 11:17 10078应用中经常要启动其他应用,比如:打开市场为自己的应用打分、强制 ... -
Cordova 3.x 实用插件(5) -- 通过自定义URL Scheme启动你的APP
2014-09-11 14:45 7591通过URL Scheme来启动APP是一种很常见的做法,比如: ... -
Cordova 3.x 实例开发 -- 基于Ionic的Todo应用
2014-05-27 13:04 32136基于Ionic的Todo应用,以下为Android截图,代码在 ... -
PhoneGap和Cordova的区别
2014-05-15 10:56 10020Cordova历史发展 ・2009年 通过iPhoneDevC ... -
Cordova Android中ShowTitle的问题
2014-04-28 13:34 3984根据官方文档的描述,要想显示TitleBar需要在config ... -
Cordova 3.x 源码分析(7) -- CordovaLib概要
2014-04-25 17:16 10280在http://rensanning.iteye.com/bl ... -
Cordova 3.x 源码分析(6) -- cordova.js本地交互JS<->Native
2014-04-24 12:11 15757src/android/android/nativeapipr ... -
Cordova 3.x 源码分析(5) -- cordova.js导入、初始化、启动、加载插件
2014-04-22 16:44 27146执行cordova.js的入口就以下2行代码: // 导入co ... -
Cordova 3.x 源码分析(4) -- cordova.js事件通道pub/sub
2014-04-22 15:40 4316作为观察者模式(Observer)的一种变形,很多MV*框架( ... -
Cordova 3.x 源码分析(3) -- cordova.js模块系统require/define
2014-04-16 13:21 6504类似于Java的package/import,在JavaScr ... -
Cordova 3.x 源码分析(2) -- cordova.js概要
2014-04-16 13:14 11545前提环境: 引用Platform: android Versi ... -
Cordova 3.x 实用插件(4) -- Android的SEND、VIEW、CALL(WebIntent)
2014-04-09 16:20 6654插件地址:https://github.com/Initsog ...
相关推荐
在本书中,作者rensanning将带领读者入门Cordova 3.x,涵盖了基础知识点、实用插件、源码分析和实例开发等方面的内容。 首先,作者介绍了如何在Windows和Android环境下搭建Cordova开发环境,这是开发移动应用的第一...
《mapsforge-cordova-plugin-...总的来说,这个压缩包为开发者提供了一个深入学习Cordova和mapsforge集成的实践案例,通过分析和修改源码,可以进一步提升移动应用开发技能,尤其是关于离线地图展示和操作的能力。
Apache Cordova是一个流行的开源框架,用于构建原生移动应用程序,主要使用HTML、CSS和JavaScript。这个项目名为“cordova-...通过分析项目源码,开发者可以更深入地了解Cordova的工作方式,并扩展到更复杂的应用开发。
- 安装 Ionic CLI 和 Cordova CLI:`npm install -g @ionic/cli @cordova/cli` - 检查 SDKs:对于 Android,需要安装 Android Studio 和配置相应的 SDK 平台工具;对于 iOS,需要 Xcode。 2. **创建项目**: - ...
1. **Cordova插件开发**:理解Cordova插件的工作原理是必要的,包括如何通过JavaScript接口与设备的原生层进行通信,以及如何使用Cordova CLI创建和管理插件。 2. **JavaScript基础**:熟悉JavaScript语法,包括...
要在 Cordova 项目中使用 `cordova-flirone-plugin`,首先需要通过 Cordova CLI 添加插件,然后在 JavaScript 代码中引入相应的 API。安装过程可能包括以下步骤: 1. 在命令行中运行 `cordova plugin add cordova-...
8. **源码分析**:深入到Cordova的源代码,理解其核心组件和事件处理机制。 9. **最佳实践**:提供开发Cordova应用时的技巧和最佳实践,如性能优化、内存管理等。 10. **工具使用**:分享如何有效利用各种开发工具...
1. **PhoneGap 架构** PhoneGap 使用 Apache Cordova 作为其底层引擎,它提供了一个 JavaScript API,使得 Web 应用可以调用设备的硬件功能。当开发者使用 JavaScript 调用这些 API 时,PhoneGap 会通过 WebView...
**PhoneGap源码分析** 在"PHONEGAP入门经典源码"中,我们可以深入学习以下几个方面: 1. **项目结构**:源码通常包含HTML、CSS、JavaScript文件以及配置文件如`config.xml`。HTML负责界面布局,CSS负责样式,...
7. **源码分析** 标签中的“源码”提示我们可以深入研究插件的内部实现。通过阅读源码,我们可以学习如何与原生平台进行交互,理解 Cordova 插件桥接机制的工作原理,以及如何优化性能和处理平台差异。 8. **工具*...
3. **构建阶段**:PhoneGap CLI(命令行接口)或PhoneGap Build服务用于编译和构建各个目标平台的应用程序。 4. **运行阶段**:打包后的应用在目标设备上运行,Cordova的WebView组件负责加载和渲染Web内容,并处理...
在IT行业中,Ionic是一款非常流行的开源框架,用于构建高性能的...通过分析项目结构和源代码,开发者可以学习到如何组织一个基于Ionic和TypeScript的应用,以及如何利用这两种技术来构建可扩展、可维护的移动解决方案。
**源码分析:** “m00sey-phonegap-iphone-95c64f4”这个目录可能包含了以下文件和目录: 1. **config.xml**:PhoneGap项目的配置文件,定义了应用的元数据、权限和插件。 2. **www**:存放所有Web资源的目录,包括...
本文将深入探讨Ionic框架,并通过Mallzee应用的源码分析,揭示其在实际项目中的运用。 1. **Ionic框架基础** - **架构**:Ionic基于AngularJS,提供了丰富的UI组件,如侧滑导航、下拉刷新等,用于构建原生感的移动...
1. 安装必要的环境,如Node.js、npm、Ionic CLI和Cordova。 2. 解压项目文件并进入项目目录。 3. 使用`npm install`安装项目依赖。 4. 运行`ionic serve`启动开发服务器并预览应用。 5. 编辑`src/`目录下的代码,...
- 创建PhoneGap项目时,首先需要在命令行中使用PhoneGap或Cordova CLI初始化一个新的项目结构。 - 配置项目的`config.xml`文件,设置应用的元数据,如应用名称、版本号、权限等。 - 将HTML、CSS和JavaScript代码...
这个名为 "phonegap_test1...对于源码分析,可以通过阅读HTML和JS文件了解用户界面和逻辑处理;对于工具的使用,可以按照官方指南逐步操作。最后,理解ada申请文档的内容,可能对理解应用的发布流程和版本更新有帮助。
- PhoneGap的历史:PhoneGap起源于开源项目Apache Cordova,后来被Adobe收购并发展为一个强大的移动开发平台。 - 工作原理:PhoneGap通过封装设备API,使Web应用能够访问设备硬件,如摄像头、GPS、加速度计等。 -...
这通常通过使用Cordova CLI(命令行接口)来完成,命令可能类似于`cordova plugin add phonegap-plugin-local-notification`。安装完成后,就可以在JavaScript中使用这个插件提供的API来创建和管理本地通知。 例如...
PhoneGap入门经典源码是针对初学者的一份宝贵资源,旨在深入浅出地介绍PhoneGap这一跨平台移动...在实际项目中,结合PhoneGap Build或Cordova CLI,我们可以快速构建和部署应用,实现从Web开发到移动开发的无缝过渡。