PhoneGap 开发入门


这里介绍怎样使用 Adobe PhoneGap 解决方案来开发混合型移动应用项目。 

一、准备

开始之前,有几个基本软件需要提前安装:

  • Node.js – JavaScript 运行时工具,用于编译 JavaScript 代码
  • git – PhoneGap CLI 使用它在后台下载需要的资源。它已经预装在某些系统里面,你可以输入“git”命令查看是否已经被安装。

二、安装 PhoneGap CLI

运行以下命令安装最新版 PhoneGap CLI:

$ npm install -g phonegap

安装特定版本使用以下命令:

$ npm install -g phonegap@5.1.1

想要获取 PhoneGap CLI 的版本列表可以使用以下命令:

$ npm info phonegap

如果运行以上任何命令都显示“EACCES”错误信息,那么试着在命令前加上前缀“sudo”,例如:

$ sudo npm install -g phonegap

三、创建 PhoneGap 项目

PhoneGap CLI 为初学者准备了一个默认的 Hello World 项目。通过这个项目,可以简单快捷的理解怎么构建一个移动 PhoneGap 应用。让我们使用 CLI 来创建一个默认项目。

1、在命令窗口执行以下命令:

$ phonegap create myApp

将在当前路径的 myApp 目录下,使用默认名称“Hello World”和标识符 “com.phonegap.helloworld”创建项目。

你也可以在创建项目时指定名称和标识符:

$ phonegap create myApp --id "org.myapp.sample" --name "appSample"

使用 $ phonegap create help 命令可以查询 create 命令的所有参数选项。其它命令同样可以使用 help 或 -h 来查看帮忙信息。

2、验证命令的执行结果

如果项目创建成功会显示下列信息:

Creating a new cordova project.

3、进入新建的项目目录

$ cd myApp/

4、确认目录下包含以下文件和子目录

hooks
platforms
plugins
www
config.xml

5、进入 www 目录可以一些文件和子目录,它们就是 app 的内容,其中 index.html 文件是访问入口。后面的开发工作主要就在这个 www 目录下进行。

$ cd www/

四、启动预览服务

PhoneGap CLI 有一个 serve 命令可以启动一个小型的 web 服务器,用于在桌面浏览器和移动设备中预览项目。

进入项目根目录,执行 $ phonegap serve 命令,你将得到用于预览的服务器地址(如 192.168.1.11:3000):

$ phonegap serve
[phonegap] starting app server...
[phonegap] listening on 192.168.191.1:3000
[phonegap] listening on 10.0.151.244:3000
[phonegap] listening on 192.168.0.110:3000
[phonegap]
[phonegap] ctrl-c to stop the server
[phonegap]

你还可以 PhoneGap Desktop App 工具创建项目和启动预览服务。

五、预览 App

启动预览服务后就可以在桌面浏览器和 PhoneGap Devloper App 中预览项目了。

在桌面浏览器中预览

你可以在桌面浏览器中测试,这样有助于提高项目的开发速度。如果你使用 Angular 或 React 等 JS 框架,它们还提供了在浏览器中的调试工具,对项目的开发很有帮助。现在,PhoneGap 也开始支持在浏览器下对事件和 Apache Cordova 核心插件的测试。

在浏览器里输入预览服务器的地址进行预览。

具体细节可参考:PhoneGap Browser Support Reference guide

在设备上预览

不需要安装平台开发包,不需要注册设备,也不需要编译代码,配合 PhoneGap CLI,你就能使用 PhoneGap Devloper App 随时在移动设备上预览你的应用。

在此之前你需要设备和电脑在同一个局域网内,可以通过 IP 访问到彼此。

1、到安装好 PhoneGap Developer App 的移动设备上输入使用 serve 命令启动的预览服务器地址,点击“Connect”按钮连接 PhoneGap 项目。

你将看到如下图的连接成功信息。如果出现的是错误信息,请确认设备和电脑是否在一个网络。你也可以在 issue trackerPhoneGap Google Groups(自觉翻墙)寻求帮助。

一但 PhoneGap Developer App 连接并加载你的移动应用,将显示如下结果:

预览成功后你就可以使用手势了。3 根手指一起点击将返回 PhoneGap Developer App 的主屏幕,4 根手指一起点击是刷新当前页面。

2、现在我们修改一下项目代码,看看测试起来有多么简单。使用你喜欢的文本编辑器打开项目 www 目录下的 index.html 文件。

一些热门的轻量级代码编辑器有 Brackets、Sublime Text、Atom 、 Code、Notepad++ 和 Editplus 等等。如果你想使用更为强大的 IDE 来开发项目,可以试一下 JetBrains WebStorm。

3、这里作一下修改,将 <h1>PhoneGap</h1> 修改成 <h1>Hello PhoneGap</h1>(默认项目中这段文件使用有大写的 CSS 样式),然后保存。

4、然后你可以看到 PhoneGap Developer App 已经自动重新加载了项目,显示的是新修改的文字!

5、以自己熟悉的工作流程继续开发项目。

六、编译、打包和发布产品

有两种方式编译和打包你的 PhoneGap 应用:

使用 PhoneGap CLI

PhoneGap CLI 可以实际本地和运程两种打包方式。

使用 PhoneGap Build 云服务

PhoneGap Build 云服务可以简化编译和打包过程。


前一篇:
后一篇:

评论(共2条)

怎样使用 IntelliJ IDEA 开发 PhoneGap 项目 | 比利鱼 06月13日 07:00  回复

[…] 其它方面可参考《PhoneGap 开发入门》。 […]

发表评论