微信小程序之使用weui.wxss（八）

【未經作者本人同意，請勿以任何形式轉載】
什么是WeUI?

WeUI是在遵守微信視覺設計規范下，由官方設計團隊為小程序量身定制的基礎樣式庫。

這里把WeUI放到基礎篇里，是因為WeUI是官方出品，並且在10月28號IDE更新后，IDE不能識別和引用css，同時也屏蔽了從網絡獲取樣式文件，和css划清界限。

》》》 如何引入WeUI

1. 下載WeUI
   weui.wxss
   注意是在【weui-wxss/dist/style/】目錄下，不要【weui-wxss/src】目錄里面下載
2. 將weui.wxss拷貝到小程序根目錄中
   
3. 在app.wxss或頁面wxss導入weui.wxss

/**app.wxss**/
@import 'weui.wxss';

4. 以上就成功引入了weui.wxss，weui也提供了單個組件的樣式引入，流程同上。

》》》 如何使用WeUI

1. 根組件使用class="page"

<view class="page">
</view>

2. 頁面骨架組件使用class="page__xxx"(注意是兩個下划線)

<view class="page">
	<!--頁頭-->
	<view class="page__hd"></view>
	<!--主體-->
	<view class="page__bd"></view>
	<!--沒有頁腳-->
</view>

3. 其他組件都已weui-開頭后接組件名稱，例如class="weui-footer"

<view class="weui-footer">我是頁腳</view>

4. 組件的子組件樣式，例如view.weui-footer組件還有鏈接和版權信息。

<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>

組件和子組件使用兩個下划線銜接，所以要區分什么時候用"-",什么時候用"__"

下圖是結合weui.wxss做的社區專欄小程序版，正在完善ing

你也可以關注我的微信公眾號『ITNotes』， 一起交流學習 。