使用Cordova创建第一个App和Cordova构建环境的配置

引言

通过上一篇文章我们已经对 Hybrid App 有了一定的了解，并且根据实际业务情况选择了 Cordova 来开发我们的APP， 如果对这些还不了解的话请查看上一篇文章，那么接下来我们就开始Cordova 之旅把！

安装Cordova CLI

由于Cordova命令行工具作为npm包发布，这对于我们前端开发的同学来说实在是太方便了！

#全局安装Cordova
$ npm install -g cordova

注 ：对于在OS X和Linux上, npm命令前加sudo 是因为 cordova 需要安装在您的当前用户没有写入权限的目录或其他受限制目录比如 /usr/local/share。如果你使用像nvm/nave或者具有安装目录的写入权限，那么你可以省略sudo前缀。

创建App

创建一个APP只需要执行：

$ cordova create hello com.example.hello HelloWorld

让我们来一起剖析下 cordova create 到底做了些什么？根据官方描述该命令支持四个参数：

  1. path：也就是项目的目录名称
  2. ID：项目的ID，用于写入config.xml的widget中，通常格式为 com.example.hello
  3. name：应用程序的显示名称
  4. options：项目的可选配置项
    • --template：可执行项目的模版文件
    • --copy-from 指定src
    • --link-to 可将一个前端资源目录链接到项目的www目录下而不是一个副本

通过部分 Cordova cli 源码我们可以大致知道Cordova是如何帮我们创建一个初始化工程的

var paths = {};
//从 cordova-app-hello-world npm包中获取config.xml文件
paths.configXml = path.join(require(‘cordova-app-hello-world‘).dirname, ‘config.xml‘);
//从 cordova-app-hello-world npm包中获取 www 目录
paths.www = path.join(require(‘cordova-app-hello-world‘).dirname, ‘www‘);
//从 cordova-app-hello-world npm包中获取 hooks 目录
paths.hooks = path.join(require(‘cordova-app-hello-world‘).dirname, ‘hooks‘);
// 从 cordova-app-hello-world npm包中获取 package.json 文件
var dirAlreadyExisted = fs.existsSync(dir);//dir为 cordova create 的第一个参数 ptah
//判断当前path是否存在不存在直接创建
if (!dirAlreadyExisted) {
    fs.mkdirSync(dir);
}
try {
    //如果指定了 --template 则从模版复制项目到新项目下
    if (cfg.lib.www.template) { copyTemplateFiles(import_from_path, dir, isSubDir); }
    //如果指定了 --link 则创建链接到项目
    if (cfg.lib.www.link) { linkFromTemplate(import_from_path, dir); }
    //如果没有没有指定 --template 或者 --link 则直接用 cordova-app-hello-world npm包
    copyIfNotExists(paths.www, path.join(dir, ‘www‘));
    copyIfNotExists(paths.hooks, path.join(dir, ‘hooks‘));
    var configXmlExists = projectConfig(dir); // moves config to root if in www
    if (paths.configXml && !configXmlExists) {
        shell.cp(paths.configXml, path.join(dir, ‘config.xml‘));
    }
} catch (e) {
    if (!dirAlreadyExisted) {
        shell.rm(‘-rf‘, dir);
    }
    if (process.platform.slice(0, 3) === ‘win‘ && e.code === ‘EPERM‘) {
        throw new CordovaError(‘Symlinks on Windows require Administrator privileges‘);
    }
    throw e;
}
//获取 package.json 文件
var pkgjsonPath = path.join(dir, ‘package.json‘);
// Update package.json name and version fields
if (fs.existsSync(pkgjsonPath)) {
    delete require.cache[require.resolve(pkgjsonPath)];
    var pkgjson = require(pkgjsonPath);

    //指定项目名称，也就是我们 cordova create 命令的第三个参数
    if (cfg.name) {
        pkgjson.displayName = cfg.name;
    }
    //指定项目ID，也就是我们 cordova create 命令的第二个参数
    if (cfg.id) {
        pkgjson.name = cfg.id.toLowerCase();
    } else if (!cfg.id) {
        //设置默认ID为 helloworld
        pkgjson.name = ‘helloworld‘;
    }
    pkgjson.version = ‘1.0.0‘;
    fs.writeFileSync(pkgjsonPath, JSON.stringify(pkgjson, null, 4), ‘utf8‘);
}
//创建 platforms(后期添加的Android和iOS平台都放在此文件夹) 和 plugins(插件)文件夹
if (!fs.existsSync(path.join(dir, ‘platforms‘))) { shell.mkdir(path.join(dir, ‘platforms‘)); }
if (!fs.existsSync(path.join(dir, ‘plugins‘))) { shell.mkdir(path.join(dir, ‘plugins‘)); }
var configPath = path.join(dir, ‘config.xml‘);
// only update config.xml if not a symlink
if (!fs.lstatSync(configPath).isSymbolicLink()) {
    // Write out id and name to config.xml; set version to 1.0.0 (to match package.json default version)
    var conf = new ConfigParser(configPath);
    if (cfg.id) conf.setPackageName(cfg.id);
    if (cfg.name) conf.setName(cfg.name);
    conf.setVersion(‘1.0.0‘);
    conf.write();
}

项目创建成功之后我们将得到如下目录结构

hello/
|-- config.xml      #项目配置文件
|-- hooks/          #存放Cordova 的钩子
|-- node_modules/
|-- res/            #存放一些各平台的icon或者首屏图等资源
|-- www/            #静态网页资源
|-- platforms/      #各平台存放目录
|-- plugins/        #插件目录
|-- package.json

添加 Android 平台及插件

初始化项目有了，接下来就是添加我们需要支持的平台了，例如：Android 、 iOS 这里以 Android 为例

# 切换到项目目录下
$ cd hello

# 添加Android平台
$ cordova platform add android --save

# 添加摄像头插件
$ cordova plugin add cordova-plugin-camera

cordova platform add、cordova plugin add 原理其实和cordova create 都差不多，cordova cli 的模板文件夹如下：感兴趣的童鞋可以深究下！

Cordova 编译打包 Android APP 生成APK安装包

经过上面对cordova cli 的分析来看，cordova cli 只是一个命令行工具，它不具备任何环境的能力，所以，要编译android 的APK文件首先我们要安装android的环境

在安装环境之前先说下我遇到的坑！引用官方的话：“自[email protected]起,Cordova为Android项目使用 Gradle构建。”坑的是Grable安装不上，即使安装上之后在cordova编译的时候也会报Grable安装错误！最终成功安装的结论为：“干掉cordova在编译时从google下载Gradle”。以 linux 系统为例安装Gradle步骤如下：

下载Gradle安装包并安装（别试图从官网下载，除非你有梯子）
$ wget https://code.aliyun.com/shuoer/soft/raw/master/gradle-4.1-bin.zip

#解压Gradle安装包到你指定的目录，我以${HOME}/.zs-tools/为例
$ unzip gradle-4.1-bin.zip -d ${HOME}/.zs-tools/

#添加Gradle的环境变量，让系统能识别Gradle命令
echo ‘export PATH=${HOME}/.zs-tools/gradle-4.1/bin:${PATH}‘ >> ${HOME}/.bashrc

#干掉cordova在编译时从google下载Gradle编译工具
#如果没有这条命令，你休想cordova能编译成功，除非你有梯子
echo ‘export CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL=https://code.aliyun.com/shuoer/soft/raw/master/gradle-4.1-all.zip‘ >> ${HOME}/.bashrc

#使配置生效
$ source ${HOME}/.bashrc
Android环境的安装

Android环境的安装需要依赖java环境，而java环境的安装其实百度上都可以查的到！没什么复杂的步骤，而且开发人员基本都有了，java就不多废话了！

对于一个前端开发者来说，我只需要android sdk 就可以了，不需要非安装android studio，如果你从事android开发或者你想给cordova 开发一个android的插件的时候才可能用的到android studio！所以我选择只安装android SDK，以 linux 系统 shell 环境为 bash 为例步骤如下：

#下载android sdk for linux 包
$ wget https://code.aliyun.com/shuoer/soft/raw/master/android-sdk_r24.4.1-linux.tgz

#解压 android-sdk 包到你指定的目录，我以${HOME}/.zs-tools/为例
$ tar zxvf android-sdk_r24.4.1-linux.tgz -C ${HOME}/.zs-tools/

#添加 ANDROID_HOME 的环境变量
$ echo "export ANDROID_HOME=${HOME}/.zs-tools/android-sdk-linux" >> "${HOME}/.bashrc"

#添加 android tools 和 platform-tools 的环境变量
$  echo ‘export PATH=${ANDROID_HOME}/tools:${ANDROID_HOME}/platform-tools:${PATH}‘ >> "${HOME}/.bashrc"

#使配置文件生效
$ source ${HOME}/.bashrc

#创建 repositories.cfg 如果有该文件可跳过该步，主要解决 Android SDK Manager无法升级
$ touch ${HOME}/.android/repositories.cfg

#升级 android 所需要的tools和api（该命令耗时较长务必耐心等待）
# -a 表示升级所有 --no-ui 不要ui界面 --filter 只安装我指定的部分
$ echo y | android update sdk -a --no-ui --filter tools,platform-tools,android-26,build-tools-26.0.2
问：为什么你总是喜欢用${HOME}/.zs-tools/文件夹存储所有的环境文件

答：其实很简单，就因为我“懒”！为什么说懒呢？如果您当前登录的用户是root，那您将环境安装文件放到哪里都没问题，但是对于非root用户来说，放到任何非当前用户的目录下比如：/opt、/usr/share下时，当您在下载、解压或者在执行 android 命令时需要在命令前加sudo！这是因为当前用户没有目标目录的写入权限！所以为避免不必要的权限麻烦，我选择将文件放在用户目录下！

另外在linux 系统中以 . 点开头的文件或文件夹都是隐藏的！只要自己管理好不会显得很乱

编译android的APK安装包

虽然cordova 官网说明了cordova在编译android的时候用的是grable，但是cordova cli 都帮我们处理，编译一个debug版本的APK安装包只需要执行如下：

#编译一个可调试的安装包(第一次编译用时较长务必耐心等待)
$ cordova build android

编译一个release版本的APK安装包

$ cordova build android --release

说明

如果将以上技术栈描述清楚需要不小的篇幅，所以我会将文章进行拆分：

1. Hybrid App 开发实践总结 ~开篇
2. cordova的环境配置和创建第一个android App （本文）
3. 服务器端docker的安装，nginx、jenkins、git服务的架设
4. 服务器端code-push-server、mysql服务的架设
5. 客户端code-push插件的引入及code-push-cli的使用
7. 如何使用纯shell编写一个快速搭建开发者环境的命令行工具和安卓端真机调试

原文地址：https://www.cnblogs.com/shuoer/p/9471151.html

时间： 2024-11-06 20:51:00

使用Cordova创建第一个App和Cordova构建环境的配置的相关文章

Cordova 开发环境搭建及创建第一个app

整理记录使用cordova创建app应用程序并将其部署至Android系统移动设备上详细过程,具体如下: 一.前期安装环境 1. 安装JDK(java开发工具包) 2. 安装gradle 3. 安装Android SDK 4. 添加SDK包 5. 设置环境变量 二.Cordova的安装及使用 1. 安装Cordova 2. 使用Cordova创建应用.运行及编译 3. 在模拟器和设备中运行 一.前期安装环境 1. 安装JDK(java开发工具包) 安装Java开发工具包(JDK)8 或更高版本(

rapidPHP 1.1.0 - 创建第一个app

创建controller 在application/目录下创建controller目录,然后接着在controller目录下创建BaseController,继承Controller //注:BaseController作用是全局controller公用方法库 文件名:BaseController.class.php <?php namespace application\controller; use rapid\core\Controller; use rapid\library\rapid

Yii学习笔记之中的一个（安装与基础环境的配置）

0. 下载yii http://www.yiiframework.com/download/ 1. 訪问 basic 基础文件夹下的 web 文件夹 出现图1 的错误 : Invalid Configuration – yii\base\InvalidConfigException 解决: 找到文件 config/web.php 加入配置如图2 :'cookieValidationKey' => 'cookiemykey', 注意:须要开启 php 开启 openssl 扩展 2. 再次訪问上述

Visual Studio创建跨平台移动应用_01.Cordova&amp;Xamarin

      目前开发移动应用有三种模式:Native.Hybird.Web,若要开发跨平台的移动应用,又希望与本地API交互,那么Hybird是一个非常好的选择.       作为一个.Net程序员,可以使用熟悉的IDE,Visual Studio来进行开发移动应用,目前已经有基于Visual Studio的扩展来帮助我们快速开发: Cordova(HTML/Javacript) Xamarin(.Net Framework)       请参考以下文章: 为Windows, Android,

Visual Studio创建跨平台移动应用_02.Cordova Extension

1简介 本章节是关于Visual Studio Tools for Apache Cordova的,目前此产品只发布了预览版.Visual Studio for Apache Cordova帮助熟悉Visual Studio用户的.Net程序员能够使用这个宇宙最强的开发IDE通过编写Html.CSS.Javascipt来创建iOS.Android和Windows的本地应用程序. 1.1概述 使用Visual Studio for Apache Cordova你可以为iOS.Android和Win

移动web：原生开发打包，嵌入h5页面 webApp：全部都是H5开发的应用 混合APP：使用第三方开发平台从apicloud，appcan，hbuilder等开发，cordova技术打包 原生APP：就是eclipse开发或者studio等工具开发

论坛43213 移动端webApp兼容问题解决 谈谈App混合开发 Hybrid APP混合开发的一些经验和总结 PhoneGap是一个采用HTML,CSS和JavaScript的技术,创建移动跨平台移动应用程序的快速开发平台.它使开发者能够在网页中调用IOS,Android,Palm,Symbian,WP7,WP8,Bada和Blackberry等智能手机的核心功能--包括地理定位,加速器,联系人,声音和振动等,此外PhoneGap拥有丰富的插件,可以调用. Cordova提供了一组设备相关的

Cordova+ionic 开发hybird App --- 开发环境搭建

Cordova 开发hybird App 开发环境搭建 一．一些基础概念: Ant : 简单说来可以这么理解,如果你用记事本写JAVA程序,然后在cmd里输入javac命令编译它,但是有一天你发现每次手动输入太麻烦而且都是重复劳动,于是你下决心改变这种状况,然后学会了把javac命令写到一个bat文件中,以后编译只需要单击运行即可:然后随着你敲的代码越来越多,而且有了JAVA project概念,于是你手动新建了很多文件夹比如src.bin.lib,你有写了一个bat文件来减少你的重复劳动:再后

Phonegap(cordova)创建项目，并结合eclipse开发工具进行打包生成apk包

1.使用phonegap(cordova)创建并编辑项目 (1)创建一个文件夹用于存放稍后创建的Android程序,这里我们在E盘创建了一个文件夹AndroidProject,适用cd命令进入该目录,接下来适用phonegap命令创建对应的android项目. phonegap的创建指令:  phonegap create hello com.example.hello HelloWorld hello:你的项目文件夹名称,   com.example.hello:你的项目内部包名   Hell

慢牛股票-基于Sencha touch+Cordova的股票类APP

13,14这两年,我的业余时间都花在了移动互联网技术和股票技术分析上,14年底,终于开发完成慢牛,上线小米应用商店.应用宝.百度应用商店. 慢牛是一款数据分析类的股票APP,提供数据订阅和数据分析,帮助用户择时和选股. 慢牛前端基于cordova+sencha touch开发,利用cordova把st应用打包成app,后端部署在阿里云,基于.net+mysql+redis,为了提高运算效率,还利用zeroMQ做了分布式计算. 2013年以前,我一直在想,只要有足够多的数据,我就可以创业,<大数据