2026-10-19 11:33:16 +00:00

55 lines
47 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>App | tmagic-editor</title>
<meta name="description" content="页面可视化平台">
<meta name="generator" content="VitePress v2.0.0-alpha.20">
<link rel="preload stylesheet" href="/tmagic-editor/docs/assets/style.xjqBjHKn.css" as="style">
<link rel="preload stylesheet" href="/tmagic-editor/docs/assets/vp-icons.139f4833.css" as="style">
<script type="module" src="/tmagic-editor/docs/assets/chunks/metadata.90e584c8.js"></script>
<script type="module" src="/tmagic-editor/docs/assets/app.ek4dLOl2.js"></script>
<link rel="preload" href="/tmagic-editor/docs/assets/inter-roman-latin.q5rAVC0E.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="modulepreload" href="/tmagic-editor/docs/assets/chunks/theme.CGxorDDM.js">
<link rel="modulepreload" href="/tmagic-editor/docs/assets/chunks/framework.DDIL1KmX.js">
<link rel="modulepreload" href="/tmagic-editor/docs/assets/runtime-api_core_app.md.BvOYWlFi.lean.js">
<meta name="theme-color" content="#646cff">
<script id="check-dark-mode">(()=>{let e=localStorage.getItem(`vitepress-theme-appearance`)||`auto`,t=window.matchMedia(`(prefers-color-scheme: dark)`).matches;(!e||e===`auto`?t:e===`dark`)&&document.documentElement.classList.add(`dark`)})();</script>
<script id="check-mac-os">document.documentElement.classList.toggle(`mac`,/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
</head>
<body>
<div id="app"><div class="Layout" data-v-440dbbdf><!--[--><!--]--><!--[--><span tabindex="-1" data-v-c779725a></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-c779725a>Skip to content</a><!--]--><!----><header class="VPNav" data-v-440dbbdf data-v-156bfb0e><div class="VPNavBar has-sidebar top" data-v-156bfb0e data-v-5d7186a2><div class="wrapper" data-v-5d7186a2><div class="container" data-v-5d7186a2><div class="title" data-v-5d7186a2><div class="VPNavBarTitle has-sidebar" data-v-5d7186a2 data-v-510de9a3><a class="title" href="/tmagic-editor/docs/" title="tmagic-editor" data-v-510de9a3><!--[--><!--]--><!--[--><img class="VPImage logo" src="./favicon.png" alt data-v-784e8c02><!--]--><span data-v-510de9a3>tmagic-editor</span><!--[--><!--]--></a></div></div><div class="content" data-v-5d7186a2><div class="content-body" data-v-5d7186a2><!--[--><!--]--><div class="VPNavBarSearch search" data-v-5d7186a2 data-v-4b977777><!--[--><button type="button" class="VPNavBarSearchButton" aria-label="Search" aria-keyshortcuts="/ control+k meta+k" data-v-4b977777 data-v-75cee97a><span class="vpi-search" aria-hidden="true" data-v-75cee97a></span><span class="text" data-v-75cee97a>Search</span><span class="keys" aria-hidden="true" data-v-75cee97a><kbd class="key-mod" data-v-75cee97a></kbd><kbd class="key-k" data-v-75cee97a></kbd></span></button><!----><!--]--></div><nav aria-label="Main Navigation" class="VPNavMenu VPNavBarMenu menu" data-v-5d7186a2 data-v-1a26812e><ul class="list" data-v-1a26812e><!--[--><li class="" data-v-1a26812e><a class="VPLink link VPNavMenuLink VPNavBarMenuLink" href="/tmagic-editor/docs/guide/" data-v-1a26812e data-v-cb5ee893><!--[--><span data-v-cb5ee893>文档</span><!--]--></a></li><li class="" data-v-1a26812e><a class="VPLink link VPNavMenuLink VPNavBarMenuLink" href="/tmagic-editor/docs/api/editor/props.html" data-v-1a26812e data-v-cb5ee893><!--[--><span data-v-cb5ee893>Editor API</span><!--]--></a></li><li class="" data-v-1a26812e><a class="VPLink link VPNavMenuLink VPNavBarMenuLink active" href="/tmagic-editor/docs/runtime-api/core/app.html" aria-current="page" data-v-1a26812e data-v-cb5ee893><!--[--><span data-v-cb5ee893>Runtime API</span><!--]--></a></li><li class="" data-v-1a26812e><a class="VPLink link VPNavMenuLink VPNavBarMenuLink" href="/tmagic-editor/docs/form-config/fields/text.html" data-v-1a26812e data-v-cb5ee893><!--[--><span data-v-cb5ee893>表单配置</span><!--]--></a></li><li class="" data-v-1a26812e><a class="VPLink link vp-external-link-icon VPNavMenuLink VPNavBarMenuLink" href="https://github.com/Tencent/tmagic-editor/releases" target="_blank" rel="noreferrer" data-v-1a26812e data-v-cb5ee893><!--[--><span data-v-cb5ee893>更新日志</span><!--]--></a></li><li class="" data-v-1a26812e><a class="VPLink link vp-external-link-icon VPNavMenuLink VPNavBarMenuLink" href="https://tencent.github.io/tmagic-editor/playground/index.html" target="_blank" rel="noreferrer" data-v-1a26812e data-v-cb5ee893><!--[--><span data-v-cb5ee893>Playground</span><!--]--></a></li><!--]--></ul></nav><!----><div class="VPNavAppearance VPNavBarAppearance appearance" data-v-5d7186a2 data-v-680326c7><!----><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-label="Appearance" aria-checked="false" data-v-680326c7 data-v-ca894290 data-v-ef764d20><span class="check" data-v-ef764d20><span class="icon" data-v-ef764d20><!--[--><span class="vpi-sun sun" aria-hidden="true" data-v-ca894290></span><span class="vpi-moon moon" aria-hidden="true" data-v-ca894290></span><!--]--></span></span></button></div><ul class="VPSocialLinks VPNavSocialLinks VPNavBarSocialLinks social-links" data-v-5d7186a2 data-v-84222131 data-v-72c755c2><!--[--><li data-v-72c755c2><a class="VPSocialLink no-icon" href="https://github.com/Tencent/tmagic-editor" aria-label="github" target="_blank" rel="me noopener" data-v-72c755c2 data-v-121898e4><span class="vpi-simple-icons-github" data-v-121898e4 data-v-0ee3818a></span></a></li><!--]--></ul><!----><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="Menu" aria-expanded="false" data-v-5d7186a2 data-v-4d4764b1><span class="container" aria-hidden="true" data-v-4d4764b1><span class="top" data-v-4d4764b1></span><span class="middle" data-v-4d4764b1></span><span class="bottom" data-v-4d4764b1></span></span></button></div></div></div></div><div class="divider" data-v-5d7186a2><div class="divider-line" data-v-5d7186a2></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-440dbbdf data-v-9af4a020><div class="container" data-v-9af4a020><button type="button" class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-9af4a020><span class="vpi-align-left menu-icon" aria-hidden="true" data-v-9af4a020></span><span class="menu-text" data-v-9af4a020>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-allow-mismatch="style" data-v-9af4a020 data-v-67af6a22><button type="button" data-v-67af6a22>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-440dbbdf data-v-661d8e09><div class="curtain" data-v-661d8e09></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-661d8e09><span class="visually-hidden" id="sidebar-aria-label" data-v-661d8e09> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-e65c073a><section class="VPSidebarItem level-0 has-active" data-v-e65c073a data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><h2 class="text" data-v-cab05059>@tmagic/core</h2><!----></div><ul class="items" data-v-cab05059><li data-v-cab05059><!--[--><div class="VPSidebarItem level-1 is-link is-active has-active" data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/core/app.html" aria-current="page" data-v-cab05059><!--[--><p class="text" data-v-cab05059>App</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/core/node.html" data-v-cab05059><!--[--><p class="text" data-v-cab05059>Node</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/core/page.html" data-v-cab05059><!--[--><p class="text" data-v-cab05059>Page</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/core/eventHelper.html" data-v-cab05059><!--[--><p class="text" data-v-cab05059>EventHelper</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/core/env.html" data-v-cab05059><!--[--><p class="text" data-v-cab05059>Env</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/core/iteratorContainer.html" data-v-cab05059><!--[--><p class="text" data-v-cab05059>IteratorContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/core/flowState.html" data-v-cab05059><!--[--><p class="text" data-v-cab05059>FlowState</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/core/devtoolApi.html" data-v-cab05059><!--[--><p class="text" data-v-cab05059>DevtoolApi</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/core/utils.html" data-v-cab05059><!--[--><p class="text" data-v-cab05059>工具函数</p><!--]--></a><!----></div><!----></div><!--]--></li></ul></section></div><div class="no-transition group" data-v-e65c073a><section class="VPSidebarItem level-0" data-v-e65c073a data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><h2 class="text" data-v-cab05059>@tmagic/data-source</h2><!----></div><ul class="items" data-v-cab05059><li data-v-cab05059><!--[--><div class="VPSidebarItem level-1 is-link" data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/data-source/dataSourceManager.html" data-v-cab05059><!--[--><p class="text" data-v-cab05059>DataSourceManager</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/data-source/dataSource.html" data-v-cab05059><!--[--><p class="text" data-v-cab05059>DataSource</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/data-source/httpDataSource.html" data-v-cab05059><!--[--><p class="text" data-v-cab05059>HttpDataSource</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/data-source/observedData.html" data-v-cab05059><!--[--><p class="text" data-v-cab05059>观察者数据类</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/data-source/utils.html" data-v-cab05059><!--[--><p class="text" data-v-cab05059>工具函数</p><!--]--></a><!----></div><!----></div><!--]--></li></ul></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-440dbbdf data-v-9677ef77><div class="VPDoc has-sidebar has-aside" data-v-9677ef77 data-v-5a9131ba><!--[--><!--]--><div class="container" data-v-5a9131ba><div class="aside" data-v-5a9131ba><div class="aside-curtain" data-v-5a9131ba></div><div class="aside-container" data-v-5a9131ba><div class="aside-content" data-v-5a9131ba><div class="VPDocAside" data-v-5a9131ba data-v-94896f55><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-94896f55 data-v-8d793e1b><div class="content" data-v-8d793e1b><div class="outline-marker" data-v-8d793e1b></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-8d793e1b>On this page</div><ul class="VPDocOutlineItem root" data-v-8d793e1b data-v-c684cb5d><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-94896f55></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-5a9131ba><div class="content-container" data-v-5a9131ba><!--[--><!--]--><main class="main" data-v-5a9131ba><div style="position:relative;" class="vp-doc _tmagic-editor_docs_runtime-api_core_app" data-v-5a9131ba><div><h1 id="app" tabindex="-1">App <a class="header-anchor" href="#app" aria-label="Permalink to “App”">​</a></h1><p><code>App</code> 是 <code>@tmagic/core</code> 的核心类,继承自 <code>EventEmitter</code>,用于管理整个应用的状态和配置。</p><h2 id="构造函数" tabindex="-1">构造函数 <a class="header-anchor" href="#构造函数" aria-label="Permalink to “构造函数”">​</a></h2><div class="language-typescript"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> App</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(options: AppOptionsConfig)</span></span></code></pre></div><h3 id="appoptionsconfig" tabindex="-1">AppOptionsConfig <a class="header-anchor" href="#appoptionsconfig" aria-label="Permalink to “AppOptionsConfig”">​</a></h3><table tabindex="0"><thead><tr><th>参数</th><th>类型</th><th>说明</th></tr></thead><tbody><tr><td><code>ua</code></td><td><code>string</code></td><td>User Agent 字符串</td></tr><tr><td><code>env</code></td><td><code>Env</code></td><td>环境信息实例</td></tr><tr><td><code>config</code></td><td><code>MApp</code></td><td>DSL 配置</td></tr><tr><td><code>platform</code></td><td><code>&#39;editor&#39; | &#39;mobile&#39; | &#39;tv&#39; | &#39;pc&#39;</code></td><td>平台类型</td></tr><tr><td><code>jsEngine</code></td><td><code>JsEngine</code></td><td>JS 引擎类型</td></tr><tr><td><code>designWidth</code></td><td><code>number</code></td><td>设计稿宽度</td></tr><tr><td><code>curPage</code></td><td><code>Id</code></td><td>当前页面 ID</td></tr><tr><td><code>useMock</code></td><td><code>boolean</code></td><td>是否使用 Mock 数据</td></tr><tr><td><code>disabledFlexible</code></td><td><code>boolean</code></td><td>是否禁用 flexible</td></tr><tr><td><code>pageFragmentContainerType</code></td><td><code>string | string[]</code></td><td>页面片段容器类型</td></tr><tr><td><code>iteratorContainerType</code></td><td><code>string | string[]</code></td><td>迭代器容器类型</td></tr><tr><td><code>transformStyle</code></td><td><code>(style: Record&lt;string, any&gt;) =&gt; Record&lt;string, any&gt;</code></td><td>样式转换函数</td></tr><tr><td><code>request</code></td><td><code>RequestFunction</code></td><td>请求函数</td></tr><tr><td><code>dataSourceManagerInitialData</code></td><td><code>DataSourceManagerData</code></td><td>数据源管理器初始数据</td></tr><tr><td><code>nodeStoreInitialData</code></td><td><code>() =&gt; any</code></td><td>节点存储初始数据工厂函数</td></tr><tr><td><code>errorHandler</code></td><td><code>ErrorHandler</code></td><td>错误处理器</td></tr><tr><td><code>beforeEventHandler</code></td><td><code>BeforeEventHandler</code></td><td>事件处理前钩子</td></tr><tr><td><code>afterEventHandler</code></td><td><code>AfterEventHandler</code></td><td>事件处理后钩子</td></tr></tbody></table><h2 id="属性" tabindex="-1">属性 <a class="header-anchor" href="#属性" aria-label="Permalink to “属性”">​</a></h2><table tabindex="0"><thead><tr><th>属性</th><th>类型</th><th>说明</th></tr></thead><tbody><tr><td><code>env</code></td><td><code>Env</code></td><td>环境信息实例</td></tr><tr><td><code>dsl</code></td><td><code>MApp | undefined</code></td><td>DSL 配置</td></tr><tr><td><code>codeDsl</code></td><td><code>CodeBlockDSL | undefined</code></td><td>代码块配置</td></tr><tr><td><code>dataSourceManager</code></td><td><code>DataSourceManager | undefined</code></td><td>数据源管理器</td></tr><tr><td><code>page</code></td><td><code>Page | undefined</code></td><td>当前页面</td></tr><tr><td><code>pageFragments</code></td><td><code>Map&lt;Id, Page&gt;</code></td><td>页面片段集合</td></tr><tr><td><code>platform</code></td><td><code>string</code></td><td>平台类型</td></tr><tr><td><code>jsEngine</code></td><td><code>JsEngine</code></td><td>JS 引擎类型</td></tr><tr><td><code>components</code></td><td><code>Map&lt;string, any&gt;</code></td><td>已注册的组件</td></tr><tr><td><code>eventHelper</code></td><td><code>EventHelper | undefined</code></td><td>事件助手实例(仅当 <code>platform !== &#39;editor&#39;</code> 时创建)</td></tr><tr><td><code>useMock</code></td><td><code>boolean</code></td><td>是否使用 Mock 数据,默认 <code>false</code></td></tr><tr><td><code>request</code></td><td><code>RequestFunction | undefined</code></td><td>请求函数</td></tr><tr><td><code>transformStyle</code></td><td><code>(style: Record&lt;string, any&gt;) =&gt; Record&lt;string, any&gt;</code></td><td>样式转换函数</td></tr><tr><td><code>pageFragmentContainerType</code></td><td><code>Set&lt;string&gt;</code></td><td>页面片段容器类型集合,默认包含 <code>page-fragment-container</code></td></tr><tr><td><code>iteratorContainerType</code></td><td><code>Set&lt;string&gt;</code></td><td>迭代器容器类型集合,默认包含 <code>iterator-container</code></td></tr><tr><td><code>errorHandler</code></td><td><code>ErrorHandler | undefined</code></td><td>错误处理器</td></tr><tr><td><code>nodeStoreInitialData</code></td><td><code>(() =&gt; any) | undefined</code></td><td>节点存储初始数据工厂函数</td></tr></tbody></table><h2 id="静态属性" tabindex="-1">静态属性 <a class="header-anchor" href="#静态属性" aria-label="Permalink to “静态属性”">​</a></h2><h3 id="nodeclassmap" tabindex="-1">nodeClassMap <a class="header-anchor" href="#nodeclassmap" aria-label="Permalink to “nodeClassMap”">​</a></h3><ul><li><p><strong>类型:</strong> <code>Map&lt;string, typeof Node&gt;</code></p></li><li><p><strong>详情:</strong></p><p>自定义节点类型的映射表,由 <code>App.registerNode</code> 写入;<code>Page</code> 在初始化节点时会按 <code>config.type</code> 从此 Map 中查找对应的节点类,未命中则回退到默认 <code>Node</code>。</p></li></ul><h2 id="静态方法" tabindex="-1">静态方法 <a class="header-anchor" href="#静态方法" aria-label="Permalink to “静态方法”">​</a></h2><h3 id="registernode" tabindex="-1">registerNode <a class="header-anchor" href="#registernode" aria-label="Permalink to “registerNode”">​</a></h3><ul><li><p><strong>参数:</strong></p><ul><li><code>{string} type</code> 节点类型</li><li><code>{typeof Node} NodeClass</code> 节点类</li></ul></li><li><p><strong>返回:</strong></p><ul><li><code>{void}</code></li></ul></li><li><p><strong>详情:</strong></p><p>注册自定义节点类型,用于扩展节点功能。内部会将 <code>NodeClass</code> 写入 <code>App.nodeClassMap</code>。</p></li><li><p><strong>示例:</strong></p></li></ul><div class="language-typescript"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> App </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@tmagic/core&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">class</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> CustomNode</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> extends</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Node</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> // 自定义实现</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">App.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">registerNode</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;custom&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, CustomNode);</span></span></code></pre></div><h2 id="实例方法" tabindex="-1">实例方法 <a class="header-anchor" href="#实例方法" aria-label="Permalink to “实例方法”">​</a></h2><h3 id="setenv" tabindex="-1">setEnv <a class="header-anchor" href="#setenv" aria-label="Permalink to “setEnv”">​</a></h3><ul><li><p><strong>参数:</strong></p><ul><li><code>{string | Env} ua</code> User Agent 字符串或 <code>Env</code> 实例(可选)</li></ul></li><li><p><strong>返回:</strong></p><ul><li><code>{void}</code></li></ul></li><li><p><strong>详情:</strong></p><p>设置环境信息。当传入字符串(或不传)时,会基于 UA 创建一个新的 <code>Env</code> 实例并赋值给 <code>env</code> 属性;当传入 <code>Env</code> 实例时,直接将其设置为当前 <code>env</code>。</p></li><li><p><strong>示例:</strong></p></li></ul><div class="language-typescript"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> App, { Env } </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@tmagic/core&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> app</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> App</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({});</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">app.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setEnv</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(navigator.userAgent);</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;">// 也可以直接传入已创建的 Env 实例</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">app.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setEnv</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Env</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(navigator.userAgent));</span></span></code></pre></div><h3 id="setdesignwidth" tabindex="-1">setDesignWidth <a class="header-anchor" href="#setdesignwidth" aria-label="Permalink to “setDesignWidth”">​</a></h3><ul><li><p><strong>参数:</strong></p><ul><li><code>{number} width</code> 设计稿宽度</li></ul></li><li><p><strong>返回:</strong></p><ul><li><code>{void}</code></li></ul></li><li><p><strong>详情:</strong></p><p>设置设计稿宽度,用于响应式布局计算。</p></li><li><p><strong>示例:</strong></p></li></ul><div class="language-typescript"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">app.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setDesignWidth</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">375</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><h3 id="setconfig" tabindex="-1">setConfig <a class="header-anchor" href="#setconfig" aria-label="Permalink to “setConfig”">​</a></h3><ul><li><p><strong>参数:</strong></p><ul><li><code>{MApp} config</code> DSL 配置</li><li><code>{Id} curPage</code> 当前页面 ID(可选)</li><li><code>{DataSourceManagerData} initialData</code> 初始数据(可选)</li></ul></li><li><p><strong>返回:</strong></p><ul><li><code>void</code></li></ul></li><li><p><strong>详情:</strong></p><p>设置 DSL 配置,会初始化数据源管理器和当前页面。</p></li><li><p><strong>示例:</strong></p></li></ul><div class="language-typescript"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">app.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setConfig</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;app_1&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;app&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> items: [</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;page_1&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;page&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> items: []</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ]</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><h3 id="setpage" tabindex="-1">setPage <a class="header-anchor" href="#setpage" aria-label="Permalink to “setPage”">​</a></h3><ul><li><p><strong>参数:</strong></p><ul><li><code>{Id} id</code> 页面 ID</li></ul></li><li><p><strong>返回:</strong></p><ul><li><code>{void}</code></li></ul></li><li><p><strong>详情:</strong></p><p>切换当前页面。</p></li><li><p><strong>示例:</strong></p></li></ul><div class="language-typescript"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">app.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setPage</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;page_2&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><h3 id="deletepage" tabindex="-1">deletePage <a class="header-anchor" href="#deletepage" aria-label="Permalink to “deletePage”">​</a></h3><ul><li><p><strong>返回:</strong></p><ul><li><code>{void}</code></li></ul></li><li><p><strong>详情:</strong></p><p>删除当前页面。</p></li></ul><h3 id="getpage" tabindex="-1">getPage <a class="header-anchor" href="#getpage" aria-label="Permalink to “getPage”">​</a></h3><ul><li><p><strong>参数:</strong></p><ul><li><code>{Id} id</code> 页面 ID(可选)</li></ul></li><li><p><strong>返回:</strong></p><ul><li><code>{Page | undefined}</code></li></ul></li><li><p><strong>详情:</strong></p><p>获取页面:不传 <code>id</code> 时返回当前 <code>this.page</code>;传入 <code>id</code> 时,仅当其与当前 <code>this.page.data.id</code> 一致时返回该页面,否则返回 <code>undefined</code>。该方法不会按 DSL 遍历所有页面查找。</p></li><li><p><strong>示例:</strong></p></li></ul><div class="language-typescript"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> page</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> app.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getPage</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;page_1&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><h3 id="getnode" tabindex="-1">getNode <a class="header-anchor" href="#getnode" aria-label="Permalink to “getNode”">​</a></h3><ul><li><p><strong>参数:</strong></p><ul><li><code>{Id} id</code> 节点 ID</li><li><code>{GetNodeOptions} options</code> 获取选项(可选)</li></ul></li><li><p><strong>返回:</strong></p><ul><li><code>{Node | undefined}</code></li></ul></li><li><p><strong>详情:</strong></p><p>获取指定 ID 的节点。</p></li><li><p><strong>GetNodeOptions:</strong></p></li></ul><table tabindex="0"><thead><tr><th>参数</th><th>类型</th><th>说明</th></tr></thead><tbody><tr><td><code>iteratorContainerId</code></td><td><code>Id[]</code></td><td>迭代器容器 ID 数组</td></tr><tr><td><code>iteratorIndex</code></td><td><code>number[]</code></td><td>迭代器索引数组</td></tr><tr><td><code>pageFragmentContainerId</code></td><td><code>Id</code></td><td>页面片段容器 ID</td></tr><tr><td><code>strict</code></td><td><code>boolean</code></td><td>是否严格模式</td></tr></tbody></table><ul><li><strong>示例:</strong></li></ul><div class="language-typescript"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> node</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> app.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getNode</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;button_1&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><h3 id="registercomponent" tabindex="-1">registerComponent <a class="header-anchor" href="#registercomponent" aria-label="Permalink to “registerComponent”">​</a></h3><ul><li><p><strong>参数:</strong></p><ul><li><code>{string} type</code> 组件类型</li><li><code>{any} Component</code> 组件</li></ul></li><li><p><strong>返回:</strong></p><ul><li><code>{void}</code></li></ul></li><li><p><strong>详情:</strong></p><p>注册组件。</p></li><li><p><strong>示例:</strong></p></li></ul><div class="language-typescript"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">app.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">registerComponent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;my-button&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, MyButton);</span></span></code></pre></div><h3 id="unregistercomponent" tabindex="-1">unregisterComponent <a class="header-anchor" href="#unregistercomponent" aria-label="Permalink to “unregisterComponent”">​</a></h3><ul><li><p><strong>参数:</strong></p><ul><li><code>{string} type</code> 组件类型</li></ul></li><li><p><strong>返回:</strong></p><ul><li><code>{void}</code></li></ul></li><li><p><strong>详情:</strong></p><p>取消注册组件。</p></li></ul><h3 id="resolvecomponent" tabindex="-1">resolveComponent <a class="header-anchor" href="#resolvecomponent" aria-label="Permalink to “resolveComponent”">​</a></h3><ul><li><p><strong>参数:</strong></p><ul><li><code>{string} type</code> 组件类型</li></ul></li><li><p><strong>返回:</strong></p><ul><li><code>{any}</code></li></ul></li><li><p><strong>详情:</strong></p><p>解析组件,返回已注册的组件。</p></li></ul><h3 id="emit" tabindex="-1">emit <a class="header-anchor" href="#emit" aria-label="Permalink to “emit”">​</a></h3><ul><li><p><strong>参数:</strong></p><ul><li><code>{string | symbol} name</code> 事件名</li><li><code>{...any[]} args</code> 事件参数;约定第一个参数为触发事件的 <code>Node</code> 实例</li></ul></li><li><p><strong>返回:</strong></p><ul><li><code>{boolean}</code></li></ul></li><li><p><strong>详情:</strong></p><p>重写自 <code>EventEmitter.emit</code>。当第一个参数是 <code>Node</code> 实例,并且该节点的 <code>eventKeys</code> 中存在 <code>${name}_${node.data.id}</code> 时,会将事件经由 <code>EventHelper</code> 用对应的 <code>Symbol</code> 转发(即触发联动事件配置);否则按 <code>EventEmitter</code> 默认逻辑触发。</p></li></ul><h3 id="runcode" tabindex="-1">runCode <a class="header-anchor" href="#runcode" aria-label="Permalink to “runCode”">​</a></h3><ul><li><p><strong>参数:</strong></p><ul><li><code>{Id} codeId</code> 代码块 ID</li><li><code>{object} params</code> 参数</li><li><code>{any[]} args</code> 额外参数</li><li><code>{FlowState} flowState</code> 流程状态(可选)</li><li><code>{Node} node</code> 节点(可选)</li></ul></li><li><p><strong>返回:</strong></p><ul><li><code>{Promise&lt;void&gt;}</code> 该方法不会显式返回代码块的返回值。如需获取代码块结果,需在代码块内自行通过 <code>params</code>/<code>flowState</code> 等回写。</li></ul></li><li><p><strong>详情:</strong></p><p>执行代码块。当 <code>codeId</code> 为空、<code>codeDsl</code> 为空,或代码块的 <code>content</code> 不是函数时直接返回;否则 <code>await</code> 执行代码块函数。如果执行过程中抛出异常,存在 <code>errorHandler</code> 时会交由其处理,否则继续抛出。</p></li><li><p><strong>示例:</strong></p></li></ul><div class="language-typescript"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">await</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> app.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">runCode</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;code_1&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;value&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> });</span></span></code></pre></div><h3 id="rundatasourcemethod" tabindex="-1">runDataSourceMethod <a class="header-anchor" href="#rundatasourcemethod" aria-label="Permalink to “runDataSourceMethod”">​</a></h3><ul><li><p><strong>参数:</strong></p><ul><li><code>{Id} dsId</code> 数据源 ID</li><li><code>{string} methodName</code> 方法名</li><li><code>{object} params</code> 参数</li><li><code>{any[]} args</code> 额外参数</li><li><code>{FlowState} flowState</code> 流程状态(可选)</li><li><code>{Node} node</code> 节点(可选)</li></ul></li><li><p><strong>返回:</strong></p><ul><li><code>{Promise&lt;any | undefined&gt;}</code> 取决于数据源方法的返回值。当 <code>dsId</code>、<code>methodName</code> 缺失,或数据源不存在、未匹配到方法时,返回 <code>undefined</code>。</li></ul></li><li><p><strong>详情:</strong></p><p>执行数据源方法。如果执行过程中抛出异常,存在 <code>errorHandler</code> 时会交由其处理,否则继续抛出。</p></li><li><p><strong>示例:</strong></p></li></ul><div class="language-typescript"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> result</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> await</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> app.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">runDataSourceMethod</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;ds_1&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;fetchData&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, { id: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">123</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> });</span></span></code></pre></div><h3 id="destroy" tabindex="-1">destroy <a class="header-anchor" href="#destroy" aria-label="Permalink to “destroy”">​</a></h3><ul><li><p><strong>返回:</strong></p><ul><li><code>{void}</code></li></ul></li><li><p><strong>详情:</strong></p><p>销毁应用实例,清理所有资源。</p></li><li><p><strong>示例:</strong></p></li></ul><div class="language-typescript"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">app.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">destroy</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span></code></pre></div><h2 id="事件" tabindex="-1">事件 <a class="header-anchor" href="#事件" aria-label="Permalink to “事件”">​</a></h2><p><code>App</code> 继承自 <code>EventEmitter</code>,会通过 <code>super.emit</code> 触发以下事件:</p><table tabindex="0"><thead><tr><th>事件名</th><th>触发时机</th><th>回调参数</th></tr></thead><tbody><tr><td><code>dsl-change</code></td><td>调用 <code>setConfig</code> 时触发</td><td><code>({ dsl: MApp, curPage: Id })</code></td></tr><tr><td><code>page-change</code></td><td>调用 <code>setPage</code> 切换页面时触发;切换到不存在的页面时也会触发,此时回调无参数。<strong>注意</strong>:当 <code>pageConfig === this.page.data</code>(重复 setPage 到当前页)时会直接 <code>return</code>,<strong>不</strong>触发该事件</td><td><code>(page?: Page)</code></td></tr></tbody></table><h3 id="监听示例" tabindex="-1">监听示例 <a class="header-anchor" href="#监听示例" aria-label="Permalink to “监听示例”">​</a></h3><div class="language-typescript"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">app.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;dsl-change&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, ({ </span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">dsl</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">curPage</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }) </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;DSL 已更新&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, dsl, curPage);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">app.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;page-change&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, (</span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">page</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;当前页面切换为&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, page?.data?.id);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-5a9131ba data-v-0e42eeea><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-0e42eeea><span class="visually-hidden" id="doc-footer-aria-label" data-v-0e42eeea>Pager</span><div class="pager" data-v-0e42eeea><!----></div><div class="pager" data-v-0e42eeea><a class="VPLink link pager-link next" href="/tmagic-editor/docs/runtime-api/core/node.html" data-v-0e42eeea><!--[--><span class="desc" data-v-0e42eeea>Next page</span><span class="title" data-v-0e42eeea>Node</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-440dbbdf data-v-2daa7712><div class="container" data-v-2daa7712><p class="message" data-v-2daa7712>Powered by 腾讯视频会员平台技术中心</p><p class="copyright" data-v-2daa7712>Copyright (C) 2025 Tencent.</p></div></footer><!--[--><!--]--></div></div>
</body>
</html>