WeUI 小白入门指南教程

最新推荐文章于 2025-05-07 14:51:36 发布

wayhome在哪

最新推荐文章于 2025-05-07 14:51:36 发布

阅读量1.7k

点赞数 16

分类专栏： AI全栈文章标签：前端开源微信

本文链接：https://blog.csdn.net/Cwayhome/article/details/143931515

版权

AI全栈专栏收录该内容

16 篇文章

订阅专栏

WeUI是什么？WeUI 是由腾讯团队开发的一个轻量级前端 UI 库，它基于微信设计指南，旨在帮助开发者快速构建美观且一致的微信小程序或移动网页界面。WeUI 采用了 BEM（Block Element Modifier）国际命名规范，确保了代码的简洁性和高复用性。

WeUI 官方 Github: https://github.com/Tencent/weui

WeUI 官方示例: https://weui.io/

1. BEM 国际命名规范

BEM 是一种流行的前端开发命名约定，它通过特定的格式来组织 CSS 类名，从而使得 HTML 和 CSS 更加模块化、易于理解和维护。BEM 命名规范主要包含三个部分：

Block (块)：独立的功能单元，如 .weui-cells，可以独立存在。
Element (元素)：属于某个 Block 的部分，不能单独存在，例如 .weui-cell__bd 表示 .weui-cell 这个 Block 下的一个元素。
Modifier (修饰符)：用于改变 Block 或 Element 的外观、状态或行为，例如 .weui-cell_access 可以用来表示带有指向性的 cell。

2. 页面结构套路

WeUI 提供了一套推荐的页面结构模式，这些模式可以帮助开发者快速搭建页面的基本布局。一个典型的 WeUI 页面结构可能如下所示：

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

.page：代表整个页面的容器。
.page__hd：页面的头部区域，通常用于放置标题等信息。
.page__bd：页面的主体区域，这是内容的主要展示区。
.page__ft：页面的底部区域，可以用来放置版权信息、返回顶部按钮等。

3. WeUI 组件实例 - button

以下是一个综合示例，展示了如何使用不同的 Modifier 类来创建多种样式的按钮：

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>WeUI 按钮示例</title>
      <!-- 引入 WeUI CDN 链接 -->
      <link href="https://res.wx.qq.com/t/wx_fed/weui-source/res/2.6.11/weui.css" rel="stylesheet">
      <link rel="stylesheet" href="https://weui.io/example.css" />
    </head>
    <body>
      <div class="weui-cells">
        <div class="weui-cell">
          <button class="weui-btn">默认按钮</button>
        </div>
        <div class="weui-cell">
          <button class="weui-btn weui-btn_primary">主要按钮</button>
        </div>
        <div class="weui-cell">
          <button class="weui-btn weui-btn_warn">警告按钮</button>
        </div>
        <div class="weui-cell">
          <button class="weui-btn weui-btn_disabled">禁用按钮</button>
        </div>
        <div class="weui-cell">
          <button class="weui-btn weui-btn_mini">小型按钮</button>
        </div>
        <div class="weui-cell">
          <button class="weui-btn weui-btn_plain-default">平面按钮</button>
        </div>
        <div class="weui-cell">
          <button class="weui-btn weui-btn_plain-primary">平面主要按钮</button>
        </div>
      </div>
    </body>
    </html>

在这里插入图片描述

注意事项

类名顺序：虽然类名的顺序不会影响样式的效果，但为了代码的可读性和一致性，建议将 Modifier 类放在基础类之后。
禁用状态：对于禁用按钮，除了添加 weui-btn_disabled 类外，还可以通过 JavaScript 控制按钮的 disabled 属性，使其真正不可点击。

4. 选择器的使用

在 WeUI 的 CSS 中，经常可以看到分组选择器和后代选择器的应用，这有助于提高样式的特异性，同时保持代码的整洁。

分组选择器：允许在一个声明中定义多个选择器共享相同的样式，例如：

.weui-btn, .weui-btn:active {
background-color: #09BB07;
}

后代选择器：用于选择某个元素内部的所有指定元素，例如：

.weui-cells .weui-cell {
padding: 10px 15px;
}

以上是关于 WeUI 前端框架的一些基础知识和实践技巧。WeUI 不仅提供了一系列美观且实用的 UI 组件，还通过遵循 BEM 命名规范和良好的代码组织方式，为前端开发带来了极大的便利。