# 如何运行示例

测试 WU API、连接 React 与 Vue，并完整体验契约、RPC、权限和清理的服务流程。

也可以体验[移动中的应用](/zh-cn/labs/interaction/)：React 编辑器、Vue 收件箱、窗口与 PiP、类型化传递、过渡和 keep-alive。[场景指南](/zh-cn/docs/guides/interactive-workspace/)介绍了如何将其用于你的应用。

<span id="elige-qué-quieres-comprobar"></span>

<span class="section-anchor" id="section-1"></span>

## 选择要验证的内容

刚创建 `mi-plataforma` 并添加 `inspector` 时，先完成**共享计数器**，再完成**应用间求和**。两指南包含完整文件和 ZIP，可应用到同一个 workspace。之后可通过门户实验室探索更多场景。

| 流程 | 执行内容 | 入口 |
| --- | --- | --- |
| 共享计数器 | 通过 store 连接 workspace 中 React 和 Vue 的计数器 | [指南与文件](/zh-cn/docs/guides/shared-counter/) |
| 应用间求和 | 添加带 RPC、manifests 和权限的客户端与提供方 | [指南与文件](/zh-cn/docs/guides/rpc-between-apps/) |
| API 示例 | RPC、契约、grants、hooks、插件、timeline、同步和加载 | [实验室](/zh-cn/labs/) |
| 组合 | React/Vue 挂载、共享计数器与事件发布 | [React 与 Vue](/zh-cn/labs/composition/) |
| 服务与 RPC | 契约消费、版本化请求、响应、取消和撤销 | [连接服务](/zh-cn/labs/backend/) |
| CLI 生成器 | 生成和复制命令，之后在终端执行 | [组合](/zh-cn/labs/composition/) |
| SSR、AI 与 MCP | Node 渲染、本地 actions，以及连接浏览器的 relay | [可下载示例](/examples/wu-server-recipes.zip) |

[API 浏览器](/zh-cn/api/)可在运行示例前查看签名、参数、返回值、错误、权限和清理。[覆盖索引](/zh-cn/api/coverage/)将目录的 397 条记录与可用示例关联，这些记录不代表框架测试覆盖率。

<span id="ejecutar-una-receta-de-api"></span>

<span class="section-anchor" id="section-2"></span>

## 运行 API 示例

打开[实验室](/zh-cn/labs/)，选择示例并运行。单纯选择不会启动工作。各项检查显示预期与实际结果，完成后也会报告资源清理。

八个示例包含 **49 项检查**。成功执行证明这些具体条件成立，不证明 API 的所有可能组合。

| 示例 | 可观察的操作 |
| --- | --- |
| [RPC](/zh-cn/labs/?recipe=rpc) | handler 响应、不兼容范围、超时、中止信号和提供方移除 |
| [契约](/zh-cn/labs/?recipe=contracts) | `provide`、`consume`、兼容版本访问、撤销和提供方替换 |
| [Grants](/zh-cn/labs/?recipe=grants) | manifest requests、shell grants、允许写入、拒绝，以及 `unmount` 后 facade 撤销 |
| [Hooks](/zh-cn/labs/?recipe=hooks) | 优先级、`next()` 继续、取消及移除 guard 后挂载 |
| [插件](/zh-cn/labs/?recipe=plugins) | 插件授权、事件接收和卸载时移除监听器 |
| [Timeline](/zh-cn/labs/?recipe=timeline) | 变更记录、`seek`、返回实时状态，以及不会回退的副作用 |
| [同步](/zh-cn/labs/?recipe=sync) | 两个 store 通过 BroadcastChannel 交换真实消息，随后关闭通道 |
| [加载](/zh-cn/labs/?recipe=loading) | 策略、hints、本地模块加载、挂载、允许的 overrides 和缓存过期 |

可以分享带 `?recipe=rpc` 或表内其他标识符的 URL。`/labs/api/` 也提供同一实验室入口。显示代码来自项目固定示例，界面不求值访客输入的文本。

每次执行都会在当前文档中创建独立的 WU 实例。应用挂载到 Shadow DOM 内的元素；执行结束后，运行器释放自己的处理器、契约、监听器、通道和应用。取消、切换示例或移除组件都会请求中止和清理。如果清理未在规定时间内确认，执行回执会说明情况，诊断仍会显示待释放的资源。

<span id="del-laboratorio-a-tu-código"></span>

<span class="section-anchor" id="section-3"></span>

## 从实验室到自己的代码

示例源码中的 **`h` 是本门户的测试助手**，不是从 `wu-framework` 导入。runner 创建该对象并传给示例函数。

| 示例中的写法 | 你的项目中 |
| --- | --- |
| `const { wu } = h` | 在 shell 客户端模块中，从 `wu-framework` 导入 `wu`。 |
| `h.init(...)` | shell 使用真实目录调用 `await wu.init({ apps, ... })`。 |
| `h.app(nombre, grants)` | 一个 `apps` 条目，包含 `name`、提供 `wu.json` 的 URL 和授予的 `grants`。 |
| `h.check` / `h.rejects` | 测试检查；界面显示结果，或用 `try`/`catch` 处理错误。 |
| `h.defer` | 注册测试清理；应用应保存取消函数，并在 `unmount` 中执行。 |
| `h.sleep` / `h.until` | 测试场景的等待，不是 WU runtime 方法。 |

**测试助手 (h)** 和**示例执行器**链接可查看基础设施。Grants 中的**应用 Manifest**展示权限申请，可与代码的 `granted` 数组比较。应用申请写入 `docs.api.*`，但 shell 只授予 `docs.api.allowed`，所以写入 `docs.api.denied` 必须失败。

<span id="una-página-astro-con-rpc"></span>

<span class="section-anchor" id="section-4"></span>

## 使用 RPC 的 Astro 页面

[应用间求和](/zh-cn/docs/guides/rpc-between-apps/)把 **7 + 8 = 15** 带到你的 workspace：一个应用接收数字，另一个计算，Astro shell 授权并依序挂载。也包含停止提供方后的可恢复失败。

下载 [wu-rpc-sum.zip](/examples/wu-rpc-sum.zip)，按指南先添加应用，再复制文件。ZIP 应用到 `mi-plataforma/` 内，README 标明各目标。最终页面是 `shell/src/pages/suma.astro`。若已创建全部在宿主内执行的旧求和页，请用完整示例替换它。

各应用使用挂载时收到的 `context.wu`。manifests 申请权限，宿主授予权限。这样可以追踪完整的 `cliente → request → handle del proveedor → respuesta`，查看双方代码，并验证服务消失时的行为。

<span id="compartir-estado-y-eventos-entre-react-y-vue"></span>

<span class="section-anchor" id="section-5"></span>

## React 与 Vue 共享状态和事件

在[组合](/zh-cn/labs/composition/)中，shell 挂载两个 WU 应用。React 管理命令生成器，Vue 观察 store 和事件，视觉控件是 Lit Custom Elements。

1. 点击**从 React +1**，Vue 检查器的值也通过 WU store 改变。
2. 在 Vue 中增加或重置，React 收到新值。
3. 在生成器修改名称和框架，点击**发布到总线**共享命令并产生检查器显示的事件。
4. 在 Vue 点击**暂停订阅**，再从 React 增加。Store 改变，但检查器保持暂停观察。
5. 重新连接后，Vue 再次读取当前值并注册订阅。
6. 从应用栏卸载再重新挂载，观察生命周期和该实例资源移除。

计数器使用 `docs.lab.counter`，最后命令使用 `docs.lab.lastCommand`。事件是 `docs:lab:counter`、`docs:lab:command` 和 `docs:lab:lifecycle`。将模式用于自己的应用，请参阅[状态](/zh-cn/docs/framework/state/)、[通信](/zh-cn/docs/framework/communication/)和[生命周期](/zh-cn/docs/framework/lifecycle/)。

复制按钮生成供终端使用的文本，门户不执行 WU CLI 二进制、不安装软件包，也不修改访客系统。创建真实 workspace 请按照[第一个 workspace](/zh-cn/docs/guides/quickstart/)和 [CLI 参考](/zh-cn/docs/cli/api-reference/)。

<span id="seguir-una-solicitud-entre-aplicaciones"></span>

<span class="section-anchor" id="section-6"></span>

## 追踪应用间请求

打开[服务与 RPC](/zh-cn/labs/backend/)，观察客户端消费 `docs:backend:service` 并调用提供方发布的通道。

先发送含 `name` 和 `entry` 的 manifest，再移除 `entry`、请求不兼容版本或卸载提供方。这些情况分别展示服务拒绝数据、契约不满足版本范围，以及提供方不再可用。

慢速示例可在执行期间取消。提供方把 WU 信号连接到工作中断，仅停止客户端等待不足以保证停止。[使用 WU 连接服务](/zh-cn/docs/guides/browser-backend/)解释签名、grants、版本和清理。

<span id="ejecutar-los-ejemplos-node"></span>

<span class="section-anchor" id="section-7"></span>

## 运行 Node 示例

下载并解压 [wu-server-recipes.zip](/examples/wu-server-recipes.zip)。使用 Node 22.12 或更新版本，在解压目录运行：

```sh
npm install
npm test
npm run test:mcp
```

`npm test` 检查 SSR 和本地 actions。MCP 测试需要兼容浏览器，将 relay 进程连接到真实页面。按照 [SSR](/zh-cn/docs/framework/server-recipes/)和 [AI/MCP](/zh-cn/docs/framework/ai-recipes/)准备要求并运行各场景。打开门户静态页面不会把这些示例变成 Node 服务。

<span id="versiones-e-implementación"></span>

<span class="section-anchor" id="section-8"></span>

## 版本与实现

首页示例、实验室和下载示例使用 WU Framework **4.0.0**，终端指南使用 CLI **1.2.0**。升级旧项目之前请阅读[分发](/zh-cn/sources/)和[迁移](/zh-cn/docs/guides/releases/)。

服务实现使用 Worker 和 WASI 程序，无需部署服务器即可在浏览器处理真实数据。这些基础设施位于 WU 提供方之后，使示例能够运行；学习的契约仍是 `provide`/`consume`、`handle`/`request`、权限和生命周期。它不向框架添加通用 WASI 引擎，也不替代 HTTP 监听器、Node SSR 或 MCP relay。