小程序云开发（九）：WeUI

WeUI是一套小程序的UI框架，所谓UI框架就是一套界面设计方案。有了组件，我们可以用它来拼接出一个内容丰富的小程序，而有了一个UI框架，就能让我们的小程序变得更加美观。

2.4.1 体验WeUI小程序

WeUI 是微信官方设计团队设计的一套同微信原生视觉体验一致的基础样式库。在手机微信里搜索WeUI小程序或者扫描WeUI小程序码即可在手机里体验。

我们还可以下载WeUI小程序的源码在开发者工具里查看它具体是怎么做的。

源码下载：WeUI小程序源码

下载解压压缩包之后可以看到weui-wxss-master文件夹，点击开发者工具工具栏里的项目菜单选择导入项目，之后就可以在开发者工具查看到WeUI的源代码了.

项目名称，可以自己命名，比如“体验WeUI”；
目录，选择weui-wxss-master下dist文件夹；
下拉选择appid

小任务： 为什么是weui-wxss-master下的dist文件夹，而不是weui-wxss-master？你还记得什么是小程序的根目录吗？

结合WeUI在开发者工具模拟器的实际体验以及WeUI的源代码，找到WeUI基础组件里的article、flex、grid、panel，表单组件里的button、list与之对应的pages文件夹下的页面文件，并查看该页面文件的wxml、wxss代码，了解它们是如何写的。

小任务： 点击开发者工具栏里的预览，用手机微信扫描二维码体验，看看与官方的WeUI小程序有什么不同。

WeUI的界面虽然非常简单，但是背后却包含着非常多的设计理念，这一点我们可以阅读小程序设计指南，来加深对UI设计的理解。

2.4.2 WeUI的使用

前面我们已经下载了WeUI的源代码，其实WeUI的核心文件是weui.wxss。那我们如何在我们的模板小程序里使用WeUI的样式呢？

首先我们在模板小程序的根目录（注意是在第一节建好的模板小程序里）下新建一个style的文件夹，然后把weui小程序dist/style目录下的weui.wxss文件粘贴到style的文件夹里。

├── pages
├── image
├── style
│   ├── weui.wxss
├── app.js
├── app.json
├── app.wxss

使用开发者工具打开模板小程序的app.wxss文件的第二行添加以下代码：

@import 'style/weui.wxss';

这样weui的css样式就被引入到我们的小程序中啦，那我们该如何使用WeUI已经写好的样式呢？

2.4.3 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;
}

1、让组件变成左右关系

我们可有看到这三个项目是上下关系，但要改成左右关系，那该怎么弄呢？我们可以在home.wxss文件写入以下样式：

.flex-box{display: flex;
}

我们给外层（也可以叫做父级）的view组件添加display:flex之后，这三个项目就成了左右结构的布局啦~

2、让组件的宽度均分

我们希望这三个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。

3、让组件内的内容垂直居中

我们看到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设计不会弄那么复杂，所以这里就不做更多介绍啦。

2.4.4 全局样式与局部样式

全局样式与局部样式的概念大家需要了解一下，在app.wxss技术文档里是这样描述的：

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

也就是说我们在app.wxss引入了weui.wxss，我们新建的所有的二级页面，都会自动拥有weui的样式~

2.4.5 Flex样式参考

在WeUI小程序里我们发现在基础组件里也有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里，我们发现即使我们没有给weui-flex和weui-flex__item添加样式，但是它们自动就有了flex布局，这是因为我们之前把weui.wxss引入到了app.wxss文件里，关于flex布局weui.wxss都已经给我们写好啦，是不是省了我们很多的麻烦？

也就是说，WeUI框架的引入是因为它把很多css样式写好啦，省去了我们的一些麻烦，我们要使用它就是需要把我们的组件的选择器如class、id和WeUI框架的保持一致即可。

2.4.6 使用WeUI美化文章排版

前面我们在写home.wxml文章内容的时候，不同的标题要设置不同的大小、间距，文章正文也要设置内外边距，图片也要设置模式，当然这些样式我们都可以自己写，但是看起来会不那么美观，由于是小程序，如果文章的外观和微信的设计风格一致，看起来就会舒服很多。

WeUI的设计风格符合小程序设计指南，所以它的一些样式标准值得我们参考。

设计规范：微信小程序设计指南

哦，原来WeUI框架不仅可以让我们少写一些CSS样式，引入它还可以使我们的小程序设计符合规范。我们觉得它不好看，可以不引入它自己写css吗？当然可以啦，WeUI框架只是一个方便我们的辅助工具而已，所使用的也都是我们之前掌握到的CSS的知识，在大家CSS熟练之后，我们也可以抛开它自由发挥。

那我们如何使用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技术工坊是技术普及的活动，致力于以有趣的形式让参与者学到有用的技术。任务式实战、系统指导以及社区学习能有效提高技术小白学习技术的效率以及热情。</view><view class="weui-article__section"><view class="weui-article__h3">任务式实战</view><view class="weui-article__p">每节都会有非常明确的学习任务，会引导你循序渐进地通过实战来掌握各个知识点。只有动手做过的技术才属于自己。</view><view class="weui-article__p"><image class="weui-article__img" src="https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/img1.jpg" mode="aspectFit" style="height: 180px" /></view><view class="weui-article__h3">系统指导</view><view class="weui-article__p">针对所有学习问题我们都会耐心解答，我们会提供详细的学习文档，对大家的学习进行系统指导。</view><view class="weui-article__p"><image class="weui-article__img" src="https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/img2.jpg" mode="aspectFit" style="height: 180px" /></view><view class="weui-article__h3">社区学习</view><view class="weui-article__p">参与活动即加入了我们的技术社区，我们会长期提供教学指导，不必担心学不会，也不用担心没有一起学习的伙伴。</view></view></view></view>
</view>

2.4.7 WeUI框架的核心与延伸

使用WeUI框架的核心在于使用它写好了样式的选择器，结构与形式不完全受限制。比如上面的class为weui-article的view组件的样式在我们之前引入的weui.wxss就写好了，样式为

.weui-article{padding:20px 15px;font-size:15px
}

所以我们只需要给view组件添加weui-article的class，view组件就有了这个写好了的样式啦。weui-article__h3，weui-article__p也是如此。

如果想给weui-article__h3这个小标题换一个颜色，该怎么处理呢？通常我们不推荐直接修改weui.wxss（除非你希望所有的小标题颜色都替换掉）。我们可以给要替换颜色的view组件再增加一个class选择器，再来添加样式即可。比如把社区学习这里的代码改成：

<view class="weui-article__h3 hw__h3">社区学习</view>

然后在home.wxss文件里添加

.hw__h3{color:#1772cb;
}

一个view组件可以有多个class，这样就非常方便我们定向给某个组件添加一个特定的样式啦。

2.4.8 模板样式的更改

可能上面新闻列表的样式很多人不喜欢，想换一个其他的排版样式，数据分离有个好处就是我们可以不用修改数据本身，而直接修改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="https://img.36krcdn.com/20190810/v2_1565404308155_img_000" /></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%;}

更多关于WeUI的使用，大家可以阅读小程序技术文档拓展能力关于WeUI组件库的说明，建议大家在学完本书前三章的内容之后再来深入学习。

pc网页、移动端网页等也会有非常丰富的UI框架，它们和小程序的WeUI框架的核心与原理都是一样。由于它们可以大大提升我们写页面的开发速度，所以应用得非常普遍。