[泛微 Ecology10] 自定义一个可控的 Loading Message

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

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

效果展示：

方案：自己封装一个 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 做前端扩展，欢迎来丸子的博客看看

[泛微 Ecology10] 自定义一个可控的 Loading Message by https://oneszhang.com/archives/189.html