天天看點

移動應用前端h5架構彙總

1、Framework7

免費開源移動端架構,IOS及安卓原生樣式

Framework7 - is a free and open source mobile HTML framework to develop hybrid mobile apps or web apps with iOS & Android native look and feel. It is also an indispensable prototyping apps tool to show working app prototype as soon as possible in case you need to.

2、MUI

(以IOS為主體,顔值點個贊)

最接近原生APP體驗的高性能前端架構。以iOS平台UI為基礎,補充部分Android平台特有的UI控件

3、AUI

(h5,css3,效果好)flex,rem

為APICloud開發者設計的一套UI架構

3、WeUI

由微信官方設計團隊為微信内網頁和微信小程式設計,微信公衆平台首選(微信以外就)

4.Vant

有贊前端團隊基于有贊統一的規範實作的 Vue 元件庫

//通過CDN引入:
<!-- 引入樣式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.css" target="_blank" rel="external nofollow" >

<!-- 引入元件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/vant.min.js"></script>

<script>
var Vue = window.Vue;
var vant = window.vant;

// 注冊元件
Vue.use(vant);

// 調用函數式元件
vant.Toast('提示');
</script>
           

5、SUI Mobile

(輕量UI庫+IOS風格+CDN+跨平台

學習體驗感贊)

來源于阿裡巴巴共享業務事業部UED團隊

SUI Mobile 是一套基于 Framework7 開發的UI庫。它非常輕量、精美,隻需要引入CDN檔案就可以使用,并且能相容到 iOS 6.0+ 和 Android 4.0+,非常适合開發跨平台Web App。

大部分JS元件都是獨立的 Zepto 插件,并且提供了 Zepto/jQuery 風格的API。

6、FrozenUI

(騰訊手Q)

适用于使用手Q規範設計的Web頁面,而針對非手Q規範的頁面,可通過修改變量定制界面主題。可以采用cdn和combo的方式按需加載。使用iconfont展示圖示,包含了按鈕,清單,表單,提示,彈窗等常用元件,新增文本,布局,1px, rem,文字截斷,占位,兩端留白,兩端對齊等解決方案,同時解決了移動端螢幕适配問題。

CSS使用子產品化的樣式命名群組織規範,使用sass編寫css代碼。

相容android 2.3 +,ios 4.0 + 。

7、Mint UI

餓了麼前端團隊推出的基于 Vue.js 的移動端元件庫,(可能有一些些不好看?)(vue2)

Mint UI 包含豐富的 CSS 和 JS 元件,能夠滿足日常的移動端開發需要。通過它,可以快速建構出風格統一的頁面,提升開發效率。

真正意義上的按需加載元件。可以隻加載聲明過的元件及其樣式檔案,無需再糾結檔案體積過大。

考慮到移動端的性能門檻,Mint UI 采用 CSS3 處理各種動效,避免浏覽器進行不必要的重繪和重排,進而使使用者獲得流暢順滑的體驗。

依托 Vue.js 高效的元件化方案,Mint UI 做到了輕量化。即使全部引入,壓縮後的檔案體積也僅有 ~30kb (JS + CSS) gzip。

8.NutUI

一套京東風格的輕量級移動端Vue元件庫

(還行,水土有些不服)

9.Cube-UI

滴滴内部元件庫精簡提煉而來,基于Vue.js實作的移動端元件庫。

(水土更不服了)

10、Ant Design Mobile

antd-mobile 是 Ant Design 的移動規範的 React 實作,服務于螞蟻及口碑無線業務。

11、layui

追求極簡易上手,很舒服,(彈窗元件)

12、Amaze UI

(示範那好像有點崩?學習體驗感沒有特别好,适配很好)

Amaze UI 面向 HTML5 開發,使用 CSS3 來做動畫互動,平滑、高效,更适合移動裝置,讓 Web 應用更快速載入。

Amaze UI 以移動優先(Mobile first)為理念,從小屏逐漸擴充到大屏,最終實作所有螢幕适配,适應移動互聯潮流。

使用CDN:

http://cdn.clouddeep.cn/amazeui/1.0.1/css/amazeui.basic.css

http://cdn.clouddeep.cn/amazeui/1.0.1/css/amazeui.basic.min.css

http://cdn.clouddeep.cn/amazeui/1.0.1/css/amazeui.css

http://cdn.clouddeep.cn/amazeui/1.0.1/css/amazeui.min.css

http://cdn.clouddeep.cn/amazeui/1.0.1/css/amazeui.widgets.css

http://cdn.clouddeep.cn/amazeui/1.0.1/css/amazeui.widgets.min.css

http://cdn.clouddeep.cn/amazeui/1.0.1/js/amazeui.basic.js

http://cdn.clouddeep.cn/amazeui/1.0.1/js/amazeui.basic.min.js

http://cdn.clouddeep.cn/amazeui/1.0.1/js/amazeui.js

http://cdn.clouddeep.cn/amazeui/1.0.1/js/amazeui.min.js

http://cdn.clouddeep.cn/amazeui/1.0.1/js/amazeui.widgets.helper.js

http://cdn.clouddeep.cn/amazeui/1.0.1/js/amazeui.widgets.helper.min.js

http://cdn.clouddeep.cn/amazeui/1.0.1/js/amazeui.widgets.js

http://cdn.clouddeep.cn/amazeui/1.0.1/js/amazeui.widgets.min.js

13、WEEX

使用 Vue 作為上層架構,并遵循 W3C 标準實作了統一的 JSEngine 和 DOM API,這樣一來,你甚至可以使用其他架構驅動 Weex,打造三端一緻的 native 應用。

14、uiKit

(非專業移動端,是自适應)

uiKit是一款輕量級、子產品化的前端架構,可快速建構強大的web前端界面。基于 LESS 開發。根據不同的螢幕分辨率與上網裝置,UIKit 會自動做出響應,提供一緻的體驗。

15、YDUI Touch

(專注移動端,flex,rem,less)

YDUI Touch 專為移動端打造,在技術實作、互動設計上相容主流移動裝置,保證代碼輕、性能高;使用 Flex 技術,靈活自如地對齊、收縮、擴充元素,輕松搞定移動頁面布局;實作強大的螢幕适配布局,等比例适配所有螢幕。什麼?用得不開心?輕松切換 px;自定義Javascript元件、Less檔案、Less變量,定制一份屬于自己的YDUI。

16、vonic

基于 vue.js 和 ionic 樣式的移動端UI架構。

(fine.thank you.And you)

17、Muse-UI

(優雅)

基于 Vue 2.0 和 Material Desigin 的 UI 元件庫

1.元件豐富

Muse UI 基本實作了 Material Design 設計規範類的所有元件,另外還開發許多的功能性的元件

2.可定制

Muse UI 使用less檔案,所有的顔色都有一個變量維護,通過編寫 less 檔案完成自定義主題,另外元件内部也提供一些修改效果的參數

3.基于 Vue 2.0

Muse UI 基于 Vue2.0 開發,Vue2.0是當下最快的前端架構之一,小巧,api友好,可用于開發的複雜單頁應用。

//使用CDN
<link rel="stylesheet" href="https://unpkg.com/muse-ui/dist/muse-ui.css" target="_blank" rel="external nofollow" >
<script src="https://unpkg.com/muse-ui/dist/muse-ui.js"></script>
//加載字型和圖示
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic" target="_blank" rel="external nofollow" >
<link rel="stylesheet" href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css" target="_blank" rel="external nofollow" >
           

18. Touch UI

基于Vue,适用微信h5 , 使用便捷(都配置好了親),目前使用(emm感覺還有問題)

Touch UI是一套完全免費的高品質移動端UI架構。 基于vue.js架構,我們精心打造了上百種的移動端UI元件,可以輕松開發webApp、微信公衆号、釘釘微應用等。

Touch UI設計了與微信小程式相似的開發方式和API。

配合我們的小程式開發架構:Touch WX,可以将Touch UI做的H5應用友善的移植為微信小程式。