Cordova 3.x 基础(6) -- Sample工程解析

原文http://rensanning.iteye.com/blog/2020843

(1)通过Cordova CLI创建Cordova工程

最简化创建应用:

引用

cordova create app1

***默认使用package名:io.cordova.hellocordova、应用名:HelloCordova。

指定package名和应用名:

引用

cordova create app2 com.rensanning.app.cordova CordovaSample

***也可以单独只指定package名

带汉字的应用名:

引用

cordova create app3 com.rensanning.app.cordova Cordova例子

***config.xml文件使用‘UTF-8‘编码。 

(2)www文件夹下的代码

成功创建完成工程后,Cordova会默认生成index.html, css/index.css, img/logo.png 和 js/index.js。

index.hml 
针对Webview应用的设置

Html代码  

  1. <meta name="format-detection" content="telephone=no" />
  2. <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

调用Cordova核心API的js

Html代码  

  1. <script type="text/javascript" src="cordova.js"></script>

***从Cordova 3开始采用plugin的方式提供核心API,所以cordova.js文件中只是提供一些基本函数。

调用index.js

Html代码  

  1. <script type="text/javascript" src="js/index.js"></script>
  2. <script type="text/javascript">
  3. app.initialize();
  4. </script>

initialize()函数实际上是做deviceready事件的监听设置,当deviceready完成后,显示“Device is Ready”把“Connecting to Device”隐藏。

(3)Android工程

添加平台支持 
cordova platform add android 
***Cordova会调用Android SDK在app1\platforms\android中创建一个完整的Android应用工程。 

工程目录结构 
assets\www 
这个就是Cordova工程根目录下的www文件夹的所有内容。(cordova.js和cordova_plugins.js是Cordova自动创建的) 
***可见Cordova最终也会把你的代码以assets的形式打包到apk中,所以代码安全上,需要对js等进行压缩,核心代码最好不要放在客户端!!!

CordovaLib 
从3.3以后,Cordova从.jar改成了Library Project的形式。

cordova 
编译、运行工程的脚本。

platform_www 
防止用户换机器.cordova/lib不存在,备份cordova.js到此文件夹。build的时候实际上是用的这个文件。

libs 
空的文件夹,以前版本可能包含cordova-*.jar。如果你想添加android-support-v4.jar,可以通过插件的形式添加。

(4)在Eclipse中Import Android工程

在Cordova创建Eclipse的Android工程,做了两个特殊的设置:

  • 让Android工程下的"assets/www"和"res/xml/config.xml"不可见(还有一些其他不希望用户修改的文件夹)
  • 把Cordova工程的merges文件夹、www文件夹、config.xml文件链接到了Android工程下

因为platforms\android下的代码都是在build的时候自动生成的,所以修改的话没有什么意义,应该修改Cordova工程根目录下的文件。你也可以通过Eclipse的Resource设置把他们显示出来。 

Cordova Android工程的代码不是特别的复杂,通过继承CordovaActivity在首页面的Activity中,解析config.xml文件,做初期化设置,然后嵌入CordovaWebView并加载config.xml中配置的页面URL。

Cordova只是一个Webview的架子,只提供给你能够调用Native API的接口,在UI方面他不会管你页面是什么样子,也不会提供给你任何UI方面的功能,所以UI方面还要借助于jQuery MobileSencha TouchApp Framework(jQMoby)KendoUI MobileAdobe TopcoatjQTouchIonic FrameworkOnsen UI等等。

时间: 2024-10-07 19:08:16

Cordova 3.x 基础(6) -- Sample工程解析的相关文章

Cordova 3.x 基础(3) -- 调试Debug工具

Cordova 3.x 基础(3) -- 调试Debug工具 (1)Ripple Emulator 是基于Google Chrome的移动应用模拟器,已经捐赠给了ASF.Apache Ripple:http://ripple.incubator.apache.org/ Chrome Webstore安装地址: https://chrome.google.com/webstore/detail/geelfhphabnejjhdalkjhgipohgpdnoc 安装Ripple Emulator 引

Cordova 3.x 基础(1) -- 环境搭建(Windows / Android)

Cordova 3.x 基础(1) -- 环境搭建(Windows / Android) Mobile App分为三大类:Native App,Hybrid App,Web App.其中Hybrid App介于Native App和Web App之间,它能兼顾Native App的良好用户体验及强大的功能并具有Web App跨平台快速开发的优势.缺点在于依赖于各平台的WebView,WebView的性能好坏直接决定了Hybrid App的性能. 目前国内外的Hybrid App开发框架很多,比较

EasyUI基础入门之Parser(解析器)

前言 JQuery EasyUI提供的组件包括功能强大的DataGrid,TreeGrid.面板.下拉组合等.用户可以组合使用这些组件,也可以单独使用其中一个.(使用的形式是以插件的方式提供的) EasyUI体系结构 EasyUI所有的插件主要分为六大部分.Base基础.Layout布局.Menu&Button.Form表单.Window窗口等.从最基础的开始先掌握EasyUI基础部分.Base部分包含了八个基础插件分别为: parser(解析器) easyloader(加载器) draggab

Cordova 3.x 基础(5) -- 配置文件config.xml

原文:http://rensanning.iteye.com/blog/2019331 首先要注意的是:从3.3版本以后已经把www/config.xml移动到了根目录下. 在config.xml中定义的东西应该适应所有平台.在build工程的是时候,会看到“Generating config.xml from defaults for platform "android"”这样的字样,他会生成各个平台的config.xml. 生成的文件: Android:MyProject/plat

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

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

Android中直播视频技术探究之---基础核心类ByteBuffer解析

一.前言 前一篇文章我们介绍了Android中直播视频技术的基础大纲知识,这里就开始一一讲解各个知识点,首先主要来看一下视频直播中的一个重要的基础核心类:ByteBuffer,这个类看上去都知道了,是字节缓冲区处理字节的,这个类的功能非常强大,也在各个场景都有用到,比如网络数据底层处理,特别是结合网络通道信息处理的时候,还有就是后面要说到的OpenGL技术也要用到,当然在视频处理中也是很重要的,因为要处理视频流信息,比如在使用MediaCodec进行底层的视频流编码的时候,处理的就是字节,我们如

Cordova 3.x 基础(8) -- 几个不可或缺的lib

原文:http://rensanning.iteye.com/blog/2021720 (1)Zepto.js http://zeptojs.com/jQuery绝对是最流行的类库,但是现在对它的批评是越来越多,主要问题是它的大小,即使版本2.0中去除了对于IE6,IE7和IE8的支持,但是仍旧体积比较大,特别对于移动设备来说. 相比人们开始更加关注Vanilla JS http://vanilla-js.com/,它对于DOM处理以外的内容更快,更高效. 对于Hybrid App来说,Zept

Cordova 3.x 基础(7) -- Native API的使用

原文:http://rensanning.iteye.com/blog/2021619 移动设备的Hardware接口包括:Accelerometer.Camera.Capture.Compass.Connection.Contacts.Device.Native Events.File.Geolocation.Notification.Storage.Gestures/Multitouch.Messages/Telephone.Bluetooth.NFC.Vibration.Cordova的N

Cordova 3.x 基础(2) -- 应用图标icon和启动页面SplashScreen

原文:http://rensanning.iteye.com/blog/2017380 最新版Cordova CLI已经支持在config.xml中配置<splash> 和 <icon>,CB-2606, CB-3571 Add support for <icon>, <splash>.设置如下: Xml代码   <platform name="android"> <icon src="res/android/