欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-03-02 19:29:13
...
(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'编码。
Cordova 3.x 基础(6) -- Sample工程解析
            
    
    博客分类: Cordova CordovaPhoneGap 

(2)www文件夹下的代码

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

index.hml
针对Webview应用的设置
<meta name="format-detection" content="telephone=no" />
<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
<script type="text/javascript" src="cordova.js"></script>

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

调用index.js
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
    app.initialize();
</script>

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

(3)Android工程

添加平台支持
cordova platform add android
***Cordova会调用Android SDK在app1\platforms\android中创建一个完整的Android应用工程。
Cordova 3.x 基础(6) -- Sample工程解析
            
    
    博客分类: Cordova CordovaPhoneGap 

工程目录结构
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工程下
Cordova 3.x 基础(6) -- Sample工程解析
            
    
    博客分类: Cordova CordovaPhoneGap 

因为platforms\android下的代码都是在build的时候自动生成的,所以修改的话没有什么意义,应该修改Cordova工程根目录下的文件。你也可以通过Eclipse的Resource设置把他们显示出来。
Cordova 3.x 基础(6) -- Sample工程解析
            
    
    博客分类: Cordova CordovaPhoneGap 
Cordova 3.x 基础(6) -- Sample工程解析
            
    
    博客分类: Cordova CordovaPhoneGap 

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等等。
  • Cordova 3.x 基础(6) -- Sample工程解析
            
    
    博客分类: Cordova CordovaPhoneGap 
  • 大小: 6.7 KB
  • Cordova 3.x 基础(6) -- Sample工程解析
            
    
    博客分类: Cordova CordovaPhoneGap 
  • 大小: 15.3 KB
  • Cordova 3.x 基础(6) -- Sample工程解析
            
    
    博客分类: Cordova CordovaPhoneGap 
  • 大小: 22.5 KB
  • Cordova 3.x 基础(6) -- Sample工程解析
            
    
    博客分类: Cordova CordovaPhoneGap 
  • 大小: 23.1 KB
  • Cordova 3.x 基础(6) -- Sample工程解析
            
    
    博客分类: Cordova CordovaPhoneGap 
  • 大小: 24 KB
相关标签: Cordova PhoneGap