今天检查了一下网页版微信APP代码，发现他们写法真有一套。我特意找找这群大咖写代码的框架，真被找到了。
为了提高小程序的用户体验，腾讯推出了WEUI（WeChat UI）——一个专为微信小程序设计的UI框架。本文将详细介绍WEUI的特点以及如何使用BEM（Block Element Modifier）国际命名规范来构建一个标准的小程序页面，并通过一个具体的示例来展示这一过程。
WEUI
WEUI是一个基于Flex布局的轻量级前端框架，它提供了一系列优化过的UI组件，旨在帮助开发者快速构建美观且符合微信视觉风格的小程序界面。这些组件包括但不限于按钮、列表、对话框等，它们不仅样式统一，而且在不同设备上都能保持良好的适配性和交互性。
BEM命名规范
BEM是一种流行的CSS命名方法论，分别代表“块”、“元素”和“修饰符”。这种命名规则使得代码更加清晰易懂，同时也方便了团队成员之间的协作。具体来说：
- Block（块级）：独立的功能模块，如
.weui-cells。 - Element（元素）：属于某个块的一部分，如
.weui-cell。 - Modifier（修饰符）：用于改变块或元素的外观、状态或行为，如
.weui-cell_access。
通过使用BEM命名规范，我们可以轻松地识别出HTML结构中的各个部分及其相互关系，这对于维护大型项目尤其重要。
页面结构设计
在实际开发中，合理规划页面结构对于提升用户体验至关重要。通常情况下，一个小程序页面可以按照以下模式进行布局：
<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分别表示页面的头部、主体和底部三个主要部分。这样的结构不仅有助于保持页面布局的一致性，也便于后续的样式调整和技术升级。
