介紹

Onsen UI是一個開源框架，可以輕松創(chuàng)建原生感的Progressive Web Apps（PWA）和混合應(yīng)用程序。核心庫是用純Javascript（在Web組件之上）編寫的，并且與框架無關(guān)，這意味著你可以將它與你喜歡的框架及其工具一起使用。提供了一些額外的綁定包，以便于使用Onsen UI的API以及許多流行的框架：React、Angular 2+、Vue、 AngularJS 1.x！

Github

https://github.com/OnsenUI/OnsenUI

Github star數(shù)7k+

什么是Onsen UI？

Onsen UI是......

• 一組專為移動應(yīng)用程序設(shè)計的豐富UI組件
• 本機iOS和Android設(shè)計標準包含隨時可用的功能
• 免費使用，100％開源軟件（Apache v2許可證）

Onsen UI通過原生設(shè)計的UI元素豐富了應(yīng)用用戶的移動體驗。它非常適合使用Cordova開發(fā)混合應(yīng)用程序或開發(fā)移動Web應(yīng)用程序（也稱為Progressive Web Apps）。

面向未來的架構(gòu)

在幕后，Onsen UI包含三個層次：

1. CSS組件，用cssnext編寫，是下一代CSS
2. Web Components，用本機JavaScript編寫，支持所有框架
3. 框架綁定，用于與流行框架（如Vue.js，AngularJS 1，Angular 2+和React）更緊密地集成

簡而言之，Onsen UI簡化了您的開發(fā)，適用于任何框架，并且是未來的證明！

組件預(yù)覽

• Action Sheet

• Alert Dialog

• 按鈕

• Card

• CheckBox

• Fab

• List

• 通知

• Popover

• 進度條和loading

• Range

• 搜索框

• 分割

• Select Input

• Switch

• Tabbar

• Text

• Toast

• Toolbar

• Toolbar Button

安裝使用

npm install onsenui

官方針對不同的平臺分別有不同的使用指南，分別包括Vue、React、Angular、jQuery等來幫助你開始使用Onsen UI創(chuàng)建混合應(yīng)用程序和PWA

生態(tài)系統(tǒng)

因為有時UI框架可能不足以使混合應(yīng)用程序開發(fā)變得容易，Onsen UI帶有一個完整的集成工具生態(tài)系統(tǒng)。認識Monaca。

Monaca由Onsen UI團隊開發(fā)，是一個工具包，可以簡單輕松地使用PhoneGap / Cordova進行混合移動應(yīng)用程序開發(fā)：Onsen UI Cordova模板，調(diào)試套件，推送通知，遠程構(gòu)建，后端解決方案，加密，版本控制，連續(xù)整合等等。此外，它提供了多個開發(fā)環(huán)境，其中包含已配置且已準備好的所有內(nèi)容：

平臺兼容性

Onsen UI經(jīng)過測試，可與以下瀏覽器和移動操作系統(tǒng)配合使用：

• Android 4.4.4+
• iOS 9+
• Chrome
• Safari

總結(jié)

Onsen UI是跨平臺的混合應(yīng)用開發(fā)框架，包括完整的UI和工具套件，是開發(fā)混合應(yīng)用的另一種解決方案，其支持三大主流前端框架，更容易上手使用，如果你對它已經(jīng)感興趣，不妨試一試！