PhoneGap入门教程

PhoneGap是一个允许开发者使用熟悉的网页开发技术，例如HTML，CSS 和 JavaScript 去开发跨平台应用的手机开发框架。

也就是说你可以使用 PhoneGap 架构开发一款应用，不需要重写额外一行代码就可以将它部署到多个移动应用平台。

在这个教程中，你将学习使用 PhoneGap 去创建一款简单的 to-do 应用。在这个过程中你会学习到很多 PhoneGap 的知识，例如安装 PhoneGap，编写 Javascript 代码，使用本地存储等等~

这个教程假设你已经有基本的 HTML ，CSS 和 Javascript 基础。如果你是对这方面是一无所知的话，你同样可以跟随教程一起学习，但是你会错过很多相关的背景知识，所以还是建议你去阅读一下这方面的书籍先。

开始

和其他任何新建的项目一样，去构想一下你要创建的app的外观总是不错的。

下面是你将要构建的app的外观：

简单地，这只是让你了解到你接下来所有做的事而已。屏幕的上方是一个app Logo，Logo 下面有两个按钮；一个是增加新任务，一个是移除已完成的项目。当用户新增一条待做项到待做列表的时候，表格就会创建一个包含四个元素的行。

首先，你有一个 checkbox 表示待做项的状态，接下来是一个填写待做内容的输入框，最后还有两个按钮，一个是以弹出框的形式展示待做内容，另一个是删除待做项。

该 app 使用本地存储 API 保存待做项。

还有一点，谢谢这位大哥 Vicki Wenderlich ,是他帮我设计的图片，所以app就长这样了。

是时候看一下app有啥功能了：

增加待做项：当按下 Add To-Do 按钮的时候，用户可以立刻输入待做的内容到待做列表项中。
标记待做项为已完成状态：用户可以点击待做项左边的checkbox标记待做项已完成。
移除已完成的待做项：点击 Remove Completed Tasks 按钮移除所有已完成的任务。
查看待做项：当点击View按钮的时候可以查看完整的待做项内容。
删除待做项：点击Delete按钮会删除相应的待做项。

总的来说，这是一个相当简单的app，使用phoneGap开发这个应用的目的是为了举例说明不使用原生API也能开发出一个完整的app，并且能够在多平台上使用。

安装 PhoneGap

Note:如果你已经安装PhoneGap可以直接跳过这一部分。由于作者写这篇文章的时候使用的是PhoneGap 2.3.0的，到现在已经更新到2.9.1了，就直接使用新的API了。

PhoneGap 的官网： Here

Docs: Install PhoneGap The Comman-Line Interface 或者看下面：

在安装PhoneGap之前，先确保你已经安装了 NodeJS,打开你的终端，输入以下命令：

sudo npm install -g cordova

去到你想要保存该项目的文件夹，在终端输入：

cordova create Zombie com.aaron.zombie ZombieApocalypseToDoList

可以看到创建了如下文件夹：

但是platforms还是空的，现在我们来为它添加ios平台代码，在终端输入：

cordova platform add ios

安装完成就看在Zombie/platforms/ 目录下看到 ios这个目录了

添加其他平台支持看 The Command-Line Interface 和 Platform Guides

在XCode 中打开 .xcodeproj 文件，跑一下就可以看到效果了。

构建你的应用程序

上面看到的App第一次打开的页面是 ios/www/ 下的 index.html界面，所以这一部分就是修改 index.html 的代码让它变成我们想要的样子。

用下面的代码替换 index.html 的代码：

<!DOCTYPE html>
<html>
<head>
<title>Zombie Apocalypse To-Do List</title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<script type="text/javascript" language="JavaScript">

</script>
</head>
<body>

</body>
</html>

在 index.html 界面的body标签中增加以下代码：

<input type="button" value="Add To-Do"/>
<input type="button" value="Remove Completed Tasks"/>
<br/><br/>
<table id="dataTable" width="100%" border="1">

</table>

编译运行app

来千语创想移动应用开发平台学习更多APP开发知识：app开发，app制作，app开发源码下载，app开发框架，app制作模板等免费获取。千语创想支持APP定制开发，一键网站自动生成app、网站转app、网站封装app，有网站即可生成自己的app。

立即免费在线制作一个APP，新手注册即送开发大礼包

提交app定制需求，免费获取报价和周期：

电脑请点击https://www.qianyuthink.com/?url=/index?uzchannel=500

手机请点击https://www.qianyuthink.com/?url=/m/quickaddcustom

转载请注明来自：https://www.qianyuthink.com/news/6344.html

上一页：前端代码生成工具-自动生成前端代码
下一页：PhoneGap-移动应用开发平台

PhoneGap​入门教程