cordova-docs-cn/www/index.html

---
layout: cordova
permalink: /
priority: 1.0
change_frequency: monthly
---

<!-- Main jumbotron for a primary marketing message or call to action -->
<div id="hero">
    <div class="container vertical-center-parent">
        <div id="hero_section" class="row vertical-center-child">
            <div class="col-xs-12 col-sm-5 cordova-bot">
                <img src="{{ site.baseurl }}/static/img/cordova_bot.png" />
            </div>
            <div class="col-xs-12 col-sm-7 hero_content">
                <img class="hero_logo hidden-xs" src="{{ site.baseurl }}/static/img/cordova-logo-newbrand-textonly.svg" />
                <!-- <img class="hero_logo visible-xs" src="{{ site.baseurl }}/static/img/logo_full_2.svg" /> -->
                <p>使用<em>HTML</em>, <em>CSS</em> &amp; <em>JS</em>进行移动App开发</p>
                <p>多平台<em>共用一套代码</em></p>
                <p>免费<em>开源</em></p>
                <p>Cordova中文网QQ交流群：<em>1036846871</em></p>
                <div class="hero_supported_platforms">
                    <img src="{{ site.baseurl }}/static/img/platform-logos.svg" width="140px" />
                </div>
                <div class="hero_buttons">
                    <a href="#getstarted" class="col-xs-12 col-sm-5 btn btn-lg btn-primary">
                        入门
                    </a>
                    <a href="{{ site.baseurl }}/docs/zh-cn/{{ site.default_linked_docs_version }}/" class="col-xs-12 col-sm-6 btn btn-lg btn-primary">
                        文档
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="hero_bottom_strip">
    <div class="container">
        <div class="row">
            <div class="col-xs-4">
                <div class="row">
                    <div class="col-sm-4 col-md-3"><div class="sprite_img" id="sprite_shared_code"></div></div>
                    <div class="col-sm-8 col-md-9"><div class="value_prop"><p>跨平台重用代码</p></div></div>
                </div>
            </div>
            <div class="col-xs-4">
                <div class="row">
                    <div class="col-sm-4 col-md-3"><div class="sprite_img" id="sprite_offline"></div></div>
                    <div class="col-sm-8 col-md-9"><div class="value_prop"><p>支持离线场景应用</p></div></div>
                </div>
            </div>
            <div class="col-xs-4">
                <div class="row">
                    <div class="col-sm-4 col-md-3"><div class="sprite_img" id="sprite_apis"></div></div>
                    <div class="col-sm-8 col-md-9"><div class="value_prop"><p>访问设备原生API</p></div></div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="blue-divider"></div>
<div class="container get-started-section">
    <!-- Example row of columns -->
    <div class="row">
        <div class="col-md-12 text-center">
            <a id="getstarted" name="getstarted" class="fragment-anchor"></a>
            <h1>快速入门</h1>
        </div>
    </div>
    <!-- GETTING STARTED -->
    <div class="row">
        <div class="col-md-1 col-xs-2">
            <div class="number_circle">1</div>
        </div>
        <div class="col-md-7 col-xs-10">
            <h2>安装Cordova</h2>
            <p>Cordova的命令行运行在 <a target="_blank" href="http://nodejs.org/">Node.js</a> 上面并且可以通过
            <a target="_blank" href="https://npmjs.org/package/cordova">NPM</a>.
            安装。 根据 <a href="{{ site.baseurl }}/docs/en/{{ site.default_linked_docs_version }}/index.html#develop-for-platforms">平台具体指导</a>
            安装相应平台的依赖。打开命令提示符或终端，然后键入 <code>npm install -g cordova</code>.</p>
        </div>
        <div class="col-md-4 col-xs-12">
            <div class="well_code">
                <div>
                    <button type="button" class="btn btn btn-primary pull-right btn-copy" data-clipboard-target="copy-npm-install-text">Copy</button>
                </div>
                $ npm install -g cordova
                <div id="copy-npm-install-text" class="copy-text">npm install -g cordova</div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-1 col-xs-2">
            <div class="number_circle">2</div>
        </div>
        <div class="col-md-7 col-xs-10">
            <h2>创建一个项目</h2>
            <p>使用命令行创建一个空的Cordova项目。导航到你希望创建项目的目录，然后键入 <code>cordova create &lt;path&gt;</code>.</p>
            <p>要知道这个命令完整的选项，键入 <code>cordova help create</code>.</p>
        </div>
        <div class="col-md-4 col-xs-12">
            <div class="well_code">
                <div>
                    <button type="button" class="btn btn btn-primary pull-right btn-copy" data-clipboard-target="copy-cordova-create-text">Copy</button>
                </div>
                $ cordova create MyApp
                <div id="copy-cordova-create-text" class="copy-text">cordova create MyApp</div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-1 col-xs-2">
            <div class="number_circle">3</div>
        </div>
        <div class="col-md-7 col-xs-10">
            <h2>添加一个平台</h2>
            <p>在创建完一个Cordova项目后，导航到项目目录。在项目目录中，你需要添加你想构建app的平台</p>
            <p>为了添加平台， 键入 <code>cordova platform add &lt;platform name&gt;</code>.</p>
            <p>为了知道你可以添加的平台，你可以运行 <code>cordova platform</code>.</p>
        </div>
        <div class="col-md-4 col-xs-12">
            <div class="well_code">
                <div>
                    <button type="button" class="btn btn btn-primary pull-right btn-copy" data-clipboard-target="copy-cordova-platform-add-text">Copy</button>
                </div>
                <p>$ cd MyApp</p>
                <p>$ cordova platform add browser</p>
                <div id="copy-cordova-platform-add-text" class="copy-text">cd MyApp&#10;cordova platform add browser</div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-1 col-xs-2">
            <div class="number_circle">4</div>
        </div>
        <div class="col-md-7 col-xs-10">
            <h2>运行App</h2>
            <p>在命令中,键入 <code>cordova run &lt;platform name&gt;</code>.</p>
        </div>
        <div class="col-md-4 col-xs-12">
            <div class="well_code">
                <div>
                    <button type="button" class="btn btn btn-primary pull-right btn-copy" data-clipboard-target="copy-cordova-run-text">Copy</button>
                </div>
                $ cordova run browser
                <div id="copy-cordova-run-text" class="copy-text">cordova run browser</div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-1 col-xs-2">
            <div class="number_circle">5</div>
        </div>
        <div class="col-md-7 col-xs-10">
            <h2>通常的下一步</h2>
            <ul class="nav">
                <li>
                    <a href="{{ site.baseurl }}/docs/en/{{ site.default_linked_docs_version }}/guide/overview/">阅读文档</a>
                </li>
                <li>
                    <a href="{{ site.baseurl }}/docs/en/{{ site.default_linked_docs_version }}/guide/cli/#add-plugins">添加插件</a>
                </li>
                <li>
                    <a href="{{ site.baseurl }}/docs/en/{{ site.default_linked_docs_version }}/config_ref/images.html">自定义App ICON</a>
                </li>
                <li>
                    <a href="{{ site.baseurl }}/docs/en/{{ site.default_linked_docs_version }}/config_ref/">配置你的App</a>
                </li>
            </ul>
        </div>
        <div class="col-md-4 col-xs-12">
        </div>
    </div>
</div>
<!-- /container -->

<div class="blue-divider"></div>
<div class="container-fluid dark vertical-aligned-columns">
    <div class="container">
        <div class="row showcase_section_intro" id="supported_platforms_section">
            <div class="col-md-12 text-center">
                <h1>支持平台</h1>
                <h2>查看每个平台
                    <a href="{{ site.baseurl }}/docs/en/{{ site.default_linked_docs_version }}/guide/support/index.html">支持特性</a> 列表</h2>
                <p>
                    Cordova包装你的HTML/JavaScript app到原生app容器中，可以让你访问每个平台设备的功能。这些功能通过统一的JavaScript API提供，让你轻松的编写一组代码运行在几乎市面上的所有手机和平板上，并可以发布到相应的app商城中。
                </p>
            </div>
        </div>
    </div><!-- /container -->

    <div class="container-fluid supported_platforms vertical-aligned-columns">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <ul class="platform_logos">
                        <li><img src="{{ site.baseurl }}/static/img/3rdparty_logo_sprite.svg"/></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    {% include tools_and_showcase.html %}

</div><!-- /container-fluid -->