入手微信生态CSS开发：构建WEUI第一个组件Button

前言

此篇文章主要帮助新手快速入手CSS开发，主要帮助新手解决如何快速规范地取类名。

微信生态中CSS开发的一个重要组成部分是WEUI，它是微信官方设计团队开发的一套简洁而强大的UI库。本篇文章，我们将通过构建一个基本的Button组件，来介绍如何使用WEUI和BEM命名规范来开发微信生态的CSS。

WEUI简介

WEUI（微信UI库）是一套为微信Web服务量身设计的UI库，包含各种常用的界面元素和交互模式。通过使用WEUI，你可以确保你的页面风格和微信内置页面保持一致，提升用户体验的一致性。

Button组件

Button是Web开发中最常见的组件之一，也是WEUI中的一个基本组件。我们将通过以下步骤来创建一个Button组件。

组件和标签

页面的基本构成单元是标签，复杂的页面往往由多个组件组成。通过合理使用HTML标签和CSS，可以构建出语义化和结构清晰的页面。

BEM命名规范

BEM（Block Element Modifier）是一种命名规范，旨在帮助开发者编写结构清晰、可复用和易于维护的代码。BEM分为以下三个部分：

Block：独立的功能块，例如页面的主要部分。
Element ：块中的组成部分，通过双下划线连接，有标题、描述等，例如 __title __desc __hd __bd等等。
Modifier ：用于描述块或元素的状态或外观变化，通过单下划线连接，例如_primary、_default。

使用BEM命名规范可以避免类名冲突，并使代码更具可读性和可维护性。

HTML语义化标签

HTML语义化标签可以使页面结构更清晰，提升可访问性和SEO效果。例如，<p>标签用于段落，而<div>标签则用于定义一个块级元素。

实例演示：创建一个Button组件

下面我们将通过一个简单的示例来展示如何使用WEUI和BEM命名规范创建一个Button组件。

HTML部分

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微信WEUI源码分析</title>
    <style>
        /* CSS 样式 */
    </style>
</head>
<body>
    <div class="page">
        <div class="page__hd">
            <div class="page__title">
                Button
            </div>
            <p class="page__desc">
                按钮
            </p>
        </div>
        <div class="page__bd">
            <div class="button-sp-area">
                <a href="#" class="weui-btn weui-btn_primary">主要操作</a>
                <a href="#" class="weui-btn weui-btn_default">次要操作</a>
                <a href="#" class="weui-btn weui-btn_warn">警告</a>
            </div>
        </div>
    </div>
</body>
</html>

CSS部分

全局样式重置

css 复制代码

* {
    margin: 0;
    padding: 0;
    outline: 0;
}

重置所有HTML元素的默认样式，确保不同浏览器下的样式一致。

css 复制代码

body, html {
    height: 100%;
    -webkit-tap-highlight-color: transparent;
}

设置body和html的高度为100%，设置移除点击时的高亮效果，提升移动端体验。

css 复制代码

body {
    font-family: system-ui,-apple-system, sans-serif;
}

使用系统默认字体，优化苹果用户体验。

页面布局样式

css 复制代码

.page, body {
    background-color: #ededed;
}

设置页面和body的背景颜色为浅灰色。

css 复制代码

.page {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   overflow-scrolling: touch;
}

设置.page为绝对定位，覆盖整个视口，启用滚动条，并优化滚动效果。

页面头部样式

css 复制代码

.page__hd {
    padding: 40px;
}
.page__title {
    text-align: left;
    font-size: 20px;
    margin-bottom: 15px;
    font-weight: 400;
}
.page__desc {
    margin-top: 4px;
    text-align: left;
    font-size: 14px;
    color:rgba(0,0,0,0.55);
}

设置页面头部的内边距、标题和描述的样式，包括文本对齐、字体大小、颜色等。

按钮区域样式

css 复制代码

.button-sp-area {
    margin: 15px auto;
    padding: 15px;
    text-align: center;
}

设置按钮区域的外边距、内边距和文本对齐方式，使按钮居中显示。

按钮样式

css 复制代码

.weui-btn {
    display: block;
    width: 184px;
    margin: 0 auto;
    padding: 12px 24px;
    font-weight: 500;
    font-size: 17px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    line-height: 1.4118;
    border-radius: 8px;
    -webkit-user-select:none;
    user-select:none;
}

设置按钮的基本样式，包括尺寸、字体、文本对齐、背景颜色、圆角和防止用户选择文本。

按钮状态样式

css 复制代码

.weui-btn_primary {
    background-color: #07c160;
}
.weui-btn_default {
    color: rgba(0,0,0,0.9);
    background-color: rgba(0,0,0,0.5);
}
.weui-btn_warn {
    background-color: #fa5151;
}

设置不同状态按钮的背景颜色和文本颜色：
- .weui-btn_primary：主要操作按钮，绿色背景。
- .weui-btn_default：次要操作按钮，半透明黑色背景。
- .weui-btn_warn：警告按钮，红色背景。

按钮间距样式

css 复制代码

.weui-btn+.weui-btn {
    margin-top: 16px;
}

使用兄弟选择器为相邻按钮之间添加16px的上外边距，确保按钮之间有合适的间距。（除了首个类选择器不会被赋予样式，后续选择器都会被赋予）

效果展示

总结

通过本文，我们学习了如何使用WEUI和BEM命名规范来开发微信生态的CSS组件。我们从创建一个简单的Button组件入手，介绍了组件的基本结构 、BEM命名规范的应用 以及HTML语义化标签的使用。希望这些内容能帮助你更好地理解和应用微信生态的CSS开发，提高你的开发效率和代码质量。