本文摘要
泛微 Ecology10 的 UI 层改用 weappUi 后，只保留了全屏遮罩式的 Spin，缺少 E9 中 antd.message.loading 那种轻量可控的加载提示。文章利用 weappUi.Dialog.message 搭配 Spin 封装了一个伪 message.loading，返回可手动销毁的实例，避免全屏遮罩阻断操作，适合接口查询、短轮询等轻量异步场景，并指出 E10 虽移除了部分顺手的组件，却给前端扩展留下更多空间。

Ecology E9 时代，antd.message.loading 是很多前端人的心头好——轻量、可控、非遮罩式、还能手动关闭。 但到了 Ecology 10 ，UI 层全面转向 weappUi，只保留了 Spin 的全局遮罩样式。 结果就是：异步任务的 Loading 不够友好，也缺乏 message 级别的可控 loading 提示。 丸子用最简单的方式，实现了一个「伪 message.loading」效果：

轻量、可关闭、不干扰页面交互。

效果展示：

20251211130731_rec_.gif

方案：自己封装一个 message-like Loading

核心思路： 利用 weappUi.Dialog.message + weappUi.Spin 拼一个轻量提示，再返回可销毁实例。 代码极简两行：

window.showLoading = () =>
  weappUi.Dialog.message({
    type: 'custom',
    delay: 0,
    icon: React.createElement(weappUi.Spin, {
      spinning: true,
      size: 'small'
    }),
    content: '加载中...'
  });


window.hideLoading = (inst) => inst?.destroy();

使用方式也与 antd 非常相似：

const loadingInst = window.showLoading();


// 模拟异步任务
setTimeout(() => {
  window.hideLoading(loadingInst);
}, 1500);

Minimal. Elegant. 有手就行。

为什么不用全局遮罩？

原因很现实：Ecology10 的全局遮罩太“重”了

  • 遮住整个屏幕 → 用户无法操作
  • 对轻任务（接口查询、短轮询）不友好
  • 经常误导用户以为系统卡死
  • 影响复杂页面的交互体验

很多时候，我们只是想来个“轻提示”，而不是把世界暂停。

自定义 Loading 的优点

更轻量

不阻断用户操作，比全屏 Spin 更自然。

可控性强

返回实例 → 我们想关就关，不用等待延时关闭。

视觉一致

照样用 weappUi 的风格，不突兀。

代码极简

只两行代码，随处可复用。

写在最后

Ecology10 虽然去掉了很多 E9 时代顺手的 Web 组件，但也给了前端更多自由度。

轻量级 Loading 只是其中一个小例子。

如果你也在 E10 做前端扩展，欢迎来丸子的博客看看