Cordova系列一、命令行创建项目

抱琴司棋侍书入画
1,097 阅读2分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

本系列节目预告： 1、进入Cordova官网，使用命令创建Cordova项目. 2、了解Cordova官网，按照官网步骤使用常用Cordova插件. 3、学习Cordova，开发自定义Cordova插件. 补、本系列Cordova基于Crosswalk，对于只使用原生WebView来说影响不大.

只有准备工作

  • 事先确保本机已安装JDK、SDK并配置好JAVA_HOME、ANDROID_HOME环境，如下图. 这里写图片描述
  • 安装ANT并配置环境，如图. 这里写图片描述
  • 安装Node.js，如图，点击DOWNLOADS. 这里写图片描述
  • 装好Node.js，即可使用命令 npm install cordova 安装Cordova环境，装好之后如下. 也可使用 npm install -g cordova 将Cordova安装在全局目录 这里写图片描述
  • 由于小伙伴常用Ionic，可以顺带 npm install ionic 集成进来，如下. 同理，可使用 npm install -g ionic 将Ionic安装在全局目录 这里写图片描述

  • 没有意外的话，此时已可用命令cordova create aa com.catface.aa Aa来创建项目了.

    • aa：保存工程的文件夹名

    • com.catface.aa：项目包名

    • Aa：项目名称

      这里写图片描述


    • 进入文件夹，可见工程目录：hooks：存放自定义cordova命令的脚本文件.

    • platforms：各平台原生代码，勿手动修改.

    • plugins：插件目录.

    • www：源代码目录，cordova prepare时候会copy到各平台工程的assets\www目录.

    • config.xml：cordova配置文件.

      这里写图片描述

  • cordova platform add android后会在工程的platforms/android目录下生成标准的集成了Cordova功能的Android项目.

    • cordova platform ls：列出已有平台

    • cordova platform rm android：删除已有相应平台

      这里写图片描述

  • 再次，我们尝试添加一个简单插件cordova plugin add cordova-plugin-media

    • cordova plugin ls：列出已有插件
    • cordova plugin rm cordova-plugin-media：删除已有相应插件
  • cordova build或者cordova prepare或者cordova compile来进行编译.
  • 最后，真机插上，adb连接好cordova run就能运行创建好的Cordova项目了.

总结

完整环境概括如下：
	1. 安装JDK、SDK并配置好环境.
	2. 安装Node.js并配置好环境.
	3. 安装ANT并配置好环境.
	4. 使用Node.js的>npm<命令安装Cordova和Ionic.
	5. 使用>Cordova create<创建项目.
	6. 切进项目目录，使用>cordova platform add<添加平台(可同时引进crosswalk支持).
	7. 使用>cordova plugin add<添加插件.
	8. 使用>cordova build<编译(也可直接run，run之前会自己编译).
	9. 使用>cordova run<进行装机测试.
avatar
文章
阅读
粉丝