PhoneGap 跨平台应用：HealthWorking (1) 创建第一个跨平台应用-CSDN博客

本文链接：https://blog.csdn.net/router66/article/details/45504947

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 内容如下：

<span style="font-size:14px;"><!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></span>

好了，检验成果的时候来了，看看自己的第一个PhoneGap应用。

1. 编译，第一次编译的时间会比较长，需要加载相应的组件