前言
在前端开发的浩瀚宇宙中，框架就像是一艘艘强大的宇宙飞船，帮助我们更高效地探索未知的领域。最近，我把探索的目光投向了微信当家框架 ——WEUI。作为一名前端小白，每一次新的学习都是一次充满惊喜的冒险，而这次对 WEUI 的研究，更是让我收获满满。今天，我就把自己的学习心得毫无保留地分享给大家，希望能陪伴和我一样的新手小伙伴们，一起在前端的星辰大海中扬帆起航⛵
什么是 WEUI 框架？🤔
WEUI 就像是一个神奇的百宝箱，它是一套基于微信原生视觉体验规范的 UI 框架。想象一下，当你打开微信，看到那些简洁、美观又实用的界面，WEUI 就是打造这些界面背后的秘密武器。它采用了 BEM 国际命名规范，这就好比是给代码制定了一套严谨的规则，让代码的结构更加清晰明了，就像给杂乱的房间进行了一次彻底的整理🧹 这样一来，无论是自己维护代码，还是和团队成员一起协作开发，都变得轻松愉快多了。
BEM 命名规范详解✨
1. Block（块）
Block 就像是一个独立的小王国，代表了一块完整的内容。它通常由项目代号加上区块的作用域或职责组成。比如说 .weui-page，这里的 “weui” 就是项目代号，就像是这个小王国的独特标志；“page” 则表示这个块的作用是页面，就像给这个小王国定了一个明确的使命。再比如 .tm-page，“tm” 可能是另一个项目的代号，同样 “page” 表示页面的意思。这些块就像是一个个基础的积木，我们可以用它们来搭建出各种各样的页面。
2. Element（元素）
Element 是块中的一部分，就像是小王国里的居民。它用双下划线 “__” 来连接块和元素，让它们之间的关系一目了然。例如 .weui-page__header，它表示页面块中的头部元素，就像是页面这个小王国里的城堡大门；.weui-page__title 表示页面标题元素，就像是城堡大门上的牌匾。在同一个块中，元素的概念不会重叠，这就保证了代码的整洁和有序。就好比小王国里的居民都有各自明确的分工，不会出现职责混乱的情况。
3. Modifier（状态）
Modifier 用来表示元素的不同状态，就像是居民们在不同场景下的表现。它用单下划线 “_” 来连接元素和状态。像 .weui-btn_primary 表示主要操作按钮的状态，这种按钮通常会用比较醒目的颜色和样式来吸引用户的注意力，就像是小王国里的重要官员，有着特殊的地位和职责；.weui-btn_default 表示次要操作按钮的状态，它的样式可能会相对低调一些。通过 Modifier，我们可以轻松地控制元素在不同状态下的显示效果。
BEM 规范在团队协作中的优势🌟
在团队协作开发中，BEM 规范就像是一个精准的导航仪，让每个人都能快速找到自己需要的代码。想象一下，如果没有这样的规范，代码就会像一团乱麻，每个人都在这团乱麻中艰难地寻找自己需要的部分，不仅效率低下，还容易出错。而有了 BEM 规范，代码的结构清晰可见，团队成员可以快速定位到自己需要修改或添加的代码，大大提高了开发效率。同时，它也方便了代码的维护和扩展，就像给房子搭建了一个稳固的框架，以后想要在房子里添加新的房间或者装修，都变得轻而易举。
实践出真知：搭建一个简单的页面🎉
下面，我就通过一个详细的示例来展示如何使用 WEUI 框架搭建一个页面。这个过程就像是一场精彩的魔术表演，让我们一起揭开它的神秘面纱吧🎩
1. 创建 HTML 文件（index.html）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WEUI Button UI 设计</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<!-- Block -->
<div class="weui-page">
<!-- Element -->
<header class="weui-page__header">
<h1 class="weui-page__title">Button</h1>
<p class="weui-page__desc">按钮</p>
</header>
<main class="weui-page__body">
<div class="button-sp-area">
<a href="#" class="weui-btn weui-btn_primary">主要操作</a>
<a href="#" class="weui-btn weui-btn_default">次要操作</a>
</div>
<div class="weui-cells">
<h3 class="weui-cells__title">个人信息</h3>
<div class="weui-cell">
<div class="weui-cell__hd">
<img src="" alt="">
</div>
<div class="weui-cell__bd">
<p>标题文字</p>
</div>
<div class="weui-cell__ft">
说明文字
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__hd">
<img src="" alt="">
</div>
<div class="weui-cell__bd">
<p>标题文字</p>
</div>
<div class="weui-cell__ft">
说明文字
</div>
</div>
</div>
<div class="weui-form">
<div class="weui-form__hd"></div>
<div class="weui-form__bd"></div>
<div class="weui-form__ft"></div>
</div>
</main>
</div>
</body>
</html>
代码解析
-
文档头部：在
<head>标签中，我们设置了字符编码为 UTF - 8，确保页面可以正确显示各种字符。meta name="viewport"标签让页面在不同设备上都能有良好的显示效果。<title>标签设置了页面的标题，就像是给页面取了一个响亮的名字。<link>标签引入了外部的 CSS 文件，为页面添加样式。 -
页面主体：
<body>标签里，我们首先创建了一个weui-page块，它就像是一个大容器，包含了整个页面的内容。weui-page__header是页面的头部元素，里面有标题weui-page__title和描述weui-page__desc。weui-page__body是页面的主体部分，包含了按钮区域、个人信息展示区域和表单区域。- 按钮区域：
button-sp-area是一个自定义的类，用于包裹按钮。weui-btn是按钮的基础类，weui-btn_primary和weui-btn_default分别表示主要操作按钮和次要操作按钮的状态。 - 个人信息展示区域：
weui-cells是一个包含多个单元格的容器，weui-cells__title是单元格区域的标题。每个weui-cell表示一个单元格，包含了头部weui-cell__hd、主体weui-cell__bd和尾部weui-cell__ft。 - 表单区域：
weui-form是表单的容器，包含了头部weui-form__hd、主体weui-form__bd和尾部weui-form__ft。
- 按钮区域：
2. 创建 CSS 文件（index.css）
*{
margin: 0;
padding: 0;
}
body{
background-color:#ededed ;
height: 100%;
}
.weui-page{
padding: 18px;
}
.weui-page__header{
padding: 40px ;
}
.weui-page__title{
font-size :20px;
font-weight: bold;
margin-bottom: 10px;
}
.weui-page__desc{
font-size:12px;
color: #123;
}
代码解析
*{
margin: 0;
padding: 0;
}
- 全局样式：
*选择器表示匹配所有元素，将它们的外边距和内边距都设置为 0，这样可以避免不同浏览器默认样式的影响。
body{
background-color:#ededed ;
height: 100%;
}
- 页面主体样式：
body选择器设置了页面的背景颜色为#ededed，并将高度设置为 100%，让页面铺满整个屏幕。
.weui-page{
padding: 18px;
}
- 页面块样式：
weui-page选择器设置了内边距为 18px，让页面内容有一定的留白，看起来更加舒适。
.weui-page__header{
padding: 40px ;
}
- 页面头部样式：
weui-page__header选择器设置了内边距为 40px，让头部有足够的空间展示标题和描述。
.weui-page__title{
font-size :20px;
font-weight: bold;
margin-bottom: 10px;
}
.weui-page__desc{
font-size:12px;
color: #123;
}
- 页面标题和描述样式：
weui-page__title选择器设置了字体大小为 20px，字体加粗，并设置了底部外边距为 10px，让标题更加突出。weui-page__desc选择器设置了字体大小为 12px，颜色为#123，让描述信息更加清晰。
3. 运行效果
总结🎊
通过这次对 WEUI 框架的学习和实践，我就像是在前端的知识海洋中又发现了一座宝藏岛屿。BEM 命名规范就像是岛屿上的地图，让我在代码的世界里不再迷失方向，它让代码的结构更加清晰，便于维护和扩展。而 WEUI 框架提供的丰富组件，就像是岛屿上的各种资源，让我们可以快速搭建出具有微信原生视觉体验的页面。作为前端小白，我知道自己还有很长的路要走，但我会继续深入学习 WEUI 框架，探索更多的功能和用法。希望我的分享能对大家有所帮助，让我们一起在前端的道路上越走越远，创造出更多精彩的页面💪
