引言
之前在小程序開發(fā)文檔上見過WeUI 前端樣式庫，下載下來后一直摸不著頭腦，今天終得撥云見日。
其實這就是使得微信小程序和頁面界面 UI 統(tǒng)一：WeUI 前端樣式庫（含 Sketch 源文件）
微信里使用的 H5 頁面是相當多，特別是小程序更是火爆，為了能讓頁面以及微信小程序的界面能與微信統(tǒng)一，讓用戶看起來就像是微信內(nèi)置的功能或頁面，那么建議大家使用推薦的 WeUI 前端框架！
推薦
框架名稱：WeUI 樣式庫
在線演示：https://weui.io
下載地址：https://github.com/weui/weui
Sketch 源文件
同時也推出了 WeUI 的 Sketch 源文件，如果你是設(shè)計師，可以下載這個設(shè)計源文件來設(shè)計新的微信小程序、H5網(wǎng)頁等等，還有 Symbol，很好用哦！
文件格式：.Sketch
素材版權(quán)：免費
官方簡述：WeUI 是一套同微信原生視覺體驗一致的基礎(chǔ)樣式庫，由微信官方設(shè)計團隊為微信 Web 開發(fā)量身設(shè)計，可以令用戶的使用感知更加統(tǒng)一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素
下面來看看 WeUI 樣式庫的介紹：
圖標
圖標的顏色、樣式和微信原生的樣式幾乎一致，看不到有什么區(qū)別哦！
Flex 布局
使用 CSS Flex 屬性定制的布局系統(tǒng)，輕松實現(xiàn)多欄自適應(yīng)排版。
Panel 面板
可以用它來做文章列表、文章圖文列表。
Footer 頁尾樣式
就是網(wǎng)頁頁腳樣式~
提示樣式
菜單
底部Tabbar
Navbar
WeUI頁面層級
用于規(guī)范WeUI頁面元素所屬層級、層級順序及組合規(guī)范。
需要制作一個和微信一樣網(wǎng)頁設(shè)計界面么？推薦使用 WeUI 這個框架。
如何使用WeUI樣式庫
WeUI是在遵守微信視覺設(shè)計規(guī)范下，由官方設(shè)計團隊為小程序量身定制的基礎(chǔ)樣式庫。
WeUI是官方出品，并且在10月28號IDE更新后，IDE不能識別和引用css，同時也屏蔽了從網(wǎng)絡(luò)獲取樣式文件，和css劃清界限。
現(xiàn)在到了重點：如何引入WeUI？
1. 下載WeUI
注意是在【weui-wxss/dist/style/】目錄下，不要【weui-wxss/src】目錄里面下載
- 組件的wxml結(jié)構(gòu)請看
dist/example/下的組件 - 樣式文件可直接引用
dist/style/weui.wxss，或者單獨引用dist/style/widget下的組件的wxss文檔
2. 將weui.wxss拷貝到小程序根目錄中
3. 在app.wxss或頁面wxss導(dǎo)入weui.wxss
/**app.wxss**/
@import 'weui.wxss';
4. 以上就成功引入了weui.wxss，weui也提供了單個組件的樣式引入，流程同上。
地址為：單個Widget的樣式文件
如何使用WeUI
- 根組件使用class="page"
<view class="page">
</view>
- 頁面骨架組件使用class="page__xxx"(注意是兩個下劃線)
<view class="page">
<!--頁頭-->
<view class="page__hd"></view>
<!--主體-->
<view class="page__bd"></view>
<!--沒有頁腳-->
</view>
- 其他組件都已weui-開頭后接組件名稱，例如class="weui-footer"
<view class="weui-footer">我是頁腳</view>
- 組件的子組件樣式，例如view.weui-footer組件還有鏈接和版權(quán)信息。
<view class="weui-footer">
<view class="weui-footer__links">
<navigator url="" class="weui-footer__link">小黃象</navigator>
</view>
<view class="weui-footer__text">Copyright ? 精品專欄組</view>
</view>
組件和子組件使用兩個下劃線銜接，所以要區(qū)分什么時候用"-",什么時候用"__"
下圖是結(jié)合weui.wxss做的社區(qū)專欄小程序版，正在完善ing
