概述
WEUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为 微信web开发量身设计，可以令用户的使用感知更加统一。包含button、cell 、progress、dialog、toast、actionsheet、icon等各式元素。
##weui uploader
今天我们要学习的微信上传图片的源码(比如朋友圈上传图片)
当我们看到一个图片，首先应该思考如何去做这个页面
1.我们先采用语义化标签
<header>
页面或区块的页眉，通常包含标题、导航或LOGO。<nav>
导航链接的容器（如菜单、目录）。<main>
页面主体内容，每个页面应只有一个。<article>
独立的内容块（如博客文章、新闻）。<section>
逻辑上的内容分组（需配合标题使用）。<aside>
侧边栏或与主内容间接相关的信息（如广告、引用）。<footer>
页面或区块的页脚，通常包含版权、联系方式等。
2.可以采用BEM命名规范
<div class="page">
<header class="page__hd">
<h1 class="page__title">Uploader</h1>
<p class="page__desc">
上传组件，支持图片上传，文件上传，视频上传等
</p>
</header>
<main class="page__bd">
<div class="weui-cells weui-cells_form">
<div class="weui-cell weui-cell_uploader">
<div class="weui-cell__bd">
<div class="weui-uploader">
<div class="weui-uploader__bd">
<p class="weui-uploader__title">图片上传</p>
<div class="weui-uploader__info">
<span>0</span> /
<span>2</span>
</div>
</div>
<div class="weui-uploader__bd">
<ul class="weui-uploader__files">
<li class="weui-uploader__file">
</li>
<li class="weui-uploader__file">
</li>
<li class="weui-uploader__file">
</li>
<li class="weui-uploader__file">
</li>
<li class="weui-uploader__file">
</li>
<li class="weui-uploader__file">
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
3.选择布局方式
弹性布局（Flexbox）是 CSS3 引入的一种强大的布局方式，在 Uploader 组件中，我们可以使用弹性布局来实现文件列表的排列和对齐。例如，使用 display: flex 和 justify-content 、 align-items 等属性，可以轻松实现文件列表的水平和垂直居中。
4. Stylus 变量和模块化
Stylus 是一种动态 CSS 预处理器，它支持变量、函数、模块化等功能。在 Uploader 组件中，我们可以使用 Stylus 变量来统一管理颜色、字体大小等样式属性，提高代码的可维护性。同时，通过模块化的方式组织 Stylus 代码，可以让样式文件更加清晰、易于管理。
5. 伪元素
伪元素（Pseudo-elements）可以让我们在不改变 HTML 结构的情况下，添加额外的样式。在 Uploader 组件中，伪元素可以用于实现一些特殊的效果，比如在文件上传按钮上添加图标。例如，使用 ::before 或 ::after 伪元素来插入图标字体，这样可以减少 HTML 代码的复杂度。
三、weui-uploader 编码详解
1. 严谨的结构嵌套
在 weui-uploader 的编码中， weui-uploader 外面严谨地套上了 .weui-cells 。 .weui-cells 通常用于移动端收集用户数据或操作表单表格，每个表单元素使用 .weui-cell 表示，内容部分使用 .weui-cell__bd 。这种严谨的结构嵌套能让页面在不同的设备上都能保持良好的显示效果。
2. -webkit-overflow-scrolling: touch 的使用
在移动端开发中， -webkit-overflow-scrolling: touch 这个属性非常实用。它可以让滚动更加敏感，能够更好地感知用户的触摸操作。虽然 -webkit 前缀表示这个属性还处于实验阶段，但在 Chrome 浏览器以及苹果和安卓等移动端设备上都能正常使用。
四、变量组成的 weui 主题风格
在 weui 框架中，变量起到了至关重要的作用。通过定义不同的变量，我们可以轻松地改变整个 Uploader 组件的主题风格。例如，定义 $primary-color 变量来统一管理主色调，这样在需要修改主题颜色时，只需要修改变量的值即可，非常方便。
五、Stylus 中的 & 符号
在 Stylus 中， & 符号用于引用上一层的选择器。在编写 Uploader 组件的样式时， & 符号可以让我们更方便地编写伪类和伪状态。例如：
.weui-uploader__input
&:hover
background-color: #f5f5f5
在这个例子中， & 符号引用了 .weui-uploader__input 选择器，这样就可以方便地为其添加 :hover 伪类样式。
六、Float 布局回顾
Float 布局是一种早于 Flexbox 的布局方案，虽然现在 Flexbox 和 Grid 布局更加流行，但在一些旧项目或者特定场景下，Float 布局仍然有其用武之地。
1. 原理和特点
Float 布局的原理是让元素脱离正常的文档流，向左或向右浮动。使用 float: left 或 float: right 可以实现两列式布局，如果一直使用 float: left ，则可以实现多列式布局，当一行不够时，元素会自动换行。
2. 缺点和解决方案
Float 布局的一个主要缺点是会让元素脱离文档流，导致父元素高度塌陷。为了解决这个问题，我们可以使用清除浮动的方法，比如在父元素中添加 overflow: hidden 或者使用 clearfix 类。
.clearfix::after {
content: "";
display: block;
clear: both;
}
七、总结
通过对 Uploader 相关知识的学习，我们了解到了源码学习的重要性，掌握了 Uploader 涉及的各种技能点，包括语义化标签、BEM 命名规范、弹性布局、Stylus 变量和模块化、伪元素等。同时，我们还深入分析了 weui-uploader 的编码结构，以及 Float 布局的原理和应用。这些知识不仅在大厂面试中非常重要，在实际的前端开发工作中也能发挥很大的作用。希望大家通过本文的学习，能够对 Uploader 有更深入的理解，在今后的开发中能够更加得心应手。
