前言
wechat已经成为了，人们生活不可或缺的一部分，我们在感慨它干净页面的同时，是否有想过它的页面是怎么制作出来的呢？
腾讯的 WEUI 是一个专为移动端设计的前端框架，它提供了一系列基础的 UI 组件和样式，旨在帮助开发者快速构建高质量的移动端网页应用。下面，我们将从结构搭建、BEM 命名规范、页面结构套路以及 CSS 源码管理等方面，对 WEUI 进行深入解析。
一、结构搭建：先写结构 page 盒子
在构建任何网页之前，首先需要考虑的是页面的整体结构。在 WEUI 中，我们通常从“page 盒子”开始，它代表了页面的一个基本容器。
-
总结构：
- 一个完整的页面通常由多个部分构成，包括头部（Header）、主体（Body）和底部（Footer）。
- 在 WEUI 中，这些部分可以通过特定的类名来标识，例如
.weui-header、.weui-body和.weui-footer。
-
上下结构：
- 页面可以简单地分为上下两部分，上半部分通常用于展示标题、描述等信息，下半部分则用于放置按钮、表单等交互元素。
- 这种结构在 WEUI 中可以通过嵌套不同的区块（Block）和元素（Element）来实现。
-
title+desc：
- 标题（title）和描述（desc）是页面头部的重要组成部分。
- 在 WEUI 中，可以使用
.weui-title和.weui-desc类名来分别标识标题和描述。
-
button 区域：
- 按钮区域通常位于页面的底部或中部，用于放置用户交互的按钮。
- WEUI 提供了多种按钮样式，如默认按钮、加载按钮、禁用按钮等，可以通过
.weui-btn类名及其子类名来应用。
二、BEM 国际命名规范
BEM（Block Element Modifier）是一种简单且可复用的命名规范，它根据页面结构和功能区块来命名类名。
-
Block：
- Block 是页面的基本构成单元，它代表了具有独立功能的区块。
- 在 WEUI 中，常见的 Block 包括
.weui-cells（用于放置多个表单项等。
-
Element：
- Element 是 Block 的组成部分，它代表了 Block 中的具体元素。
- 例如，在
.weui-cellsBlock 中，.weui-cell就是其 Element，用于表示一个具体的表单项。
-
BE 可以嵌套：
- BEM 允许 Block 和 Element 相互嵌套，从而构建出复杂的页面结构。
- 例如，一个
.weui-cellElement 可以嵌套在一个.weui-cellsBlock 中，形成一个表单项列表。
三、页面结构套路
在 WEUI 中，页面结构通常遵循一定的套路，这些套路可以帮助开发者快速构建出符合规范的页面。
-
常见套路：
-
.page>.page__hd+.page__bd+.page__ft是一种常见的页面结构套路。.page是页面的根 Block。.page__hd是页面的头部 Element，通常包含标题和描述。.page__bd是页面的主体 Element，用于放置主要内容。.page__ft是页面的底部 Element，通常包含按钮或导航链接。
-
四、CSS 源码管理
在 WEUI 的 CSS 源码中，采用了模块化和多人协作的开发方式。
-
模块化：
- WEUI 的 CSS 源码被划分为多个模块，每个模块负责特定的功能或组件。
- 这种模块化设计使得代码更加清晰、易于维护，并且方便开发者根据需要进行扩展或修改。
-
多人协作：
- WEUI 的开发团队由多名开发者组成，他们分工明确、协同工作。
End
通过深入学习和实践 WEUI，开发者可以更加高效地构建高质量的移动端网页应用。同时，掌握 BEM 命名规范和页面结构套路等技巧，也有助于提升代码的可读性和可维护性。
