🎨 让你的前端页面焕然一新！WeUI + BEM 快速入门指南 🎨本文介绍了 WeUI 和 BEM 命名规范，帮助开

前言

前端框架：通过提供标准化的组件、工具和最佳实践，加速开发过程并确保高质量的用户体验。

此次我们先引入一个新的开发方法，再学习一下腾讯的 weui 框架与 BEM 国际命名规范。

前端开发方法：

在日常前端开发时，我们一般都会使用一种常用的前端开发方法即 先写html结构，再写样式 ，而我们此处演示 weui 使用的一种标准的页面布局，来帮助大家美化自己的开发页面结构。

总结构：

页面的基本结构通常使用一个名为 page 的容器来组织，即 page 盒子。

分为头部（page__hd）身体（page__bd）底部（page__ft）这三个部分，使用 emmet 快速编写结构：.page>.page__hd+.page__bd+.page__ft。

<div class="page"> 
 <div class="page__hd">头部区域</div> 
 <div class="page__bd">主体区域</div> 
 <div class="page__ft">底部区域</div> 
</div>

上下结构：

页面头部区域（page_hd）包含标题（title） + 描述（desc）。这两个元素可以组合在一起，形成一个清晰的标题和副标题结构。

<div class="page__hd"> 
  <h1 class="page__title">标题</h1> 
  <p class="page__desc">描述</p> 
</div>

页面的主体区域（page__bd）或底部区域（page__ft），可以放置许多交互元素，此除使用按钮（button）演示。

<div class="page__bd">
  <button class="weui-btn">按钮</button>
</div>

下面展示一个完整的页面结构示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WEUI-列表页面</title>
</head>
<body>
    <div class="page">
        <div class="page__hd">
            <h1 class="page__title">List</h1>
            <p class="page__desc">列表页面</p>
        </div>
        <div class="page_bd">
            <!-- 全新的功能 复用 BEM 的概念-->
            <div class="weui-cells__title">带说明的列表项</div>
            <div class="weui-cells">
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <p>标题名字</p>
                    </div>
                    <div class="weui-cell__ft">
                        说明文字
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

weui 框架入门指南

weui 是什么？

WEUI（WeChat UI）是微信官方推出的一套前端用户界面库，旨在帮助开发者快速构建具有微信风格的移动Web应用。它提供了一系列符合微信设计规范的组件和样式，使开发者能够轻松创建一致且美观的用户界面。WEUI 支持多种常见的UI元素，如按钮、表单、导航栏等，并且遵循BEM命名规范，确保代码的可读性和可维护性。通过使用WEUI，开发者可以专注于业务逻辑的实现，而不必从零开始设计和实现界面细节。

调用 weui

1. 安装 weui ：

你可以通过 npm 或直接引入 CDN 链接来安装和使用 WeUI。

使用 npm 安装

如果你已经在项目中使用了 npm，可以通过以下命令安装 WeUI：

npm install weui --save

然后在你的 JavaScript 文件中引入：

import 'weui';

同时，也需要引入对应的 CSS 文件：

import 'weui/dist/style/weui.min.css';

直接引入 CDN

你也可以直接在 HTML 文件中引入 WeUI 的 CDN 链接：

<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/3.5.4/weui.min.css">

2. 基本结构示例：

<!DOCTYPE html>
<html lang="zh-CN"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
    <title>WeUI 示例</title> 
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/3.5.4/weui.min.css"> </head> 
<body ontouchstart=""> 
    <!-- 页面内容 --> 
</body> 
</html>

3.常用组件示例：

可以通过访问WeUI的官方页面

再右键选择检查，查看底层代码

BEM 的基本概念

BEM 国际命名规范：

简单，可复用的根据页面结构和功能区块来命名类名的国际规范。

BEM 核心分为几个部分：

Block（块）：页面由 Block（独立的功能组件）构成，其可以在页面的不同位置重复使用。
- 命名规则：使用小写字母和短横线连接单词，例如 weui-cell、page-header。
- 示例：

<div class="weui-cells">单元格</div>

Element（元素）：Block 内部的元素，不能脱离 Block 。
- 命名规则：在Block名称后面加上两个下划线 __，然后是Element的名称，例如 weui-cell__title。
- 示例：

<div class="weui-cell">
  <div class="weui-cell__title">标题</div>
  <div class="weui-cell__value">值</div>
</div>

Modifier（修饰符）：用于Block 或 Element 的状态或外观的变化。
- 命名规则：在Block或Element名称后面加上一个连字符 -，然后是Modifier的名称，例如 weui-btn--primary。
- 示例：

<button class="weui-btn weui-btn--primary">主要按钮</button>
<button class="weui-btn weui-btn--default">默认按钮</button>

CSS源码化的优势

CSS（层叠样式表）源码化，通常指的是将CSS代码以一种结构化、模块化的方式组织，以便于开发、维护和扩展。

优势如下：

提高可维护性：通过将样式规则组织成小的、可重用的部分，可以更容易地管理和更新样式。当需要修改或添加样式时，开发者可以快速定位到相关的代码段，而不需要在庞大的样式文件中寻找。
增强可读性：良好的源码化意味着清晰的注释、一致的命名约定以及合理的文件和目录结构。这些都有助于其他开发者更好地理解代码的目的和功能，从而促进团队合作。
促进代码复用：通过定义通用的类和组件，可以在不同的页面或项目之间轻松地复用这些样式。这不仅减少了重复编写相同样式的需要，还保证了网站或应用的一致性。
加速开发过程：预处理器如Sass、Less等工具支持变量、嵌套、混合等功能，这些高级特性可以简化复杂的样式编写，加快开发速度。同时，自动化构建工具可以自动编译预处理CSS为浏览器可识别的标准CSS，进一步提高了效率。

总之，CSS源码化的实践能够显著提升前端开发的质量和效率，对于大型项目尤其重要。不过，这也要求开发者遵循一定的编码规范和最佳实践，以确保上述优势得以实现。

小结：

恭喜你完成了 WeUI 和 BEM 的入门之旅！现在你已经掌握了如何使用微信官方提供的 UI 库来快速构建风格统一的移动 Web 应用，同时还学会了如何通过 BEM 命名规范让代码更加清晰和易于维护。

---欢迎各位点赞、收藏、关注，如果觉得有收获或者需要改进的地方，希望评论在下方，不定期更新