WeUI是一套小程序的UI框架，所謂UI框架就是一套界面設計方案。有了組件，我們可以用它來拼接出一個內容豐富的小程序，而有了一個UI框架，就能讓我們的小程序變得更加美觀。

體驗WeUI小程序

WeUI 是微信官方設計團隊設計的一套同微信原生視覺體驗一致的基礎樣式庫。在手機微信里搜索WeUI小程序或者掃描WeUI小程序碼即可在手機里體驗。

我們還可以下載WeUI小程序的源碼在開發(fā)者工具里查看它具體是怎么做的。

源碼下載：WeUI小程序源碼

下載解壓壓縮包之后可以看到weui-wxss-master文件夾，點擊開發(fā)者工具工具欄里的項目菜單選擇導入項目，之后就可以在開發(fā)者工具查看到WeUI的源代碼了.

• 項目名稱，可以自己命名，比如“體驗WeUI”；

• 目錄，選擇weui-wxss-master下dist文件夾；

• 下拉選擇appid

小任務：為什么是weui-wxss-master下的dist文件夾，而不是weui-wxss-master？你還記得什么是小程序的根目錄嗎？

結合WeUI在開發(fā)者工具模擬器的實際體驗以及WeUI的源代碼，找到WeUI基礎組件里的article、flex、grid、panel，表單組件里的button、list與之對應的pages文件夾下的頁面文件，并查看該頁面文件的wxml、wxss代碼，了解它們是如何寫的。

小任務：點擊開發(fā)者工具欄里的預覽，用手機微信掃描二維碼體驗，看看與官方的WeUI小程序有什么不同。

WeUI的界面雖然非常簡單，但是背后卻包含著非常多的設計理念，這一點我們可以閱讀小程序設計指南，來加深對UI設計的理解。

WeUI的使用

前面我們已經下載了WeUI的源代碼，其實WeUI的核心文件是weui.wxss。那我們如何在我們的模板小程序里使用WeUI的樣式呢？

首先我們在模板小程序的根目錄（注意是在第一節(jié)建好的模板小程序里）下新建一個style的文件夾，然后把weui小程序dist/style目錄下的weui.wxss文件粘貼到style的文件夾里。

├── pages


├── image


├── style


│   ├── weui.wxss


├── app.js


├── app.json


├── app.wxss

使用開發(fā)者工具打開模板小程序的app.wxss文件的第二行添加以下代碼：

@import 'style/weui.wxss';

這樣weui的css樣式就被引入到我們的小程序中啦，那我們該如何使用WeUI已經寫好的樣式呢？

Flex布局

前面我們已經了解了如何給wxml文件添加文字、鏈接、圖片等元素和組件，我們希望給這些元素和組件的排版更加結構化，不再是單純的上下關系，還有左右關系，以及左右上下嵌套的關系，這個時候就需要了解布局方面的知識啦。

布局也是一種樣式，也屬于css方面的知識哦，所以大家應該知道該在哪里給組件添加布局樣式啦~沒錯，就是在wxss文件里~

小程序的布局采用的是Flex布局。Flex是Flexible Box的縮寫，意為”彈性布局”，用來為盒狀模型提供最大的靈活性。

我們可以在home.wxml輸入以下代碼：

<view class="flex-box">


  <view class='list-item'>Python</view>


  <view class='list-item'>小程序</view>


  <view class='list-item'>網站建設</view>


</view>

為了讓list-item更加明顯我們給他們添加一個邊框、背景、高度以及居中處理，比如在home.wxss文件寫入以下樣式代碼：

.list-item{


  background-color: #82c2f7;


  height: 100px;


  text-align: center;


  border:1px solid #bdd2f8;


}

讓組件變成左右關系

我們可有看到這三個項目是上下關系，但要改成左右關系，那該怎么弄呢？我們可以在home.wxss文件寫入以下樣式：

.flex-box{


  display: flex;


}

我們給外層（也可以叫做父級）的view組件添加display:flex之后，這三個項目就成了左右結構的布局啦~

讓組件的寬度均分

我們希望這三個list-item的view組件三等分該如何處理呢？我們只需要給list-item添加一個flex:1的樣式，

.list-item{


  flex:1;


}

那怎么弄二等分、四等分、五等分呢，只需要相應增減list-item即可，有多少個list-item就有多少等分，比如四等分。

<view class="flex-box">


  <view class='list-item'>Python</view>


  <view class='list-item'>小程序</view>


  <view class='list-item'>網站建設</view>


  <view class='list-item'>HTML5</view>


</view>

flex是彈性布局，flex:1這個樣式是一個相對概念，這里的相對是指這每個list-item的寬度之比都為1。

讓組件內的內容垂直居中

我們看到list-item組件里的文字都不是垂直居中的，我們希望文字垂直居中該如何處理呢？我們需要給list-item的組件添加以下樣式。

.list-item{


  display: flex;


  align-items:center;/*垂直居中*/


  justify-content: center;/*水平居中*/


  }

為什么會給list-item加了一個display:flex的樣式呢？和前面一樣display:flex是要給父級標簽添加的樣式，要讓list-item里面的內容實現flex布局，就需要給list-item添加display:flex樣式啦。

當然flex還可以表示更加復雜的布局結構，比如左中右，左1/4，中1/2，右1/4等等，由于小程序以及手機UI設計不會弄那么復雜，所以這里就不做更多介紹啦。

全局樣式與局部樣式

全局樣式與局部樣式的概念大家需要了解一下，在app.wxss技術文檔里是這樣描述的：

定義在 app.wxss 中的樣式為全局樣式，作用于每一個頁面。在 page 的 wxss 文件中定義的樣式為局部樣式，只作用在對應的頁面，并會覆蓋 app.wxss 中相同的選擇器。

也就是說我們在app.wxss引入了weui.wxss，我們新建的所有的二級頁面，都會自動擁有weui的樣式~

Flex樣式參考

在WeUI小程序里我們發(fā)現在基礎組件里也有Flex，它的目的就是把內容給幾等分。我們可以在模擬器里看到有一等分（100%），二等分、三等分、四等分。它實現的原理和我們上面講的一樣。

大家可以找到WeUI文件結構下example文件夾里的flex頁面，我們可以閱讀一下flex.wxml的代碼。比如我們找到二等分的代碼：

<view class="weui-flex">


    <view class="weui-flex__item"><view class="placeholder">weui</view></view>


    <view class="weui-flex__item"><view class="placeholder">weui</view></view>


</view>

我們可以直接把這段代碼復制粘貼到home.wxml里，我們發(fā)現即使我們沒有給weui-flex和weui-flex__item添加樣式，但是它們自動就有了flex布局，這是因為我們之前把weui.wxss引入到了app.wxss文件里，關于flex布局weui.wxss都已經給我們寫好啦，是不是省了我們很多的麻煩？

也就是說，WeUI框架的引入是因為它把很多css樣式寫好啦，省去了我們的一些麻煩，我們要使用它就是需要把我們的組件的選擇器如class、id和WeUI框架的保持一致即可。

使用WeUI美化文章排版

前面我們在寫home.wxml文章內容的時候，不同的標題要設置不同的大小、間距，文章正文也要設置內外邊距，圖片也要設置模式，當然這些樣式我們都可以自己寫，但是看起來會不那么美觀，由于是小程序，如果文章的外觀和微信的設計風格一致，看起來就會舒服很多。

WeUI的設計風格符合小程序設計指南，所以它的一些樣式標準值得我們參考。

設計規(guī)范：微信小程序設計指南

哦，原來WeUI框架不僅可以讓我們少寫一些CSS樣式，引入它還可以使我們的小程序設計符合規(guī)范。我們覺得它不好看，可以不引入它自己寫css嗎？當然可以啦，WeUI框架只是一個方便我們的輔助工具而已，所使用的也都是我們之前掌握到的CSS的知識，在大家CSS熟練之后，我們也可以拋開它自由發(fā)揮。

那我們如何使用WeUI框架美化文章呢？我們可以先體驗WeUI小程序基礎組件下的article，然后打開WeUI小程序文件結構下的example的article頁面下的article.wxml，copy參考它的代碼，改成以下的代碼

<view class="page__bd">


    <view class="weui-article">


        <view class="weui-article__h1">HackWork技術工坊</view>


        <view class="weui-article__section">


            <view class="weui-article__p">HackWork技術工坊是技術普及的活動，致力于以有趣的形式讓參與者學到有用的技術。任務式實戰(zhàn)、系統(tǒng)指導以及社區(qū)學習能有效提高技術小白學習技術的效率以及熱情。


            </view>


            <view class="weui-article__section">


                <view class="weui-article__h3">任務式實戰(zhàn)</view>


                <view class="weui-article__p">


                        每節(jié)都會有非常明確的學習任務，會引導你循序漸進地通過實戰(zhàn)來掌握各個知識點。只有動手做過的技術才屬于自己。


                </view>


                <view class="weui-article__p">


                    <image class="weui-article__img" src="https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/img1.jpg" rel="external nofollow"  mode="aspectFit" style="height: 180px" />


                </view>


                <view class="weui-article__h3">系統(tǒng)指導</view>


                <view class="weui-article__p">


                        針對所有學習問題我們都會耐心解答，我們會提供詳細的學習文檔，對大家的學習進行系統(tǒng)指導。


                </view>


                <view class="weui-article__p">


                    <image class="weui-article__img" src="https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/img2.jpg" rel="external nofollow"  mode="aspectFit" style="height: 180px" />


                </view>


                <view class="weui-article__h3">社區(qū)學習</view>


                <view class="weui-article__p">


                        參與活動即加入了我們的技術社區(qū)，我們會長期提供教學指導，不必擔心學不會，也不用擔心沒有一起學習的伙伴。


                </view>


            </view>


        </view>


    </view>


</view>

WeUI框架的核心與延伸

使用WeUI框架的核心在于使用它寫好了樣式的選擇器，結構與形式不完全受限制。比如上面的class為weui-article的view組件的樣式在我們之前引入的weui.wxss就寫好了，樣式為

.weui-article{


  padding:20px 15px;


  font-size:15px


}

所以我們只需要給view組件添加weui-article的class，view組件就有了這個寫好了的樣式啦。weui-articleh3，weui-articlep也是如此。

如果想給weui-article__h3這個小標題換一個顏色，該怎么處理呢？通常我們不推薦直接修改weui.wxss（除非你希望所有的小標題顏色都替換掉）。我們可以給要替換顏色的view組件再增加一個class選擇器，再來添加樣式即可。比如把社區(qū)學習這里的代碼改成：

<view class="weui-article__h3 hw__h3">社區(qū)學習</view>

然后在 home.wxss 文件里添加

.hw__h3{


  color:#1772cb;


}

一個view組件可以有多個class，這樣就非常方便我們定向給某個組件添加一個特定的樣式啦。

模板樣式的更改

可能上面新聞列表的樣式很多人不喜歡，想換一個其他的排版樣式，數據分離有個好處就是我們可以不用修改數據本身，而直接修改wxml里的排版即可。修改排版樣式的核心在wxss，也就是修改css樣式。

我們想讓圖文結構是上下結構，我們可以刪掉weui框架所特有的一些選擇器，也就是刪掉一些class，比如weui-media-box__hd_in-appmsg，weui-media-box__thumb等等，然后添加一些選擇器，也就是加入一些自己命令的id和class。

<view class="page__bd" id="news-list">


    <view class="weui-panel__bd">


        <navigator url="" class="news-item" hover-class="weui-cell_active">


            <view class="news-img">


                <image mode="widthFix" class="" src="http://7n.w3cschool.cn/attachments/knowledge/202006/77455.png" />


            </view>


            <view class="news-desc">


                <view class="weui-media-box__title">小程序可以在 PC 端微信打開了</view>


                <view class="weui-media-box__desc">微信開始測試「PC 端支持打開小程序」的新能力，用戶終于不用在電腦上收到小程序時望手機興嘆。</view>


                <view class="weui-media-box__info">


                    <view class="weui-media-box__info__meta">深圳</view>


                    <view class="weui-media-box__info__meta weui-media-box__info__meta_extra">8月9日</view>


                </view>


            </view>


        </navigator>


    </view> 


</view>

然后我們在home.wxss里添加我們想要添加的css樣式。

#news-list .news-item{


  margin: 15rpx;


  padding: 15rpx;


  border-bottom: 1rpx solid #ccc


  }


#news-list .news-img image{


  width: 100%;


  }


#news-list .news-desc{


  width: 100%;


  }

pc網頁、移動端網頁等也會有非常豐富的UI框架，它們和小程序的WeUI框架的核心與原理都是一樣。由于它們可以大大提升我們寫頁面的開發(fā)速度，所以應用得非常普遍