使用 Apache Cordova 构建应用程序

Apache Cordova 是混合移动开发框架，用于从渐进式 Web 应用程序创建移动应用程序。但是，Apache Cordova 用于使用 web 视图制作移动应用程序，它不能用于原生 android 应用程序开发。 Web 视图应用程序的缺点是它的执行速度比本机应用程序慢，但是，这不足以使性能速度有任何明显的变化。

获取 Apache Cordova

首先，为您各自的计算机规格安装 Node.js 并设置 npm 环境变量。

节点包管理器（npm）用于轻松安装或升级或卸载包到您的计算机。我们必须安装 Cordova 软件包。我们输入以下命令：

npm install -g cordova

-g表示该软件包是全局安装的，这意味着您可以在计算机的任何位置设置您的 Cordova 项目。

然后下载 Android SDK 并将其安装在您的计算机中。

您已在计算机中成功安装 Cordova 和 Android SDK。现在让我们创建我们的项目。在本文中，我们将使用 HTML、CSS 和 JavaScript 构建一个简单的时钟应用程序。

创建项目

转到您要在其中创建项目的文件夹。使用以下命令创建您的第一个项目：

cordova create projectDirectory com.example.name ProjectName

com.example.name是项目 ID， ProjectName是项目名称， projectDirectory是现在为构建我们的 Cordova 应用程序而创建的目录。将工作目录更改为您刚刚创建的项目。

cd projectDirectory

现在让我们添加我们的平台。需要注意的是，Cordova 是一个混合应用程序开发框架，这意味着相同的代码库可以部署到多个平台，例如 Windows 桌面、Android 手机、iOS 手机等，在这个例子中，我们将部署到 android .

cordova platform add android

注意：如果你想为 Apple iOS 开发，你需要有 XCode，它只能安装在 MacOS 桌面上。

现在我们已经成功创建了一个项目并添加了android所需的所有模块。

编码我们的应用程序

我们将使用的所有代码文件都将在名为www的文件夹中创建。这里我们可以看到一个index.html文件，js/index.js文件css/index.css文件。我们的入口点将是 index.html。 Apache Cordova 已经创建了一个简单的入门模板。我们将不需要它，因为我们将从头开始编码。因此，打开一个代码编辑器并从 index.html、js/index.js 和 css/index.css 中删除所有代码。

现在让我们创建一个简单的 HTML，其中包含一个显示时钟的 div 容器和一个标题文本。让我们将样式表和 JavaScript 链接到 HTML。现在我们有了应用程序的基本视图结构，但它仍然什么都不做。因此，要添加功能，让我们编写一些 JavaScript 代码。

HTML

    
    
    Geeks For Geeks Clock
    

    
    
        Geeks For Geeks
        
    
    

 

让我们在 js/index.js 中添加一些功能。创建一个名为showTime的函数，它接受Date对象并将ClockDisplay所在的容器的内部文本设置为time 。此外，设置需要重复该函数的时间间隔。在这里，该函数每 1000 毫秒或 1 秒重复一次。

Javascript

function showTime() {
    var date = new Date();
    var h = date.getHours();
    var m = date.getMinutes();
    var s = date.getSeconds();
  
    var time = h + ":" + m + ":" + s;
    document.getElementById("ClockDisplay").innerText = time;
    document.getElementById("ClockDisplay").textContent = time;
}
setInterval(showTime, 1000);

现在我们有一个看起来很沉闷的时钟。所以让我们在 css/index.css 中添加一些 CSS 让它看起来更好。

CSS

html {
  height: 100%;
}
body {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: black;
  font-family:'Open Sans', sans-serif;
}
  
#ClockDisplay {
  width: 80%;
  font-size: 20px;
  text-align: center;
  font-size: 19vw;
  color: #acfac1;
  /*text-shadow: 0 0 5px #fff, 0 0 10px #fff,
    0 0 15px #82e896, 0 0 20px #82e896, 
   0 0 25px #82e896, 0 0 30px #82e896, 0 0 35px #82e896;*/
}
 
#Text {
  color:white;
  font-family:'Open Sans', sans-serif;
  text-align: center;
  font-size: 30px;
}

在浏览器上打开 index.html 以查看它是否正常工作。现在我们必须进入下一个阶段，即构建 Android 应用程序包（或 .apk 文件）。

构建我们的应用程序

Apache Cordova 使构建应用程序变得非常简单。打开终端，将目录更改为 Cordova 项目目录。只需键入以下命令即可构建：

cordova build android

构建过程需要一些时间，并将输出文件保存在“(projectfolder)\project\platforms\android\app\build\outputs\apk\debug”中为“ app-debug.apk” 。

将此文件传输到您的手机并安装它。

本文旨在教授 Cordova 的基础知识，但同样可以扩展到构建更复杂的应用程序。