65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 PhoneGap Build 创建“计数器点击”——一个简单的 Android 应用

Garbel Nervadof
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.56/5 (7投票s)

2016年5月20日

CPOL

6分钟阅读

viewsIcon

23874

使用 PhoneGap Build，用纯 HTML、CSS 和 JavaScript，以及 Dialog 和 Vibration 插件创建一个简单的 Android 应用“计数器点击”。一个非常简单的计数应用。分步讲解。

引言

在本文中，我们将使用 PhoneGap Build 创建一个 Android 应用。我们要构建的是一个简单的计数应用，具备 HTML、CSS 和 JavaScript 的基本知识。在此，我们还将使用对话框和振动等基本 PhoneGap 插件。这就是我们要构建的应用。

本文面向初学者。

在下一节中，我们将从零开始一步步创建该应用。您也可以从 此处 下载源代码。

背景

得益于 PhoneGap，我们可以轻松地使用纯 HTML、CSS 和 JavaScript 来创建 Android 应用。您可以在官方网站上阅读更多关于 PhoneGap 的信息。

我们可以在 Web 浏览器（设备模式下）或使用 PhoneGap Developer 在 Android 设备上测试代码。编写完源代码并准备好后，我们就可以使用 PhoneGap Build 在线构建应用程序，然后下载 APK 并将其安装到我们的 Android 设备上。

Using the Code

首先，我们创建一个文件夹，命名为Counter Tap。在文件夹中，创建三个子文件夹：img、css、js，分别用于存放图片、CSS 和 JavaScript 文件。然后，创建一个 XML 文件，命名为config.xml。接着创建一个 HTML 文件，命名为index.html，这是我们应用程序的第一个页面。在您的代码中，您可以使用自己的应用程序图标和背景图片。

config.xml

好了，我们来看config.xml文件。我们可以说这是我们源代码的主文件，我们可以在这里声明应用程序的名称、图标、方向（纵向或横向）、全屏模式、一些插件以及其他信息。现在将此代码复制到您的config.xml文件中。

<widget xmlns		    = "http://www.w3.org/ns/widgets" 
		xmlns:gap		= "http://phonegap.com/ns/1.0" 
		xmlns:android   = "http://schemas.android.com/apk/res/android"
		id				= "com.simpleappsagain.countertap" 
		version			= "1.0.0">
		
	<name>Counter Tap</name>
	
	<description>Simple application to count stuff.</description>

	<icon src="icon.png"/>
	
	<platform name="android">
		<preference name="fullscreen" value="true" />
		<preference name="orientation" value="portrait" />
		<preference name="phonegap-version" value="cli-5.1.1" />
	</platform>
	
	<gap:plugin name="org.apache.cordova.dialogs" />
	<gap:plugin name="org.apache.cordova.vibration" />
  
</widget>

在widget中，您可以看到应用程序的id和version，您可以使用自己的应用程序 ID 和版本。

查看name标签，我们定义了应用程序的显示名称。description标签用于应用程序的描述。icon标签用于应用程序的图标。这样，我们的应用程序的图标和显示名称将如下图所示（在通过 PhoneGap Build 在线构建并安装到设备后）。

然后我们转到platform标签。我们只需要构建 Android 应用，并在其中使用三个首选项。我们希望使此应用程序全屏并纵向显示。对于第三个首选项，我倾向于使用 phonegap cli 版本 5.1.1，如果我们不指定或不写它，PhoneGap Build 将自动使用最新的 cli 版本来构建应用程序。

最后两个，我们希望在应用程序中使用Dialog和Vibration 插件，所以我们在这里编写它们。我们在Reset按钮中使用这些插件，当我们点击（或简单地单击）Reset按钮时，设备将振动并显示确认对话框以重置计数器。我们稍后将编写使用它们的代码。这就是config.xml的部分。

index.html 和 index.css

在index.html中，我们将放置背景图片、按钮和数字。但在这样做之前，我们必须让页面适应设备屏幕尺寸，使其无法缩放，这就是我们想要的效果。index.html的模板如下所示：

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" 
          content="user-scalable=no, 
          initial-scale=1, 
          maximum-scale=1, minimum-scale=1, 
          width=device-width" />
    <script type="text/javascript" src="phonegap.js"></script>
	
    <title>Counter Tap</title>
</head>

<body align="center">    

	<script type="text/javascript">
		document.addEventListener('deviceready', onDeviceReady, false);
		function onDeviceReady() {

		}
	</script>
</body>

</html>

查看meta标签，我认为它清楚地说明了它的作用。

然后，查看那里的phonegap.js。我们不必将此文件包含在我们的Counter Tap文件夹中，只需在此处写入它，并在body标签中使用 JavaScript 进行初始化。当我们构建它时，phonegap.js文件将由 PhoneGap Build 自动包含。如果我们想在应用程序中使用 PhoneGap 插件，我们就必须写上它。

接下来，我们要创建固定屏幕尺寸的背景图片。在css文件夹中创建一个文件index.css，并复制此代码。我们实际上创建了一个css类。

.background-full {
	background: url('../img/background.jpg') no-repeat center center fixed;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
	background-size: cover;
	min-height: 100%;
}

请注意，您必须在img文件夹中有一张背景图片（background.jpg）。然后像这样在html标签中使用这个类：

<!DOCTYPE html>
<html class="background-full">

<head>
    <meta name="viewport" 
		  content="user-scalable=no, 
		  initial-scale=1, 
		  maximum-scale=1, minimum-scale=1, 
		  width=device-width" />
    <script type="text/javascript" src="phonegap.js"></script>
	<link rel="stylesheet" type="text/css" href="css/index.css" />
	
    <title>Counter Tap</title>
</head>

<body align="center">

...

它看起来会像这样（您可以下载此图片并将其放入您的img文件夹中）。

此时只有背景图片，其他内容还没有。现在我们将创建其他元素。index.html将如下所示：

<!DOCTYPE html>
<html class="background-full">

<head>
    <meta name="viewport" 
		  content="user-scalable=no, 
		  initial-scale=1, 
		  maximum-scale=1, minimum-scale=1, 
		  width=device-width" />
    <script type="text/javascript" src="phonegap.js"></script>
	<link rel="stylesheet" type="text/css" href="css/index.css" />
	
    <title>Counter Tap</title>
</head>

<body align="center">
	<div class="div-decount-reset-button">
		<input type="button" 
			   class="border-counter-button counter-button-decount teal" 
			   value='-1' 
			   onClick='decount()'>
			   
		<input type="button" 
		       class="border-counter-button counter-button-reset teal" 
			   value='RESET' 
			   onClick='reset()'>
	</div>
	
	<span class="running-number" id="running-number">
		0
	</span>
	
	<div class="div-counter-button">
		<input type="button" 
			   class="border-counter-button counter-button-count teal" 
			   value="COUNT" 
			   onClick="count()" >
	</div>
	
	<footer style="color: white; font-weight: bold;">
		Counter Tap
	</footer>
    
	<script type="text/javascript">
		document.addEventListener('deviceready', onDeviceReady, false);
		function onDeviceReady() {

		}
	</script>
	<script type="text/javascript" src="js/counter.js"></script>
</body>

</html>

为按钮和计数器数字在index.css中添加额外的样式。我们在此处创建并定义了按下按钮的样式、按钮的颜色、边框和阴影。请注意，我们使用了视口大小单位，视口高度（或vh）和视口宽度（或vw）来进行尺寸调整（100vh 表示 100% 的视口高度），因此元素将根据index.css中相对于设备视口定义的尺寸自动调整。

.background-full {
	background: url('../img/background.jpg') no-repeat center center fixed;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
	background-size: cover;
	min-height: 100%;
}

.running-number {
	font-family: 'Raleway', sans-serif;
	font-size: 30vh;
	font-weight: bold;
	text-align: center;
	color: white;
}

.div-decount-reset-button {
	margin: 5vh;
}
.div-counter-button {
	font-family: 'Raleway', sans-serif;
	font-size: 12vh;
	font-weight: bold;
	color: #08BBB7;
	text-align: center;
}

.counter-button-count {
	font-size: 5vh;
	position: relative;
	top: 0;
	margin: 2vh;
	padding: 15vh 30vw;
}
.counter-button-decount {
	position: relative;
	top: 0;
	font-size: 3vh;
	padding: 2vh 8vw;
}
.counter-button-reset {
	position: relative;
	top: 0;
	font-size: 3vh;
	padding: 2vh 15vw;
}

.border-counter-button {
	text-decoration: none;
	border: 0vh solid;
	border-bottom-width: 1vh;
	border-radius: 1vh;
	cursor: pointer;
	outline: none;
}

.counter-button-count.teal,
.counter-button-decount.teal {
	color: #fff;
	border-color: #04A5A1;
	background-color: #08BBB7;
}
.counter-button-reset.teal {
	color: #fff;
	border-color: darkred;
	background-color: red;
}

.counter-button-count:active,
.counter-button-decount:active,
.counter-button-reset:active {
	position: relative;
	top: 0.5vh;
}

元素的样式就到这里。现在，我们可以继续下一步了。我们将在js/counter.js中编写应用程序的逻辑。

JavaScript

应用程序的逻辑在counter.js文件中，它相当简单。

  1. 点击COUNT按钮，数字将增加一。
  2. 如果数字能被10整除，则将数字颜色更改为蓝色（十六进制颜色#23126E），否则为白色。
  3. 点击“-1”按钮，数字将减一（如果数字不为0）。
  4. 点击RESET按钮，设备会振动，显示（确认）对话框以决定是否重置计数器。如果选择OK，则将数字重置为0。

在js文件夹中创建一个 JavaScript 文件，命名为counter.js，并添加此代码：

var runningNumberElementId = 'running-number';
var counted = document.getElementById(runningNumberElementId).innerText;

// Tap COUNT button
function count() {
	counted = parseInt(counted) + 1;
	counterWithStyle(counted);
}

// Tap -1 button
function decount() {
	if(counted >= 1) {
		counted = parseInt(counted) - 1;
		counterWithStyle(counted);
	}
	else {
		counted = 0;
	}
}

// Tap RESET button
function reset() {
	// Vibrate for 100 ms
	navigator.notification.vibrate(100);
	navigator.notification.confirm('Reset counter?', 
                                   onConfirmReset, 
                                   'Reset', 
                                   'No,OK');
}
function onConfirmReset(button) {
	// Use the button index: No (1), OK (2)
	if(button === 2) {
		resetCounter();
	}
}

// Reset counter
function resetCounter() {
	counted = 0;
	document.getElementById(runningNumberElementId).innerHTML = counted;
}

// Change color
function counterWithStyle(counting) {
	if (counting % 10 == 0 && counting != 0) {
		document.getElementById(runningNumberElementId).innerHTML = "<font color='#23126E'>" + 
                                                                       counting + 
                                                                    "</font>";
	}
	else {
		document.getElementById(runningNumberElementId).innerHTML = counting;
	}
}

就是这样。源代码已准备就绪。现在我们可以使用 PhoneGap Build 来构建我们的应用程序了。首先，登录 PhoneGap Build。有两种方法可以构建应用程序：使用 .zip 文件或 .git 存储库。 .zip 文件仅适用于私有应用程序。如果您创建新帐户，可以尝试上传 .zip 文件；压缩源代码，上传它，PhoneGap 将为您构建应用程序，之后，您可以下载 APK 并将其安装到您的设备上。

您也可以使用此 .git 存储库进行构建（在开源选项卡中），然后点击Pull from .git repository按钮。点击Ready to build按钮并等待直到您可以下载 APK，点击 Android 图标。

关注点

本文分步介绍了如何为初学者使用 PhoneGap Build 创建一个简单的应用程序。有时，初学者不知道如何开始，即使官方文档对初学者来说也不够清晰，因为没有完整的实践示例可供尝试。我希望这个简单的文章能帮助那些想学习使用 PhoneGap 创建应用程序的人。

请记住，关于 PhoneGap 与原生开发有很多讨论，但作为一种爱好，PhoneGap Build 是一个有趣的移动应用程序开发工具，特别是对于那些热爱 JavaScript 的人，我们可以使用 AngularJS 等 JavaScript 框架，也可以使用 Bootstrap 来创建响应式应用程序。

历史

  • 2016 年 12 月 15 日：初始版本
© . All rights reserved.