Onsen UI是Cordova UI开发的答案吗？

Onsen UI是用于开发移动应用程序的新JavaScript和CSS框架。 借助众多基于Web的UI组件，您可以开发HTML5，PhoneGap和Cordova应用程序。 专注于类似本机的性能，用户体验，响应式设计和多样化的平台，这似乎很有希望。 它结合了HTML 5，CSS， AngularJS ， jQuery和Font Awesome的强大功能，以创建外观精美的应用程序。

安装

要开始使用Onsen UI，请首先确保已安装Node.js和npm。

接下来，根据您计划为其开发的应用程序平台，安装所需的Android或IOS平台依赖项。 在本文中，我们将尝试为Android创建一个应用。

可以如下所示安装Cordova ：

sudo npm install -g cordova

Onsen UI中提供了许多模板，例如主详细信息 ， 滑动菜单等。我们将使用主详细信息模板。

下载模板，解压缩并导航到项目根文件夹。 现在，我们将添加要为其开发应用程序的平台。 如图所示添加平台：

cordova platform add android

完成后，输入以下命令来模拟我们下载的模板：

cordova emulate

这是它的外观：

我们将创造的

在本教程中，我们将使用Onsen UI组件设计应用程序。 该应用程序将具有登录，注册页面，并列出所有注册用户的页面。
设计完成后，我们会将应用程序连接到Firebase 。

您可以在GitHub上找到最终项目

设计登录屏幕

下面是我们下载的模板的文件夹结构：

OnsenUI(root)
      -----> hooks
      -----> merges
      -----> platforms
      -----> plugins
      -----> www

www文件夹包含html，css和JavaScript文件，我们将对其进行修改以创建自定义应用程序。
我觉得学习新事物的最好方法是从头开始。 打开index.html并删除body标签内的所有内容。

Onsen UI提供了许多用于创建UI的组件 。 我们将使用其中一些来设计屏幕。

为了维护页面堆栈，Onsen UI提供了一个名为ons-navigator的组件 。 它充当我们所有页面的容器。 在其中，我们将添加另一个名为ons-page的组件 。

这是它的外观：

<ons-navigator title="Navigator" var="myNavigator">
    <ons-page>
        // Page content comes here
    </ons-page>
</ons-navigator>

在页面内部添加另一个称为ons-toolbar的组件，该组件充当工具栏。

我们还需要添加一个用户名和密码输入框。 为了添加这些内容，首先，我们将添加一个列表框，并在其中包含输入文本。 为了添加列表项，Onsen UI提供了一个名为ons-list的组件 。

这是它的外观：

<ons-navigator title="Navigator" var="myNavigator">
    <ons-page>

        <ons-toolbar>
            <div class="center">Onsen UI App</div>
        </ons-toolbar>

        <ons-list>
            <ons-list-item>
                <input type="text" placeholder="Username" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;">
            </ons-list-item>


            <ons-list-item>
                <input type="password" placeholder="Password" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;">
            </ons-list-item>
        </ons-list>

    </ons-page>
</ons-navigator>

接下来，我们将添加一个用于登录的按钮，为此，我们将使用ons-button组件。 这里是登录屏幕看上去上述变化后如何。

设计注册屏幕

接下来，让我们添加“注册”屏幕以供用户注册。 可以从主屏幕访问注册屏幕。 因此，在右上角的工具栏中，添加一个用于注册的图标。 要添加图标，Onsen UI提供了一个名为ons-icon的组件 。 修改ons-toolbar代码，如下所示：

<ons-toolbar>
      <div class="center">Onsen UI App</div>
      <div class="right">

        <ons-icon icon="ion-plus-circled" size="40px"</ons-icon>

      </div>
</ons-toolbar>

我们将注册页面定义为单独的html片段，为此，我们将使用ons-template 。 注册html应该具有工具栏，用于输入控件的列表项和一个注册按钮。

这是注册模板代码：

<ons-template id="register.html">
    <ons-page>
        <ons-toolbar>
            <div class="left">
                <ons-back-button>Back</ons-back-button>
            </div>
            <div class="center">Register</div>
        </ons-toolbar>

        <div style="text-align: center">
            <br />
            <ons-page>


                <ons-list>
                    <ons-list-item>
                        <input type="text" placeholder="Username" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;">
                    </ons-list-item>

                    <ons-list-item>
                        <input type="text" placeholder="Email Address" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;">
                    </ons-list-item>
                    <ons-list-item>
                        <input type="text" placeholder="Password" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;">
                    </ons-list-item>

                    <ons-list-item>
                        <ons-row>
                            <ons-col width="90px">
                                <span style="color: #666">Gender</span>
                            </ons-col>
                            <ons-col>

                                <div style="float: right; padding-right: 16px;">
                                    <label class="radio-button">
                                        <input type="radio" name="level">
                                        <div class="radio-button__checkmark"></div>
                                        Male
                                    </label>

                                    <label class="radio-button">
                                        <input type="radio" name="level">
                                        <div class="radio-button__checkmark"></div>
                                        Female
                                    </label>
                                </div>

                            </ons-col>
                        </ons-row>
                    </ons-list-item>



                </ons-list>


                <div class="content-padded">
                    <ons-button modifier="large" onclick="">
                        Sign Up
                    </ons-button>
                </div>


            </ons-page>
        </div>
    </ons-page>
</ons-template>

上面代码中使用的大多数组件与我们在登录页面上使用的组件相同。 使用的两个新组件是ons-back-button和ons-row 。 ons-back-button用于提供后退按钮支持，而ons-row用于表示网格系统中的一行。

最后，为了将工具栏中的图标链接到登录页面，请将onclick事件添加到图标。 要导航，我们将使用ons-navigator的 pushPage方法，如下所示：

<ons-icon icon="ion-plus-circled" size="40px" onclick="myNavigator.pushPage('register.html', { animation : 'slide' } )"></ons-icon>

这是登录和注册页面的演示。

结论

在本教程中，我们学习了如何使用Onsen UI开始进行移动应用程序开发。 我们设计了一个简单的用户注册和登录应用程序。 在本教程的下一部分中，我们将通过与Firebase挂钩来使该应用程序正常运行。

From: https://www.sitepoint.com/onsen-ui-answer-cordova-ui-development/