PhoneGap 跨平台应用：HealthWorking (1)
HealthWorking 是一款基于HTML5标准的跨平台应用，跨平台的优势在于可以开发一次，部署在多个不同的平台上，如iOS, Android, WP等。HealthWorking的主要功能是一款健身应用，可以记录运动轨迹，并分享至社交网络。
首先，准备开发环境。【磨刀不误砍柴工】
1. 安装NodeJs
下载地址： https://nodejs.org/，安装完毕后，打开CMD，验证：npm命令
2. 安装PhoneGap
地址：http://phonegap.com/install/
验证：phonegap 命令
3. 安装Android sdk, Google的资源大家懂得：） 更新到最新即可
在环境变量Path中，增加：
ANDROID_HOME = C:\SDK\Android\android-sdk
在Path中，增加如下变量：
%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;
环境变量准备完毕后，可以开始动工了，是不是有点小激动呢~~~
用PhoneGap创建一个项目：
1. 打开cmd，cd到E:\Project\cordova下
cordova create healthworking com.example.healthyworking HealthWorking
cordova create 是创建项目的命令
healthworking是项目的目录名称
com.example.healthyworking 是项目的标识
HealthWorking 是应用的名称
打开文件，已经可以看到多了一个项目 healthworking
2. 为项目添加一个运行的平台，本例是以Android为例，因此，我们运行如下命令：
cd healthworking
cordova platform add android
运行完毕后如下所示：
3. 制作第一个页面，首先看下页面的样子：
本例中，我们采用jquery Mobile来做页面，本例项目的资源会在稍后的链接中给出。对于Mobile的编程，我们应该在哪些位置进行呢？
打开healthworking所在的文件夹，有如下的文件结构：
大多数情况下，我们只需要在www文件夹下完成编程即可，www文件夹的结构如下所示：（看着是不是跟前端编程很像呢 ：）
至于这几个文件夹的功能，就不用多说了。当然可以根据自己的需求，添加新的文件夹/文件
index.html 内容如下：
<!DOCTYPE html>
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
<html>
<head>
<!--
Customize this policy to fit your own app's needs. For more guidance, see:
https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
Some notes:
* gap: is required only on iOS (when using UIWebView) and is needed for JS->
native communication
* https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
* Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
* Enable inline JS: add 'unsafe-inline' to default-src
-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!-- jquery -->
<script src="js/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.4.5.min.js" type="text/javascript"></script>
<link href="css/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css"/>
<link href="css/index.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="cordova.js"></script>
<title>Login</title>
</head>
<body>
<div data-role="page" data-shadow="false">
<div data-role="header" data-theme="b">
<h1>登陆</h1>
</div>
<div role="main" class="ui-content">
<div>
<form>
<label for="text-1">用户名</label>
<input type="text" name="text-1" id="text-1" value="">
<label for="password-1">密码</label>
<input type="password" data-clear-btn="false" name="password-1" id="password-1" value="" autocomplete="off"></form>
</div>
<div>
<fieldset data-role="controlgroup">
<input type="checkbox" name="checkbox-1a" id="checkbox-1a" checked="">
<label for="checkbox-1a">记住用户名</label>
<input type="checkbox" name="checkbox-2a" id="checkbox-2a">
<label for="checkbox-2a">记住密码</label>
</fieldset>
</div>
<div>
<button class="ui-btn ui-btn-a">登陆</button>
<button class="ui-btn ui-btn-b">注册</button>
</div>
<div>
<table class="tb-icon">
<tr>
<td id="login">
<a href="#" class="ui-btn ui-shadow ui-corner-all ui-icon-weibo ui-btn-icon-notext ui-btn-inline"></a>
</td>
<td>
<a href="#" class="ui-btn ui-shadow ui-corner-all ui-icon-weixin ui-btn-icon-notext ui-btn-inline"></a>
</td>
</tr>
</table>
</div>
</div>
<!--
<div data-role="footer" data-position="fixed">
<div data-role="navbar" data-iconpos="bottom">
<ul>
<li>
<a href="#" data-icon="grid">地图</a>
</li>
<li>
<a href="#" data-icon="star" class="ui-btn-active">Favs</a>
</li>
<li>
<a href="#" data-icon="gear">设置</a>
</li>
</ul>
</div>
</div>
-->
</div>
</body>
</html>好了，检验成果的时候来了，看看自己的第一个PhoneGap应用。
1. 编译，第一次编译的时间会比较长，需要加载相应的组件
编译成功后
2. 运行
cordova run android
注意：这个过程会启动Android模拟器，并部署应用在上面。这是需要在Path中配置Android SDK的原因
OK，大功告成！是不是很激动，如果你配置了WP的环境，同样可以将应用部署在WP的模拟器上，当然想部署iOS应用，前提是你有一台Mac电脑，加上开发者证书。
你可以在这里下载源码：https://github.com/byronzoz/healthworking.git
下一次将介绍：PhoneGap通过REST webservice 与外部服务器交互实现登陆。
PhoneGap 跨平台应用：HealthWorking (1)
原文地址：http://blog.csdn.net/router66/article/details/45504947
