云開(kāi)發(fā) WeUI框架

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

體驗(yàn)WeUI小程序

WeUI 是微信官方設(shè)計(jì)團(tuán)隊(duì)設(shè)計(jì)的一套同微信原生視覺(jué)體驗(yàn)一致的基礎(chǔ)樣式庫(kù)。在手機(jī)微信里搜索WeUI小程序或者掃描WeUI小程序碼即可在手機(jī)里體驗(yàn)。

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

源碼下載：WeUI小程序源碼

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

• 項(xiàng)目名稱，可以自己命名，比如“體驗(yàn)WeUI”；

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

• 下拉選擇appid

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

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

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

WeUI的界面雖然非常簡(jiǎn)單，但是背后卻包含著非常多的設(shè)計(jì)理念，這一點(diǎn)我們可以閱讀小程序設(shè)計(jì)指南，來(lái)加深對(duì)UI設(shè)計(jì)的理解。

WeUI的使用

前面我們已經(jīng)下載了WeUI的源代碼，其實(shí)WeUI的核心文件是weui.wxss。那我們?nèi)绾?strong>在我們的模板小程序里使用WeUI的樣式呢？

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

├── pages


├── image


├── style


│   ├── weui.wxss


├── app.js


├── app.json


├── app.wxss

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

@import 'style/weui.wxss';

這樣weui的css樣式就被引入到我們的小程序中啦，那我們?cè)撊绾问褂肳eUI已經(jīng)寫好的樣式呢？

Flex布局

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

布局也是一種樣式，也屬于css方面的知識(shí)哦，所以大家應(yīng)該知道該在哪里給組件添加布局樣式啦~沒(méi)錯(cuò)，就是在wxss文件里~

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

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

<view class="flex-box">


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


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


  <view class='list-item'>網(wǎng)站建設(shè)</view>


</view>

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

.list-item{


  background-color: #82c2f7;


  height: 100px;


  text-align: center;


  border:1px solid #bdd2f8;


}

讓組件變成左右關(guān)系

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

.flex-box{


  display: flex;


}

我們給外層（也可以叫做父級(jí)）的view組件添加display:flex之后，這三個(gè)項(xiàng)目就成了左右結(jié)構(gòu)的布局啦~

讓組件的寬度均分

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

.list-item{


  flex:1;


}

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

<view class="flex-box">


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


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


  <view class='list-item'>網(wǎng)站建設(shè)</view>


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


</view>

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

讓組件內(nèi)的內(nèi)容垂直居中

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

.list-item{


  display: flex;


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


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


  }

為什么會(huì)給list-item加了一個(gè)display:flex的樣式呢？和前面一樣display:flex是要給父級(jí)標(biāo)簽添加的樣式，要讓list-item里面的內(nèi)容實(shí)現(xiàn)flex布局，就需要給list-item添加display:flex樣式啦。

當(dāng)然flex還可以表示更加復(fù)雜的布局結(jié)構(gòu)，比如左中右，左1/4，中1/2，右1/4等等，由于小程序以及手機(jī)UI設(shè)計(jì)不會(huì)弄那么復(fù)雜，所以這里就不做更多介紹啦。

全局樣式與局部樣式

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

定義在 app.wxss 中的樣式為全局樣式，作用于每一個(gè)頁(yè)面。在 page 的 wxss 文件中定義的樣式為局部樣式，只作用在對(duì)應(yīng)的頁(yè)面，并會(huì)覆蓋 app.wxss 中相同的選擇器。

也就是說(shuō)我們?cè)赼pp.wxss引入了weui.wxss，我們新建的所有的二級(jí)頁(yè)面，都會(huì)自動(dòng)擁有weui的樣式~

Flex樣式參考

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

大家可以找到WeUI文件結(jié)構(gòu)下example文件夾里的flex頁(yè)面，我們可以閱讀一下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>

我們可以直接把這段代碼復(fù)制粘貼到home.wxml里，我們發(fā)現(xiàn)即使我們沒(méi)有給weui-flex和weui-flex__item添加樣式，但是它們自動(dòng)就有了flex布局，這是因?yàn)槲覀冎鞍褀eui.wxss引入到了app.wxss文件里，關(guān)于flex布局weui.wxss都已經(jīng)給我們寫好啦，是不是省了我們很多的麻煩？

也就是說(shuō)，WeUI框架的引入是因?yàn)樗押芏郼ss樣式寫好啦，省去了我們的一些麻煩，我們要使用它就是需要把我們的組件的選擇器如class、id和WeUI框架的保持一致即可。

使用WeUI美化文章排版

前面我們?cè)趯慼ome.wxml文章內(nèi)容的時(shí)候，不同的標(biāo)題要設(shè)置不同的大小、間距，文章正文也要設(shè)置內(nèi)外邊距，圖片也要設(shè)置模式，當(dāng)然這些樣式我們都可以自己寫，但是看起來(lái)會(huì)不那么美觀，由于是小程序，如果文章的外觀和微信的設(shè)計(jì)風(fēng)格一致，看起來(lái)就會(huì)舒服很多。

WeUI的設(shè)計(jì)風(fēng)格符合小程序設(shè)計(jì)指南，所以它的一些樣式標(biāo)準(zhǔn)值得我們參考。

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

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

那我們?nèi)绾问褂肳eUI框架美化文章呢？我們可以先體驗(yàn)WeUI小程序基礎(chǔ)組件下的article，然后打開(kāi)WeUI小程序文件結(jié)構(gòu)下的example的article頁(yè)面下的article.wxml，copy參考它的代碼，改成以下的代碼

<view class="page__bd">


    <view class="weui-article">


        <view class="weui-article__h1">HackWork技術(shù)工坊</view>


        <view class="weui-article__section">


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


            </view>


            <view class="weui-article__section">


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


                <view class="weui-article__p">


                        每節(jié)都會(huì)有非常明確的學(xué)習(xí)任務(wù)，會(huì)引導(dǎo)你循序漸進(jìn)地通過(guò)實(shí)戰(zhàn)來(lái)掌握各個(gè)知識(shí)點(diǎn)。只有動(dòng)手做過(guò)的技術(shù)才屬于自己。


                </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)指導(dǎo)</view>


                <view class="weui-article__p">


                        針對(duì)所有學(xué)習(xí)問(wèn)題我們都會(huì)耐心解答，我們會(huì)提供詳細(xì)的學(xué)習(xí)文檔，對(duì)大家的學(xué)習(xí)進(jìn)行系統(tǒng)指導(dǎo)。


                </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ū)學(xué)習(xí)</view>


                <view class="weui-article__p">


                        參與活動(dòng)即加入了我們的技術(shù)社區(qū)，我們會(huì)長(zhǎng)期提供教學(xué)指導(dǎo)，不必?fù)?dān)心學(xué)不會(huì)，也不用擔(dān)心沒(méi)有一起學(xué)習(xí)的伙伴。


                </view>


            </view>


        </view>


    </view>


</view>

WeUI框架的核心與延伸

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

.weui-article{


  padding:20px 15px;


  font-size:15px


}

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

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

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

然后在 home.wxss 文件里添加

.hw__h3{


  color:#1772cb;


}

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

模板樣式的更改

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

我們想讓圖文結(jié)構(gòu)是上下結(jié)構(gòu)，我們可以刪掉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 端微信打開(kāi)了</view>


                <view class="weui-media-box__desc">微信開(kāi)始測(cè)試「PC 端支持打開(kāi)小程序」的新能力，用戶終于不用在電腦上收到小程序時(shí)望手機(jī)興嘆。</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>

然后我們?cè)趆ome.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網(wǎng)頁(yè)、移動(dòng)端網(wǎng)頁(yè)等也會(huì)有非常豐富的UI框架，它們和小程序的WeUI框架的核心與原理都是一樣。由于它們可以大大提升我們寫頁(yè)面的開(kāi)發(fā)速度，所以應(yīng)用得非常普遍