7+用于移动开发的最佳免费UI框架

本文概述

• 7.Ionic Material
• 6.Mobile Angular UI
• 5.Phonon
• 4.Material UI
• 3.Ratchet
• 2.Framework7
• 1.Onsen UI
• Touchstone.js

移动应用程序开发正在发生显着变化, 开发人员的工作方式已从本机更改为基于HTML5的混合应用程序开发选项。混合移动应用程序的最大优势之一是”编写一次即可随处运行”的原则。现在, 可能作为开发人员, 你在网页中使用框架来促进项目的开发阶段, 但是, 你是否对混合应用程序使用框架？每个人都可以根据自己的意愿自由地从事其项目, 如果你想设计自己的框架以使用自定义组件在你的应用程序中工作, 那就去做吧。但是, 如果你是混合开发新手, 或者只想使用标准来完成工作, 则可以使用框架。框架将帮助你(开发人员)通过使用通用组件来专注于其他领域, 从而节省时间, 从而帮助你更快更好地工作。

享受最佳的移动开发UI框架中的7个。

重要

此顶部不是创建混合移动应用程序的框架的列表(本机代码)。它基于Frameworks, 可帮助你为移动应用程序设计出色的用户界面(其中一些使用其他著名的WebApp框架, 如React, AngularJS或VueJS)。你可以使用Cordova, Phonegap, Ionic等来创建移动应用程序。

7.Ionic Material

Github

Ionic Material是Ionic Framework的扩展库, 这意味着你无需更改开发Ionic混合应用程序的方式即可实现它们。 Ionic Material旨在将Material Design的最佳表示形式集成到Ionic Developers的单个附加库中。随着Polymer项目, ngMaterial项目和其他开源项目的兴起, 它旨在积极参与并与这些项目和其他相关项目保持一致。

最好将Ionic Material解释为Ionic的”材料扩展”, 而不是整个Angular。区别不只是语义-Ionic Material扩展了实际的Ionic框架名称空间(在JS中), 在Ionic元素上呈现了材料样式(遵循Ionic的约定), 并且旨在遵循Ionic的发布, 并支持材料主题, 墨水, 以及任何新的Ionic版本的运动。

6.Mobile Angular UI

Github

移动Angular UI是一个移动UI框架, 就像Sencha Touch或jQuery Mobile一样。如果你知道Angular JS和Twitter Bootstrap, 你已经知道如何使用它。移动Angular UI提供了Bootstrap 3中缺少的基本移动组件：开关, 覆盖, 侧边栏, 可滚动区域, 绝对定位的顶部和底部导航条, 它们不会在滚动时反弹。它依赖于诸如fastclick.js和overthrow.js之类的强大库来获得更好的移动体验。它提供了很棒的本机外观控件, 可滑动进/出侧边栏, 你可以通过HTML属性使其完全交互, 而无需直接使用Javascript。

5.Phonon

Github

Phonon是一种重量轻, 可伸缩, 灵活且可自定义的HTML5 Web混合移动应用程序框架, 可与受Android活动启发的页面管理器(路由器)配合使用。 Phonon会使用本机方式对活动的UI组件采取行动。一个实际的例子是, 如果打开一个对话框并且用户在Android上单击后退按钮, 则事件控制器将自动关闭活动对话框, 而不是返回到上一页。

此外, 该框架还是一个UI框架, 提出了许多通用功能, 这意味着它们与移动平台没有什么不同。另一方面, 你可以根据平台定义样式, 因为Phonon在body标签中添加了OS类。

4.Material UI

Github

Material-UI是一组实现Google的Material Design规范的React组件。这个很棒的框架的缺点是你需要使用React, 因为它基于组件。你可以查看2个入门项目。它们可以在examples文件夹中找到。这些项目是基本示例, 显示了如何在自己的项目中使用material-ui组件。第一个项目使用browserify进行模块捆绑, 并使用gulp进行JS任务自动化, 而第二个项目使用webpack进行模块捆绑和构建。我们建议你在进入Material-UI之前先了解React。 Material-UI是一组React组件, 因此了解React如何适合Web开发非常重要。

3.Ratchet

Github

Ratchet是一个很棒的前端框架, 可让你为具有简单HTML, CSS和JS组件的移动应用程序创建一个很棒的用户界面。 Ratchet于2012年11月发布, 迅速成为GitHub上最受欢迎的原型工具之一。首次启动后, 第2版作为完全重写发布。 v2被抽象为特定于平台的样式, 并放入其自己的主题CSS文件中, 添加了一个名为Ratchicons的图标集, 并正式成为Bootstrap系列的一部分。

Ratchet被设计为仅响应来自移动设备的触摸事件。为了使用鼠标单击事件(用于桌面浏览和测试), 你有几种选择：

• 在Chrome中启用触摸事件仿真(可在网络检查器首选项的”替代”标签中找到)
• 使用诸如fingerblast.js之类的JavaScript库来模拟触摸事件(最好仅从台式设备加载)

2.Framework7

Github

Framework7是一个免费的开放源代码移动HTML框架, 用于开发具有iOS和Android原生外观的混合移动应用程序或Web应用程序。它也是必不可少的原型应用程序工具, 可在需要时尽快显示可用的应用程序原型。 Framework7不使用也不依赖于任何第三方库。这就是为什么它超轻便, 性能和灵活性。 Framework7支持无限数量的不同隔离视图。有趣的是, 你只需使用链接上的”数据视图”属性即可轻松控制每个视图, 而无需使用任何JavaScript代码。 Framework7使用Ajax在需要服务器的页面之间导航。

Framework7是完全免费和开源的(MIT许可)。

1.Onsen UI

Github

Onsen UI提供了UI框架和工具, 可用于基于PhoneGap / Cordova创建快速, 美观的HTML5混合移动应用程序。由于具有通用的核心, 没有框架依赖性, 因此, 通过任何不断变化的JavaScript框架, 使用Onsen UI进行应用程序开发都很容易。

它允许你在React, Meteor, Vue.js, AngularJS, Angular 2等框架之间工作, 或者使用纯JavaScript。专门为移动应用程序设计的各种UI组件。 Onsen UI提供选项卡, 侧面菜单, 堆栈导航以及大量其他组件, 例如列表和表单。它们都具有iOS和Android Material设计支持, 并具有自动样式, 这些样式将根据平台更改应用程序的外观。使用Onsen UI, 你可以使用相同的源代码真正支持Android和iOS。 Onsen UI易于学习, 同时又是创建复杂移动应用程序的强大工具。

Touchstone.js

Touchstone是一个由React.js驱动的UI框架, 用于开发漂亮的混合移动应用程序。它正在构建中, 没有可用的文档, 但是该项目看起来非常有前途, 因此值得一提。

Vuetify.js

Vuetify.js是Vue.js 2的组件框架。它旨在提供干净, 语义和可重用的组件, 使构建应用程序变得轻而易举。 Vuetify.js利用Google的Material Design设计模式, 从Materialize.css, Material Design Lite, Semantic UI和Bootstrap 4等其他流行框架中汲取灵感。

如果你知道另一个很棒的框架来构建移动应用程序的用户界面, 请在注释框中与社区共享它。