Malla文档
首页快速入门打开 Malla

客户端工作流

在浏览器中运行的可视化逻辑，响应点击、提交、页面加载和变量变化。

用户指南

客户端工作流是在访客浏览器中运行的可视化逻辑：当有人点击、输入、提交，或页面加载时，运行一系列步骤。每个步骤的结果都会以 steps.<id> 的形式提供给后续步骤。

触发器

触发器何时运行
Page load页面加载完成时
Element event元素触发 click、submit、change、input、mouseenter、mouseleave、focus 或 blur 时
Variable changes变量获得新值时
Query succeeds / Query fails查询完成或失败时
Interval每隔 N 毫秒
Called by another workflow仅当另一个工作流运行它时

最快的开始方式：选中一个元素，在检查器中打开 Events，然后点击 Add workflow。

构建工作流

  1. 打开 Logic 工作区

    当前页面的工作流列在左侧。新建一个工作流并选择它的触发器。

  2. 添加步骤

    从步骤库中选择动作：设置变量、重新获取数据、页面跳转、显示提示消息、播放交互、让访客登录… 每个参数都可以是表达式。

  3. 添加控制流

    按条件分支、按值切换、遍历数组、并行运行多条分支，或用 try/catch 包裹步骤。

  4. 测试

    点击 Run in preview。运行日志会使用变量的预览值，显示每个步骤、其结果和耗时。预览模式下，工作流也会在画布上运行。

json
{
  "name": "Add to cart",
  "runtime": "client",
  "trigger": { "type": "event", "node": "n_btn_add", "event": "click" },
  "steps": [
    { "id": "guard", "action": "core.branch",
      "params": { "if": { "$expr": "!user.isLoggedIn" } },
      "branches": { "then": [
        { "id": "toLogin", "action": "core.navigate", "params": { "to": "/login" } },
        { "id": "end", "action": "core.stop" }
      ] } },
    { "id": "add", "action": "core.setVar",
      "params": { "var": "cart", "value": { "$expr": "[...vars.cart, item]" } } },
    { "id": "done", "action": "core.toast", "params": { "message": "Added to cart" } }
  ],
  "onError": [
    { "id": "oops", "action": "core.toast", "params": { "message": { "$expr": "error.message" }, "variant": "error" } }
  ]
}

错误

步骤失败时，会运行 on error 步骤，并可在其中使用 error。如果没有设置这些步骤，错误会被记录下来，在预览中还会以提示消息显示。

上限

一次客户端运行最多 200 个步骤、8 层嵌套、1,000 次循环迭代，单次延迟最长 60 秒，因此一个失误永远不会让访客的标签页卡死。

所有动作及其参数都列在工作流操作参考中。