Windows下cordova环境搭建及简单开发总结

一、简介:

Apache Cordova是一个开源的移动开发框架。允许你用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发。

应用在每个平台的具体执行被封装了起来,并依靠符合标准的API绑定去访问每个设备的功能,比如说:传感器、数据、网络状态等。

中文官网:http://cordova.axuer.com/

二、环境搭建:

1、下载并安装nodejs1.1、测试node是否安装成功:win+r => cmd => node -v

1.2、测试npm是否安装成功:win+r => cmd => npm -v

2、 安装ant2.1、下载ant,下载完成之后解压到你想安装的目录

2.2、配置环境变量

2.3、在命令行输入:ant -v 测试是否安装成功

3、 安装cordova3.1、在命令行输入:npm install -g cordova

3.2、在命令行输入:cordova -v 测试是否安装成功

4、安装Java开发工具包(JDK)4.1、下载地址 选择对应系统的版本

4.2、配置环境变量

4.2、测试安装是否成功:在命令行输入:java -version 或者 javac

5、安装Android Stand-alone SDK或者Android Studio。(推荐安装Android Studio)5.1、下载安装Android Studio

5.2、配置环境变量

5.3、在命令行输入:sdb 测试是否安装成功

5.4、安装完成后会在Android Studio目录下可以直接找到gradle目录,也需要配置gradle环境变量

5.5、在命令行输入:gradle -v 测试是否安装成功

6、环境变量配置步骤及示例:6.1、我的电脑=>右键打开属性=>高级系统设置=>环境变量=>新建/编辑=>填入变量名和变量值

6.2、需要配置的变量名有:JAVA_HOME、ANT_HOME、ANDROID_HOME、GRADLE_HOME、CLASSPATH

6.3、需要配置的变量值有(即各变量名的安装路径)示例:

JAVA_HOME 对应的变量值是:E:Java

ANT_HOME 对应的变量值是:E:Androidapache-ant-1.10.1-binapache-ant-1.10.1

ANDROID_HOME 对应的变量值是:E:Androidsdk

GRADLE_HOME 对应的变量值是:E:AndroidAndroid Studiogradlegradle-3.2

CLASSPATH 对应的变量值是:

.;%JAVAHOME%libdt.jar;%JAVAHOME%jre11.8.0_131libtools.jar (“ .; ” 必须注意)

6.4、配置PATH 即在PATH中加入:

%JAVA_HOME%bin;
%JAVA_HOME%jre11.8.0_131bin;
%ANT_HOME%bin;
%ANDROID_HOME%tools;
%ANDROID_HOME%platform-tools;
%GRADLE_HOME%bin;

三、创建cordova应用及添加平台:

主要只用的命令行:1、创建APP:cordova create hello com.example.hello HelloWorld (第二个参数com.example.hello即为项目包的一个标识符)

2、添加平台:cordova platform add android

3、检查平台:cordova platform ls

4、删除平台:cordova platform rm android

5、打包APP:cordova build (打包所有平台);

6、打包APP:cordova build android (打包android平台);

7、运行APP:cordova emulate android (平台名称,比如浏览器:browser);

四、项目目录解释——————–

1、config.xml :cordova的配置文件

2、hooks目录:存放自定义cordova命令的脚本文件。每个project命令都可以定义before和after的Hook,比如:before_build、after_build。Hook可以采用任何编程语言来写,Cordova CLI采用的是Node.js,所以一般都是用它来写。

3、merges目录:存放各个平台特殊的文件,会和www进行合并编译,相同的文件merges下的文件优先。

4、platforms目录 :各个平台的原生代码工程,不要手动修改,因为在build的时候会被覆盖。

5、plugins目录 :插件目录(cordova提供的原生API也是以插件的形式提供的)。

6、www目录:源代码目录,在cordova prepare的时候会被copy到各个平台工程的assetswww目录中。

其中index.html为应用的入口文件。

7、res目录:初始屏幕图标和APP图标存放文件夹。

五、常用插件以及安装与移除:

1、常用插件:1.1、状态栏插件 cordova-plugin-statusbar

1.2、屏幕启动的初始画面:cordova-plugin-splashscreen

1.3、弹框插件:cordova-plugin-dialogs

2、安装 cordova plugin add cordova-plugin-statusbar

3、移除 cordova plugin rm cordova-plugin-statusbar

4、更多插件以及使用示例可在 cordova中文官网 上查看和学习