制作第一个 PhoneGap 应用

17 Mar 2025 | 阅读 2 分钟

在上一节中，我们学习了如何创建一个新的 PhoneGap 项目以及如何在桌面浏览器或移动应用上预览它。在本节中，我们将学习如何创建我们的第一个 PhoneGap 应用程序。以下是用于创建 PhoneGap 应用程序的步骤

1) 创建一个新的 PhoneGap 项目

在第一步中，我们将创建一个新的 PhoneGap 项目。我们将它命名为 我的第一个应用，并且还将提供一个唯一的 ID，即在本例中为 com.javatpoint.My_First_App。

当我们在桌面浏览器或 PhoneGap Developer 应用上运行它时，我们将看到一个空白屏幕。

2) 打开 index.html 文件

创建 PhoneGap 项目后，我们将转到保存此项目的目录。我们将打开包含许多其他文件夹（例如 hooks、platforms、plugins）和 www 的项目文件夹。我们将打开包含 index.html 文件的 www 文件夹。我们将在我们喜欢的编辑器中打开此文件进行编码。

3) 开始编码

现在，我们将更新此文件并开始我们的编码。

注意：我们正在创建一个狗龄计算器。您可以创建自己的代码或将以下代码复制到您的 html 文件中。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
         // adding title
        <title>Dog Years Calculator</title>
        <script>
         //creating window function to initialize the application
        window.onload=function()
        {
            document.getElementById('btnCalc').addEventListener('click', calcAge);
        }
        //creating calcAge function to calculate the age of dog
        function calcAge(e)
        {
	//fetching age
            var age = document.getElementById('dogAge').value;
            age = age *7;
            var result = "In dog years, your dog is: " + age;
          //  console.log(result);
         //alert(result);
            document.getElementById('result').innerHTML = result;
        }
        </script>
    </head>
    <body>
	<script type="text/javascript" src="cordova.js"></script>
	//add heading
<h1>Dog Years Calculator</h1>
	//add lable
<label for="dogAge">Dog Age in Human Years:</label>
	//add input field
<input id="dogAge" type="number" />
	//add button
<button id="btnCalc">Calculate</button>
        	//add a field for result 
<div id="result"></div>
    </body>
</html>

我们将保存此文件并转到 PhoneGap Developer 应用。我们将桌面应用程序与 PhoneGap Developer 应用连接，并在服务器上运行应用程序。