PhoneGap 01 命令行接口

本篇主要讲解的是使用phonegap的命令行接口（CLI，下面提到的直接使用CLI来代替）创建应用程序并将其部署到各种不同移动平台上。该工具允许你创建应用程序，在各种不同平台上编译，本地或者远程都可以，并且在虚拟机或者实体机上运行。当你决定使用哪一种平台SDK开发之后，也可以是用CLI去初始化项目代码。准备阶段：在编译项目之前，你需要安装目标平台的SDK，或者你也可以使用远

程序海洋的一叶小舟

1223人浏览 · 2014-01-10 10:47:46

程序海洋的一叶小舟 · 2014-01-10 10:47:46 发布

准备阶段：

在编译项目之前，你需要安装目标平台的SDK，或者你也可以使用远程编译平台编译你的项目，远程编译平台可以编译如下的移动平台应用程序：

Android
IOS
BlackBerry 6
Windows Phone 7
WebOS（只支持远程编译）
Symbian（只支持远程编译）

有一些平台只支持本地编译，如下列表：

BlackBerry 10
Windows Phone 8
Windows 8

本节主要讲的是本地编译，如果有机会可以翻译一下远程编译的文章；

如果使用本地编译，你必须在支持移动SDK上面的PC机上面运行，CLI支持下列的组合：

IOS(Mac)
Android (Mac, Linux)
BlackBerry 10 (Mac, Linux, Windows)
Windows Phone 7 (Windows)
Windows Phone 8 (Windows)

在Mac上面，CLI是通过终端（Terminal）使用。在其他的PC上面，CLI是通过命令提示符（Command Prompt ）使用。

更多情况下，你是从不同的机器上面运行CLI，所以最好的办法就是保存在远程的源代码库里，需要的时候从远程将源代码抽取下来，在本地编译运行。

安装CLI的步骤如下：

下载并安装node.js，node.js的安装方法直接百度
安装phonegap，在Unix中，需要前面的sudo；

      $ sudo npm install -g phonegap

windows上面操作截图：

安装成功界面：

创建APP:

进入存放源代码的目录，像下面一样运行CLI：

    $ phonegap create hello com.example.hello Hello

执行界面：

生成的文件目录界面：

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>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Hello World</title>
    </head>
    <body>
        <div class="app">
            <h1>PhoneGap</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
            </div>
        </div>
        <script type="text/javascript" src="phonegap.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </body>
</html>

config.xml文件内容：

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.example.hello" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
    <name>Hello</name>
    <description>
        Hello World sample application that responds to the deviceready event.
    </description>
    <author email="support@phonegap.com" href="http://phonegap.com">
        PhoneGap Team
    </author>
    <feature name="http://api.phonegap.com/1.0/device" />
    <preference name="permissions" value="none" />
    <preference name="orientation" value="default" />
    <preference name="target-device" value="universal" />
    <preference name="fullscreen" value="true" />
    <preference name="webviewbounce" value="true" />
    <preference name="prerendered-icon" value="true" />
    <preference name="stay-in-webview" value="false" />
    <preference name="ios-statusbarstyle" value="black-opaque" />
    <preference name="detect-data-types" value="true" />
    <preference name="exit-on-suspend" value="false" />
    <preference name="show-splash-screen-spinner" value="true" />
    <preference name="auto-hide-splash-screen" value="true" />
    <preference name="disable-cursor" value="false" />
    <preference name="android-minSdkVersion" value="7" />
    <preference name="android-installLocation" value="auto" />
    <icon src="icon.png" />
    <icon gap:density="ldpi" gap:platform="android" src="res/icon/android/icon-36-ldpi.png" />
    <icon gap:density="mdpi" gap:platform="android" src="res/icon/android/icon-48-mdpi.png" />
    <icon gap:density="hdpi" gap:platform="android" src="res/icon/android/icon-72-hdpi.png" />
    <icon gap:density="xhdpi" gap:platform="android" src="res/icon/android/icon-96-xhdpi.png" />
    <icon gap:platform="blackberry" src="res/icon/blackberry/icon-80.png" />
    <icon gap:platform="blackberry" gap:state="hover" src="res/icon/blackberry/icon-80.png" />
    <icon gap:platform="ios" height="57" src="res/icon/ios/icon-57.png" width="57" />
    <icon gap:platform="ios" height="72" src="res/icon/ios/icon-72.png" width="72" />
    <icon gap:platform="ios" height="114" src="res/icon/ios/icon-57-2x.png" width="114" />
    <icon gap:platform="ios" height="144" src="res/icon/ios/icon-72-2x.png" width="144" />
    <icon gap:platform="webos" src="res/icon/webos/icon-64.png" />
    <icon gap:platform="winphone" src="res/icon/windows-phone/icon-48.png" />
    <icon gap:platform="winphone" gap:role="background" src="res/icon/windows-phone/icon-173.png" />
    <gap:splash gap:density="ldpi" gap:platform="android" src="res/screen/android/screen-ldpi-portrait.png" />
    <gap:splash gap:density="mdpi" gap:platform="android" src="res/screen/android/screen-mdpi-portrait.png" />
    <gap:splash gap:density="hdpi" gap:platform="android" src="res/screen/android/screen-hdpi-portrait.png" />
    <gap:splash gap:density="xhdpi" gap:platform="android" src="res/screen/android/screen-xhdpi-portrait.png" />
    <gap:splash gap:platform="blackberry" src="res/screen/blackberry/screen-225.png" />
    <gap:splash gap:platform="ios" height="480" src="res/screen/ios/screen-iphone-portrait.png" width="320" />
    <gap:splash gap:platform="ios" height="960" src="res/screen/ios/screen-iphone-portrait-2x.png" width="640" />
    <gap:splash gap:platform="ios" height="1024" src="res/screen/ios/screen-ipad-portrait.png" width="768" />
    <gap:splash gap:platform="ios" height="768" src="res/screen/ios/screen-ipad-landscape.png" width="1024" />
    <gap:splash gap:platform="winphone" src="res/screen/windows-phone/screen-portrait.jpg" />
    <access origin="http://127.0.0.1*" />
</widget>

第一个参数代表为了创建的项目文件夹（上图中的hello），它下面的www子目录存放你应用程序主页的各种资源，如css、js和img等。config.xml则是保存一些产生和分发应用程序的元数据。

另外的两个参数，第一个com.example.hello说明了应用程序的包结构，HelloWorld则标明了应用程序的名称。你也可以像下面这样通过 -n/-i来进行显示指定.

    $ phonegap create hello -n HelloWorld -i com.example.hello
    $ phonegap create hello --name HelloWorld --id com.example.hello

当然，以后你也可以手动修改config.xml文件。

原文：The Command-Line Interface

前面文章列表：

phonegap 00 写在前面的话

华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

GaussDB性能调优

华为开发者空间

领取云主机，带你基于PyTorch构建高效手写体识别系统

华为开发者空间

华为“云上先锋”实践赛·AI赛道现场会活动成功举办

华为开发者空间

所有评论(0)

查看更多评论

程序海洋的一叶小舟

@wangpengch

已为社区贡献2条内容