WEUI是Mini程序的UI框架，所谓的UI框架是一组接口设计解决方案。借助组件，我们可以使用它来拼写一个丰富的迷你程序，并且使用UI框架，我们的迷你程序可以变得更加美丽。

2.4.1经验weui

WEUI是由微信的官方设计团队设计的基本样式库，与微信的本地视觉体验一致。在您的手机上搜索WEUI小程序或扫描WEUI 代码以在您的手机上体验它。

我们还可以下载WEUI小程序的源代码，并在开发人员工具中检查其如何完成。

源代码下载：WEUI迷你程序源代码

下载未拉紧压缩软件包后，您可以看到Weui-WXSS-文件夹。单击开发人员工具栏中的项目菜单以选择导入项目。之后，您可以在开发人员工具中查看WEUI的源代码。

小任务：为什么它是weui-wxss-下的DIST文件夹，而不是Weui-WXSS-？您还记得迷你程序的根目录是什么？

在开发人员工具模拟器和WEUI的源代码中结合WEUI的实际体验，在WEUI基本组件，FLEX，GRID和列表中以形式组件中找到页面文件，并查看页面WXML和WXSS代码的页面归档，并了解它们的书面方式。

小任务：单击开发人员工具栏中的预览，在手机上扫描QR码，以体验它，并查看与官方WEUI MINI计划的不同之处。

尽管WEUI的界面非常简单，但它包含许多设计概念。我们可以阅读《迷你计划设计指南》，以加深对UI设计的理解。

2.4.2使用weui

我们之前已经下载了WEUI的源代码，但是Weui的核心文件是weui.wxss。那么，我们如何在模板小程序中使用WEUI样式呢？

首先，我们在模板的根目录中创建一个新文件夹（请注意，它位于第一部分中构建的模板中），然后在weui dist/ 中粘贴到weui.wxss文件内部的文件夹， 。

├── 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是盒子的缩写，意思是“弹性布局”，可为类似盒子的型号提供最大的灵活性。

我们可以在home.wxml中输入以下代码：

Python 小程序 网站建设

为了使列表项目更加明显，例如，我们在Home.wxss文件中添加边框，背景，高度和中心。

.list-item{ background-color: #82c2f7; height: 100px; text-align: center; border:1px solid #bdd2f8; }

1。使组件成为左右关系

我们已经看到，这三个项目是向上和下降的关系，但是它们需要更改为左右关系。那我们应该怎么做呢？我们可以在home.wxss文件中编写以下样式：

.flex-box{ display: flex; }

在我们添加时：flex到外层（也称为父）视图组件，这三个项目成为左右结构的布局〜

2。使组件宽度均匀划分

我们希望如何将三个列表信息视图组件平均分配？我们只需要在列表项目中添加flex：1样式即可。

.list-item{ flex:1; }

那么如何制作两个相等的部分，四个相等的部分和五个相等的部分？只需相应地添加或减少列表。列表项目的同等部分，例如四个相等的部分。

Python 小程序 网站建设 HTML5

flex是一种弹性布局，flex的风格：1是一个相对概念。在这里，相对意味着每个列表项的宽度比为1。

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

我们看到，列表项组件中的文本不是垂直居中的。如果文本以垂直为中心，我们应该如何处理？我们需要将以下样式添加到列表项目组件中。

.list-item{ display: flex; align-items:center;/*垂直居中*/ justify-content: center;/*水平居中*/ }

为什么列出列表添加了A：Flex样式？如前所述：FLEX是需要添加到父标签中的样式。要使列表项目中的内容实现Flex布局，您需要将FLEX样式添加到列表信息中。

当然，Flex还可以代表更复杂的布局结构，例如左中心，左中心，左中间1/2，右1/4等。由于迷你程序和手机UI设计不会那么复杂，因此，这里不是让我们进行更多介绍。

2.4.4全球和本地风格

每个人都需要了解全球风格和本地风格的概念。它在App.wxss技术文档中进行了描述，如下所示：

app.wxss中定义的样式是全局样式，并在每页上行动。页面的WXSS文件中定义的样式是一种本地样式，仅在相应的页面上起作用，并且会在app.wxss中覆盖相同的选择器。

换句话说，我们在app.wxss中介绍了weui.wxss。所有新创建的次要页面都将自动具有WEUI样式〜

2.4.5弹性样式参考

在WEUI MINI计划中，我们发现基本组件中也有灵活，其目的是将内容分为几个相等的部分。我们可以在模拟器中看到第一，第二，第三和第四。其实施原则与我们上面说的相同。

您可以在WEUI文件结构下的文件夹中找到Flex页面。我们可以读取Flex.wxml的代码。例如，我们找到两个相等部分的代码：

weui weui

我们可以将此代码直接复制并粘贴到home.wxml。我们发现，即使我们没有在weui-flex和weui中添加样式，它们也会自动具有弹性布局。这是因为我们在app.wxss文件中介绍了weui.wxss，我们已经为我们编写了所有flex布局weui.wxss。这不是为我们节省很多麻烦吗？

换句话说，WEUI框架的引入是因为它写了许多CSS样式，这为我们节省了一些麻烦。如果要使用它，我们需要保持组件选择器（例如ID和WEUI框架一致），即可以。

2.4.6使用weui美化文章布局

以前，当我们编写Home的内容时，WXML文章应以不同的尺寸和间距设置不同的标题，本文的主要文本也应使用内部和外部边缘设置，并且图片也应使用模式设置。当然，我们可以自己编写这些样式，但是看来它会不那么美丽，因为这是一个迷你程序，如果文章的外观与微信的设计风格一致，它看起来会更加舒适。

Weui的设计风格符合《迷你程序设计指南》，因此其某些样式标准值得我们参考。

设计规格：微信迷你计划设计指南

哦，事实证明，WEUI框架不仅允许我们更少编写CSS样式，而且还介绍了它以使我们的小程序设计符合规格。我们认为这不是好看的，我们可以在不介绍的情况下自己写CSS吗？当然，WEUI框架只是一种对我们来说方便的辅助工具，它使用了我们以前掌握的CSS知识。在每个人精通CSS之后，我们也可以将其放在一边并自由播放。

那么，我们如何使用WEUI框架美化文章？我们可以首先体验weui 的基本组件，然后在weui 文件结构下打开页面上的.wxml，请参阅其复制代码，然后将其更改为以下代码：

HackWork技术工坊 HackWork技术工坊是技术普及的活动，致力于以有趣的形式让参与者学到有用的技术。任务式实战、系统指导以及社区学习能有效提高技术小白学习技术的效率以及热情。 任务式实战 每节都会有非常明确的学习任务，会引导你循序渐进地通过实战来掌握各个知识点。只有动手做过的技术才属于自己。 系统指导 针对所有学习问题我们都会耐心解答，我们会提供详细的学习文档，对大家的学习进行系统指导。 社区学习 参与活动即加入了我们的技术社区，我们会长期提供教学指导，不必担心学不会，也不用担心没有一起学习的伙伴。

2.4.7 WEUI框架的核心和扩展

使用WEUI框架的核心是使用它来编写样式选择器，并且结构和形式不完全限制。例如，上面的视图组件的样式写在以前引入的weui.wxss中，样式是

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

因此，我们只需要将WEUI添加到视图组件中，并且视图组件将具有此书面样式。 Weui，Weui也是如此。

如果您想更改此字幕Weui的颜色，您该怎么办？通常，我们不建议直接修改weui.wxss（除非您希望更换所有字幕颜色）。我们可以将另一个选择器添加到视图组件中以替换颜色，然后添加样式。例如，在此处更改社区学习的代码：

社区学习

然后将其添加到home.wxss文件中

.hw__h3{ color:#1772cb; }

视图组件可以具有多个，这对于我们为组件添加特定样式非常方便。

2.4.8更改模板样式

也许许多人不喜欢上述新闻列表的样式，而是想更改为另一种布局风格。数据分离的一个优点是，我们可以在不修改数据本身的情况下修改WXML中的布局。修改布局样式的核心是WXSS，即修改CSS样式。

我们希望图形结构是上层和下层结构。我们可以删除WEUI框架独特的一些选择器，也就是说，删除一些选择器，例如weui---，weui---等，然后添加一些选择器，也就是说，添加它们。一些ID和命令自己。

小程序可以在 PC 端微信打开了 微信开始测试「PC 端支持打开小程序」的新能力，用户终于不用在电脑上收到小程序时望手机兴叹。 深圳 8月9日

然后，我们添加要添加的CSS样式。wxss。

#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的更多信息，您可以阅读有关Mini计划技术文档功能扩展的说明。建议您在学习本书前三章的内容后深入研究。

PC网页，移动网页等也将具有非常丰富的UI框架，与Mini程序的WEUI框架的核心和原理相同。因为它们可以大大提高我们页面写作的开发速度，所以它们被广泛使用。