WEUI Uploader 源码解析

绅士玖
108 阅读3分钟

引言

在移动端开发中，文件上传是一个常见但实现起来并不简单的功能。WEUI 作为微信官方设计团队推出的前端框架，其上传组件 weui-uploader 的实现非常值得学习。本文将深入分析 weui-uploader 的源码实现，探讨其设计思想和关键技术点。

整体结构分析

从 HTML 结构可以看出，weui-uploader 采用了非常严谨的嵌套结构：

<div class="weui-cells weui-cells_form">
    <div class="weui-cell weui-cell_uploader">
        <div class="weui-cell__bd">
            <div class="weui-uploader">
                <!-- 上传组件内容 -->
            </div>
        </div>
    </div>
</div>

这种结构体现了几个重要设计思想：

  1. BEM 命名规范：使用了 Block__Element--Modifier 的命名方式，如 .weui-cell__bd 表示这是 weui-cell 块中的 bd 元素(详情可以参考为什么大厂前端都爱BEM？从WEUI代码中学习高可维护CSS的终极答案引言的文章)。
  2. 语义化嵌套：上传组件被合理地嵌套在 cells 和 cell 中，符合移动端表单元素的组织方式。
  3. 模块化设计：每个部分职责明确，便于维护和扩展。

样式实现分析

我用的都是大厂比较常用的一种写CSS的方式stylus，如果有不太懂的小伙伴可以去瞅瞅🎨 CSS 写到手抽筋？Stylus 说：‘让我来！’文章

让我们先来看看最后的样式效果吧🚀🚀

image.png

1. 基础样式设置

在下面代码中，首先定义了一组颜色变量：

$weui-bg-0 = #ededed
$weui-bg-2 = #fff
$weui-fg-1 = rgba(0,0,0,0.55)
$weui-fg-2 = rgba(0,0,0,0.3)
$weui-fg-3 = rgba(0,0,0,0.1)

这种变量定义方式使得主题风格的维护变得非常简单，只需修改变量值即可全局生效。

2. 页面布局

.page 类实现了全屏布局：

.page
  position absolute
  top 0
  right 0
  left 0
  bottom 0
  background-color $weui-bg-0
  overflow scroll
  -webkit-overflow-scrolling touch

关键点：

  • position: absolute 配合四个方向的 0 值实现全屏覆盖
  • -webkit-overflow-scrolling: touch 启用 iOS 的平滑滚动，使滚动更敏感，提升移动端体验

3. 上传区域样式

上传区域的核心样式：

.weui-uploader
  .weui-uploader__hd
    display flex
    padding-bottom 12px
    align-items center
    .weui-uploader__title
      flex 1
    .weui-uploader__info
      color $weui-fg-2
  .weui-uploader__bd
    margin-bottom -8px
    margin-right -8px
    overflow hidden

特点：

  • 使用 Flex 布局实现标题和上传信息的水平排列
  • 负边距技巧抵消子元素的外边距，实现紧凑布局
  • overflow: hidden 创建新的 BFC，避免外边距合并问题

4. 上传文件项布局

上传文件项采用了传统的 float 布局：

.weui-uploader__files
  list-style none
  .weui-uploader__file
    float left
    margin-right 8px
    margin-bottom 8px
    width 96px
    height 96px
    background url(https://weui.io/images/pic_160.png) no-repeat 50%
    background-size cover

虽然现代前端更倾向于使用 Flex 或 Grid 布局，但 float 布局在这里有几个优势：

  1. 兼容性更好，支持更老的浏览器
  2. 自动换行行为非常符合上传图片列表的需求
  3. 实现简单，一行 float: left 即可实现多列布局

关键技术点

1. 伪元素实现分隔线

.weui-cells
  &::before
    content ""
    position absolute
    left 0
    right 0
    height 1px
    background-color $weui-fg-3
    z-index 2

使用伪元素而非真实 DOM 节点实现顶部分隔线，减少了 HTML 结构的复杂度，同时通过 z-index 确保分隔线显示在正确层级。

2. 响应式设计

虽然没有使用媒体查询，但通过以下方式实现了良好的响应式效果：

  • 百分比宽度和固定高度结合
  • 合理的边距设置适应不同屏幕尺寸
  • 图片 background-size: cover 确保不同尺寸图片显示一致

3. 移动端优化

  • -webkit-overflow-scrolling: touch 提升滚动体验
  • 适当的触摸区域大小（16px 的 padding）
  • 使用半透明颜色提升视觉层次感

总结

WEUI Uploader 的实现体现了几个值得学习的优秀实践：

  1. 严谨的代码组织：遵循 BEM 规范，结构清晰
  2. 渐进增强：在保证基础功能的前提下使用现代特性
  3. 移动优先：充分考虑移动端的使用场景和体验
  4. 样式技巧：灵活运用伪元素、负边距等 CSS 技巧
  5. 主题化设计：通过变量实现风格统一和易于定制

通过学习这个组件的实现，我们不仅可以掌握一个实用的上传组件，更能理解大厂前端代码的组织方式和设计思想，这些经验对于提升前端开发能力非常有帮助。

扩展思考

虽然这个实现已经很优秀，但在实际项目中还可以考虑：

  1. 添加拖拽上传支持
  2. 实现文件预览和删除功能
  3. 增加上传进度显示
  4. 适配暗黑模式

这些扩展都可以基于现有的结构进行开发，体现了良好基础设计的重要性。

avatar
文章
阅读
粉丝