WeUI教程/第三方擴展及其餘UI框架對比

WeUI 是一套同微信原生視覺體驗一致的基礎樣式庫，由微信官方設計團隊爲微信內網頁和微信小程序量身設計，令用戶的使用感知更加統一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。WeUI 爲微信 Web 服務量身設計的h5框架。嚴格的講它是一個css庫。算一個精簡的庫，它是使用less編寫，最終編譯成css，壓縮成weui.min.css

WeUI使用方法

WeUI 是一套與微信原生 UI 一致的 UI 庫，核心文件是 weui.css，只須要獲取到該文件，而後在頁面中引入，便可使用 WeUI 的組件。
微信官方、BootCDN 和 cdnjs 爲 WeUI 提供了 CDN 連接，推薦使用，連接以下：

v2.1.3
https://res.wx.qq.com/open/libs/weui/2.1.3/weui.css

https://res.wx.qq.com/open/libs/weui/2.1.3/weui.min.css

v1.1.3
https://res.wx.qq.com/open/libs/weui/1.1.3/weui.css

https://res.wx.qq.com/open/libs/weui/1.1.3/weui.min.css

v0.4.3
https://res.wx.qq.com/open/libs/weui/0.4.3/weui.css

https://res.wx.qq.com/open/libs/weui/0.4.3/weui.min.css

其餘資源

來源 地址
微信官方 //res.wx.qq.com/open/libs/weui/1.1.3/weui.min.css
微信官方 //res.wx.qq.com/open/libs/weui/0.4.3/weui.min.css
BootCDN //cdn.bootcss.com/weui/0.4.3/style/weui.css
cdnjs //cdnjs.cloudflare.com/ajax/libs/weui/0.4.3/style/weui.css
（注：cdnjs服務器在國外）

WeUI演示列表及代碼

• actionsheet 預覽 代碼
• article 預覽 代碼
• badge 預覽 代碼
• button 預覽 代碼
• dialog 預覽 代碼
• flex 預覽 代碼
• footer 預覽 代碼
• form 預覽 代碼
• gallery 預覽 代碼
• grid 預覽 代碼
• half-screen-dialog 預覽 代碼
• icons 預覽 代碼
• list 預覽 代碼
• loadmore 預覽 代碼
• msg_success 預覽 代碼
• msg_text 預覽 代碼
• msg_text_primary 預覽 代碼
• msg_warn 預覽 代碼
• navbar 預覽 代碼
• panel 預覽 代碼
• picker 預覽 代碼
• preview 預覽 代碼
• progress 預覽 代碼
• searchbar 預覽 代碼
• slider 預覽 代碼
• tabbar 預覽 代碼
• toast 預覽 代碼
• uploader 預覽 代碼

WeUI第三方擴展

• airyland/vux
• cipchk/ngx-weui
• pengtikui/weui-extension
• kevyu/weui-sass
• Eric-Guo/weui-rails(Using kevyu/weui-sass)
• n7best/react-weui
• aidenzou/vue-weui
• adcentury/vue-weui
• ZTfer/weui-sketch
• i5ting/weui-practice

weui的優勢

它很好的解決推入和返回的問題
它有微信同樣的ui界面
它還提供了基本的ui組件（彈出框，actionsheet等）

weui的缺點

頁面內容過長的時候，滑動不流暢，但能夠經過iscroll修正 

WeUI與VUX

VUX（讀音 [v’ju:z]，同 views）是基於WeUI和Vue(2.x)開發的移動端UI組件庫，主要服務於微信頁面。基於webpack + vue-loader + vux能夠快速開發移動端頁面，配合vux-loader方便你在WeUI的基礎上定製須要的樣式。但VUX並不徹底依賴於WeUI，VUX 在 WeUI 的基礎上擴展了多個經常使用組件，可是儘可能保持總體UI樣式接近WeUI的設計規範。

WeUI與Zepto

Zepto是一個輕量級的針對現代高級瀏覽器的JavaScript庫， 它與jquery有着相似的api。 若是你會用jquery，那麼你也會用zepto。中文文檔https://www.html.cn/doc/zeptojs_api/

WeUI+是Zepto1.2和WeUI 2.0爲基礎,收集整理了上百個組件開發而成,兼容IOS和Android平臺,主要用於微信/手機網站開發.演示地址https://weui.shanliwawa.top/

LayUI與WeUI

layui 是一款採用自身模塊規範編寫的前端 UI 框架，遵循原生 HTML/CSS/JS 的書寫與組織形式，門檻極低，拿來即用。Layui比通常UI框架更加方便，不光爲咱們提供好靜態頁面，連數據交互這塊也幫前端寫好了。LayUI官網還提供一些其用戶基於LayUI寫好的開源的完整系統，好比一個具備全部功能的管理後臺，讓一些沒有設計師或者快速開發的公司，直接拿來修改使用。項目地址https://www.layui.com/

WeUI 爲微信 Web 服務量身設計的h5框架。嚴格的講它是一個css庫。

MUI與WeUI 

MUI是一個輕量級的CSS框架，遵循Google的Material Design設計方針。MUI憑着其極小的體積，幫助網頁儘量快地加載，mui.min.css只有6.6KB (gzipped)，mui.min.js只有5.4KB (gzipped)。項目地址https://www.muicss.com/

WeUI只用css文件沒有JS文件，但已經有第三方已經集成了，例如jQuery WeUI，WeUI+，他們都加入了幻燈片切換等js特效

jQuery WeUI

jQuery WeUI 是專爲微信公衆帳號開發而設計的一個簡潔而強大的UI庫，包含所有WeUI官方的CSS組件，而且額外提供了大量的拓展組件，豐富的組件庫能夠極大減小前端開發時間。jQuery WeUI 提供了總共30+ 個很是實用的組件：列表，表單，卡片，對話框，下拉刷新等。項目地址http://jqweui.com/

iView與WeUI

iView Weapp是一套高質量的微信小程序 UI 組件庫。項目地址https://weapp.iviewui.com/

WeUI是微信官方設計團隊爲微信內網頁和微信小程序量身設計

SUI與WeUI

SUI Mobile 是一套基於 Framework7 開發的UI庫。它很是輕量、精美，只須要引入CDN文件就可使用，方便迅速搭建手機H5應用，而且能兼容到 iOS 6.0+ 和 Android 4.0+，很是適合開發跨平臺Web App。是阿里巴巴共享業務事業部UED團隊開發的。項目地址http://m.sui.taobao.org/

WeUI是由微信官方設計團隊爲微信內網頁和微信小程序量身設計

WePY與WeUI 

WePY (發音: /'wepi/) 項目啓動於 2017 年 11 月份， 是小程序最先的框架之一，是一款讓小程序支持組件化開發的框架，經過預編譯的手段讓開發者能夠選擇本身喜歡的開發風格去開發小程序。框架的細節優化，Promise，Async Functions的引入都是爲了能讓開發小程序項目變得更加簡單，高效。項目地址https://wepyjs.github.io/wepy-docs/。WePY資源彙總：awesome-wepy

WePY能夠將WeUI引入到小程序中