引言
之前在小程序開(kāi)發(fā)文檔上見(jiàn)過(guò)WeUI 前端樣式庫(kù)酣难，下載下來(lái)后一直摸不著頭腦煎饼，今天終得撥云見(jiàn)日逼泣。
其實(shí)這就是使得微信小程序和頁(yè)面界面 UI 統(tǒng)一：WeUI 前端樣式庫(kù)（含 Sketch 源文件）
微信里使用的 H5 頁(yè)面是相當(dāng)多玫镐，特別是小程序更是火爆，為了能讓頁(yè)面以及微信小程序的界面能與微信統(tǒng)一箩溃，讓用戶看起來(lái)就像是微信內(nèi)置的功能或頁(yè)面瞭吃，那么建議大家使用推薦的 WeUI 前端框架碌识！
推薦
框架名稱：WeUI 樣式庫(kù)
在線演示：https://weui.io
下載地址：https://github.com/weui/weui
Sketch 源文件
同時(shí)也推出了 WeUI 的 Sketch 源文件，如果你是設(shè)計(jì)師虱而，可以下載這個(gè)設(shè)計(jì)源文件來(lái)設(shè)計(jì)新的微信小程序、H5網(wǎng)頁(yè)等等开泽，還有 Symbol牡拇，很好用哦！
文件格式：.Sketch
素材版權(quán)：免費(fèi)
官方簡(jiǎn)述：WeUI 是一套同微信原生視覺(jué)體驗(yàn)一致的基礎(chǔ)樣式庫(kù)穆律，由微信官方設(shè)計(jì)團(tuán)隊(duì)為微信 Web 開(kāi)發(fā)量身設(shè)計(jì)惠呼，可以令用戶的使用感知更加統(tǒng)一。包含button峦耘、cell剔蹋、dialog眯停、 progress湾笛、 toast箫锤、article蚯涮、actionsheet我纪、icon等各式元素
下面來(lái)看看 WeUI 樣式庫(kù)的介紹：
圖標(biāo)
圖標(biāo)的顏色慌烧、樣式和微信原生的樣式幾乎一致揭斧，看不到有什么區(qū)別哦俯萌！
Flex 布局
使用 CSS Flex 屬性定制的布局系統(tǒng)第焰，輕松實(shí)現(xiàn)多欄自適應(yīng)排版买优。
Panel 面板
可以用它來(lái)做文章列表、文章圖文列表挺举。
Footer 頁(yè)尾樣式
就是網(wǎng)頁(yè)頁(yè)腳樣式~
提示樣式
菜單
底部Tabbar
Navbar
WeUI頁(yè)面層級(jí)
用于規(guī)范WeUI頁(yè)面元素所屬層級(jí)杀赢、層級(jí)順序及組合規(guī)范。
需要制作一個(gè)和微信一樣網(wǎng)頁(yè)設(shè)計(jì)界面么湘纵？推薦使用 WeUI 這個(gè)框架脂崔。
如何使用WeUI樣式庫(kù)
WeUI是在遵守微信視覺(jué)設(shè)計(jì)規(guī)范下，由官方設(shè)計(jì)團(tuán)隊(duì)為小程序量身定制的基礎(chǔ)樣式庫(kù)瞻佛。
WeUI是官方出品脱篙，并且在10月28號(hào)IDE更新后，IDE不能識(shí)別和引用css伤柄，同時(shí)也屏蔽了從網(wǎng)絡(luò)獲取樣式文件绊困，和css劃清界限。
現(xiàn)在到了重點(diǎn)：如何引入WeUI适刀？
1. 下載WeUI
注意是在【weui-wxss/dist/style/】目錄下秤朗，不要【weui-wxss/src】目錄里面下載
- 組件的wxml結(jié)構(gòu)請(qǐng)看
dist/example/下的組件 - 樣式文件可直接引用
dist/style/weui.wxss，或者單獨(dú)引用dist/style/widget下的組件的wxss文檔
2. 將weui.wxss拷貝到小程序根目錄中
3. 在app.wxss或頁(yè)面wxss導(dǎo)入weui.wxss
/**app.wxss**/
@import 'weui.wxss';
4. 以上就成功引入了weui.wxss笔喉，weui也提供了單個(gè)組件的樣式引入取视，流程同上硝皂。
如何使用WeUI
- 根組件使用class="page"
<view class="page">
</view>
- 頁(yè)面骨架組件使用class="page__xxx"(注意是兩個(gè)下劃線)
<view class="page">
<!--頁(yè)頭-->
<view class="page__hd"></view>
<!--主體-->
<view class="page__bd"></view>
<!--沒(méi)有頁(yè)腳-->
</view>
- 其他組件都已weui-開(kāi)頭后接組件名稱，例如class="weui-footer"
<view class="weui-footer">我是頁(yè)腳</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>
組件和子組件使用兩個(gè)下劃線銜接，所以要區(qū)分什么時(shí)候用"-",什么時(shí)候用"__"
下圖是結(jié)合weui.wxss做的社區(qū)專欄小程序版折欠，正在完善ing
