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 命名规范和良好的代码组织方式，为前端开发带来了极大的便利。
标签：教程,入门,BEM,WeUI,weui,按钮,选择器,页面 From： https://blog.csdn.net/Cwayhome/article/details/143931515