專案引用

你在使用小程式從零開始開發的時候，一定會想小程式有沒有一個UI庫，類似於前端中的Bootstrap，MD，Semantic UI這樣的框架UI庫，如果有的話，一定是一個完美的事情。上帝總是寵著我們，這樣的好事情真的有，我的答案是weui.wxss。

WeUI概述

WeUI 是一套同微信原生視覺體驗一致的基礎樣式庫，由微信官方設計團隊為微信內網頁和微信小程式量身設計，令使用者的使用感知更加統一。包含buttoncell、dialog、progress、toastarticle、actionsheet、icon等各式元素。

weui.wxss的引入

在app.wxss內或者需要的頁面引入weui.wxss。

/**app.wxss**/ 

@import  'weui.wxss';

根元件使用class="page“

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

頁頭和主體使用class=“page__xx”(注意是兩個下劃線)

<view class="page">

<view class="page__hd"></view>  <!--頁頭-->

<!--主體-->

<view class="page__bd"></view>

</view>
 

其他元件採用weui-xx，例如class = “weui-flex”。

<view id="{{item.id}}" class="weui-flex" >

元件的子元件樣式，

例如weui-flex還有weui-flex__item資訊。

注意：子元件樣式後面使用的兩個下劃線，"__"。

歡迎大家學習我的視訊教程：微信小程式-WeUI介面佈局設計入門到精通