[Cordova学习]1.Cordova環境作成步骤

最新推荐文章于 2025-01-04 22:59:47 发布

原创最新推荐文章于 2025-01-04 22:59:47 发布 · 972 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#phonegap #cordova #plugins

HYBRID学习专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了如何使用Cordova CLI进行Cordova工程的下载、安装、创建、平台添加、编译及APP安装过程，以Android平台为例进行了具体步骤演示。

参考地址：

http://cordova.apache.org/docs/en/4.0.0/guide_cli_index.md.html#The%20Command-Line%20Interface

前提

Cordova (Phonegap)在2.9.0以后、Cordova不能直接从官方文档下载，而是用nodejs等工具下载。

现在下载的Cordova版本号：
Android：   Cordova-android-3.6.4
iOS:   Cordova-iOS-3.7.0

安装环境：

Apache ant	Cordova工程编译
Nodejs	Cordova工程下载

1）Ant的安装 http://ant.apache.org/bindownload.cgi

apache-ant-1.9.4-bin.zip推荐下载安装到英文路径

2）nodejs的安装 http://nodejs.org/

环境变量不设置的话就要跑到该运行的文件夹下运行CORDOVA CLI下载的命令。

Cordova CLI下载以及运行

Cordova CLI 是CordovaのCommand Line Interface简称。使用CordovaCLI、开发者可以用Cordova为首的命令

简单容易的做成Cordova工程、添加删除插件。

好处：CLI命令可以快速做成Cordova工程，Native不懂的人可以迅速着手。
坏处：CLI不习惯使用没有安装nodejs等工具的开发环境下不方便、仅用于Cordova工程开发。

非CLI的话、Cordova的代码需要自行下载（http://archive.apache.org/dist/cordova/ ），做成好的文件夹里面

拷贝文件和相应的设置。

下面以Android为例CLI的下载到CORDOVA工程的生成。(iOS的命令和Android是一样的只不过安装在本地的路径区别)

１．nodejs文件夹下安装Cordova CLI

　 npm install -g cordova

安装路径为：
C:\Documents and Settings\{userName} \Application Data\npm\node_modules\cordova

２．在APP做成的文件夹下生成Cordova的HelloWorld的工程

cordova create hello com.example.hello HelloWorld

３．作成的hello工程文件夹下Cordova命令追加支持的平台。

下面以ANDROID为例 cordova platforms add android

※删除平台的命令：cordova platform remove　android

４．编译Cordova的hello工程

所有的OS都编译的命令：cordova build
只编译Android OS的命令： cordova build android

５．Cordova工程的APP安装

   模拟器上安装命令：cordova emulate android
   实际机器上安装命令：cordova run android
空CordovaのAPP在Android的模拟器上默认的画面是如下图。

Cordava文件夹结构

hello/
|-- config.xml
|-- hooks/
|-- platforms/
| |-- android/
| |-- ios/
|-- plugins/
| |-- org.apache.cordova.camera/
|-- www/
| |-- css/
| |-- img/
| |-- js/
  |-- index.html

config.xml cordovaの配置ファイル

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.example.hello" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>HelloWorld</name>
    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    </description>
    <preference name="EnableViewportScale" value="true"/>
    <feature name="nativealert">
        <param name="android-package" value="com.test.nativealert.NativeAlert" />
    </feature>
    <author email="dev@cordova.apache.org" href="http://cordova.io">
        Apache Cordova Team
    </author>
    <content src="index.html" />
    <access origin="*" />
</widget>

<name> app名称
<widget>　id 包名、version 版本号

<access> origin 是访问域名限制

<access origin="http://example.com" />
<access origin="http://foobar.example.com" />
<access origin="http://*.example.com" />
<access origin="*" /> （表示哪都可以访问）

<preference> APP运行时的参数，平台不同设置不同。
<feature > Native的插件内容（例如cordova plugin add org.apache.cordova.camera执行后有plugin.xml文件拷贝到这里）
<content> 网页访问地址。默认是index.html

hooks文件夹
Cordova命令在执行前执行后可以执行的脚本文件

platforms文件夹
存放各个平台代码文件夹，支持平台的命令执行后代码自动添加该文件夹

plugins文件夹
插件文件夹，插件增加的命令执行后自动添加到该文件夹

www文件夹
放置WEB资源和网页的文件比如index.html