2026-11-05 11:36:05 +00:00

55 lines
48 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.BJ2NNEpv.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.dcccadd9.js"></script>
<script type="module" src="/tmagic-editor/docs/assets/app.CPR846ZD.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/framework.xVFRZL1t.js">
<link rel="modulepreload" href="/tmagic-editor/docs/assets/chunks/theme.Cnor0NYZ.js">
<link rel="modulepreload" href="/tmagic-editor/docs/assets/runtime-api_core_app.md.DVnP9rCY.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-30dd6aed><!--[--><!--]--><!--[--><span tabindex="-1" data-v-a433cfaa></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-a433cfaa>Skip to content</a><!--]--><!----><header class="VPNav" data-v-30dd6aed data-v-07bd5c5d><div class="VPNavBar has-sidebar top" data-v-07bd5c5d data-v-21941f7c><div class="wrapper" data-v-21941f7c><div class="container" data-v-21941f7c><div class="title" data-v-21941f7c><div class="VPNavBarTitle has-sidebar" data-v-21941f7c data-v-897088ca><a class="title" href="/tmagic-editor/docs/" title="tmagic-editor" data-v-897088ca><!--[--><!--]--><!--[--><img class="VPImage logo" src="./favicon.png" alt data-v-38e748df><!--]--><span data-v-897088ca>tmagic-editor</span><!--[--><!--]--></a></div></div><div class="content" data-v-21941f7c><div class="content-body" data-v-21941f7c><!--[--><!--]--><div class="VPNavBarSearch search" data-v-21941f7c data-v-f5079369><!--[--><button type="button" class="VPNavBarSearchButton" aria-label="Search" aria-keyshortcuts="/ control+k meta+k" data-v-f5079369 data-v-83aac609><span class="vpi-search" aria-hidden="true" data-v-83aac609></span><span class="text" data-v-83aac609>Search</span><span class="keys" aria-hidden="true" data-v-83aac609><kbd class="key-mod" data-v-83aac609></kbd><kbd class="key-k" data-v-83aac609></kbd></span></button><!----><!--]--></div><nav aria-label="Main Navigation" class="VPNavMenu VPNavBarMenu menu" data-v-21941f7c data-v-4ba09fef><ul class="list" data-v-4ba09fef><!--[--><li class="" data-v-4ba09fef><a class="VPLink link VPNavMenuLink VPNavBarMenuLink" href="/tmagic-editor/docs/guide/" data-v-4ba09fef data-v-7e03ec29><!--[--><span data-v-7e03ec29>文档</span><!--]--></a></li><li class="" data-v-4ba09fef><a class="VPLink link VPNavMenuLink VPNavBarMenuLink" href="/tmagic-editor/docs/api/editor/props.html" data-v-4ba09fef data-v-7e03ec29><!--[--><span data-v-7e03ec29>Editor API</span><!--]--></a></li><li class="" data-v-4ba09fef><a class="VPLink link VPNavMenuLink VPNavBarMenuLink active" href="/tmagic-editor/docs/runtime-api/core/app.html" aria-current="page" data-v-4ba09fef data-v-7e03ec29><!--[--><span data-v-7e03ec29>Runtime API</span><!--]--></a></li><li class="" data-v-4ba09fef><a class="VPLink link VPNavMenuLink VPNavBarMenuLink" href="/tmagic-editor/docs/form-config/fields/text.html" data-v-4ba09fef data-v-7e03ec29><!--[--><span data-v-7e03ec29>表单配置</span><!--]--></a></li><li class="" data-v-4ba09fef><a class="VPLink link vp-external-link-icon VPNavMenuLink VPNavBarMenuLink" href="https://github.com/Tencent/tmagic-editor/releases" target="_blank" rel="noreferrer" data-v-4ba09fef data-v-7e03ec29><!--[--><span data-v-7e03ec29>更新日志</span><!--]--></a></li><li class="" data-v-4ba09fef><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-4ba09fef data-v-7e03ec29><!--[--><span data-v-7e03ec29>Playground</span><!--]--></a></li><!--]--></ul></nav><!----><div class="VPNavAppearance VPNavBarAppearance appearance" data-v-21941f7c data-v-f5ba90e0><!----><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-label="Appearance" aria-checked="false" data-v-f5ba90e0 data-v-dd1ff0a1 data-v-cbe52c7c><span class="check" data-v-cbe52c7c><span class="icon" data-v-cbe52c7c><!--[--><span class="vpi-sun sun" aria-hidden="true" data-v-dd1ff0a1></span><span class="vpi-moon moon" aria-hidden="true" data-v-dd1ff0a1></span><!--]--></span></span></button></div><ul class="VPSocialLinks VPNavSocialLinks VPNavBarSocialLinks social-links" data-v-21941f7c data-v-552b8346 data-v-677dc98a><!--[--><li data-v-677dc98a><a class="VPSocialLink no-icon" href="https://github.com/Tencent/tmagic-editor" aria-label="github" target="_blank" rel="me noopener" data-v-677dc98a data-v-9979aee9><span class="vpi-simple-icons-github" data-v-9979aee9 data-v-8056d6c9></span></a></li><!--]--></ul><!----><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="Menu" aria-expanded="false" data-v-21941f7c data-v-5bed391b><span class="container" aria-hidden="true" data-v-5bed391b><span class="top" data-v-5bed391b></span><span class="middle" data-v-5bed391b></span><span class="bottom" data-v-5bed391b></span></span></button></div></div></div></div><div class="divider" data-v-21941f7c><div class="divider-line" data-v-21941f7c></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-30dd6aed data-v-194cf01f><div class="container" data-v-194cf01f><button type="button" class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-194cf01f><span class="vpi-align-left menu-icon" aria-hidden="true" data-v-194cf01f></span><span class="menu-text" data-v-194cf01f>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-allow-mismatch="style" data-v-194cf01f data-v-5b4c2295><button type="button" data-v-5b4c2295>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-30dd6aed data-v-86dd7c4e><div class="curtain" data-v-86dd7c4e></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-86dd7c4e><span class="visually-hidden" id="sidebar-aria-label" data-v-86dd7c4e> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-e9f7a9fe><section class="VPSidebarItem level-0 has-active" data-v-e9f7a9fe data-v-83833344><div class="item" data-v-83833344><div class="indicator" data-v-83833344></div><h2 class="text" data-v-83833344>@tmagic/core</h2><!----></div><ul class="items" data-v-83833344><li data-v-83833344><!--[--><div class="VPSidebarItem level-1 is-link is-active has-active" data-v-83833344><div class="item" data-v-83833344><div class="indicator" data-v-83833344></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/core/app.html" aria-current="page" data-v-83833344><!--[--><p class="text" data-v-83833344>App</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-83833344><div class="item" data-v-83833344><div class="indicator" data-v-83833344></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/core/node.html" data-v-83833344><!--[--><p class="text" data-v-83833344>Node</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-83833344><div class="item" data-v-83833344><div class="indicator" data-v-83833344></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/core/page.html" data-v-83833344><!--[--><p class="text" data-v-83833344>Page</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-83833344><div class="item" data-v-83833344><div class="indicator" data-v-83833344></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/core/eventHelper.html" data-v-83833344><!--[--><p class="text" data-v-83833344>EventHelper</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-83833344><div class="item" data-v-83833344><div class="indicator" data-v-83833344></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/core/env.html" data-v-83833344><!--[--><p class="text" data-v-83833344>Env</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-83833344><div class="item" data-v-83833344><div class="indicator" data-v-83833344></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/core/iteratorContainer.html" data-v-83833344><!--[--><p class="text" data-v-83833344>IteratorContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-83833344><div class="item" data-v-83833344><div class="indicator" data-v-83833344></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/core/flowState.html" data-v-83833344><!--[--><p class="text" data-v-83833344>FlowState</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-83833344><div class="item" data-v-83833344><div class="indicator" data-v-83833344></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/core/devtoolApi.html" data-v-83833344><!--[--><p class="text" data-v-83833344>DevtoolApi</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-83833344><div class="item" data-v-83833344><div class="indicator" data-v-83833344></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/core/utils.html" data-v-83833344><!--[--><p class="text" data-v-83833344>工具函数</p><!--]--></a><!----></div><!----></div><!--]--></li></ul></section></div><div class="no-transition group" data-v-e9f7a9fe><section class="VPSidebarItem level-0" data-v-e9f7a9fe data-v-83833344><div class="item" data-v-83833344><div class="indicator" data-v-83833344></div><h2 class="text" data-v-83833344>@tmagic/data-source</h2><!----></div><ul class="items" data-v-83833344><li data-v-83833344><!--[--><div class="VPSidebarItem level-1 is-link" data-v-83833344><div class="item" data-v-83833344><div class="indicator" data-v-83833344></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/data-source/dataSourceManager.html" data-v-83833344><!--[--><p class="text" data-v-83833344>DataSourceManager</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-83833344><div class="item" data-v-83833344><div class="indicator" data-v-83833344></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/data-source/dataSource.html" data-v-83833344><!--[--><p class="text" data-v-83833344>DataSource</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-83833344><div class="item" data-v-83833344><div class="indicator" data-v-83833344></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/data-source/httpDataSource.html" data-v-83833344><!--[--><p class="text" data-v-83833344>HttpDataSource</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-83833344><div class="item" data-v-83833344><div class="indicator" data-v-83833344></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/data-source/observedData.html" data-v-83833344><!--[--><p class="text" data-v-83833344>观察者数据类</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-83833344><div class="item" data-v-83833344><div class="indicator" data-v-83833344></div><a class="VPLink link link" href="/tmagic-editor/docs/runtime-api/data-source/utils.html" data-v-83833344><!--[--><p class="text" data-v-83833344>工具函数</p><!--]--></a><!----></div><!----></div><!--]--></li></ul></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-30dd6aed data-v-67626bf1><div class="VPDoc has-sidebar has-aside" data-v-67626bf1 data-v-d7746812><!--[--><!--]--><div class="container" data-v-d7746812><div class="aside" data-v-d7746812><div class="aside-curtain" data-v-d7746812></div><div class="aside-container" data-v-d7746812><div class="aside-content" data-v-d7746812><div class="VPDocAside" data-v-d7746812 data-v-c57c5106><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-c57c5106 data-v-44783068><div class="content" data-v-44783068><div class="outline-marker" data-v-44783068></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-44783068>On this page</div><ul class="VPDocOutlineItem root" data-v-44783068 data-v-78fca9da><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-c57c5106></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-d7746812><div class="content-container" data-v-d7746812><!--[--><!--]--><main class="main" data-v-d7746812><div style="position:relative;" class="vp-doc _tmagic-editor_docs_runtime-api_core_app" data-v-d7746812><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="setpagefragment" tabindex="-1">setPageFragment <a class="header-anchor" href="#setpagefragment" aria-label="Permalink to “setPageFragment”">​</a></h3><ul><li><p><strong>参数:</strong></p><ul><li><code>{MComponent | MContainer} config</code> 页面片容器配置</li><li><code>{boolean} [force]</code> 是否强制重建,默认 <code>false</code></li></ul></li><li><p><strong>返回:</strong></p><ul><li><code>{void}</code></li></ul></li><li><p><strong>详情:</strong></p><p>按页面片容器的 <code>pageFragmentId</code> 同步 <code>pageFragments</code> 中的页面片实例。容器新增、关联/切换/取消关联页面片时都需要调用,否则容器拿不到页面片内容。</p><p>默认在已关联同一个页面片时保持不变,避免容器每次更新都重建页面片;<code>force</code> 为 <code>true</code> 时即使关联的是同一个页面片也会重建,用于页面重建时拿到最新的页面片内容。</p></li></ul><h3 id="deletepagefragment" tabindex="-1">deletePageFragment <a class="header-anchor" href="#deletepagefragment" aria-label="Permalink to “deletePageFragment”">​</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></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><tr><td><code>page-fragments-change</code></td><td>调用 <code>setPageFragment</code> / <code>deletePageFragment</code> 导致页面片实例创建、替换或删除时触发</td><td><code>({ id: Id, pageFragmentId?: Id })</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-d7746812 data-v-5edf9672><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-5edf9672><span class="visually-hidden" id="doc-footer-aria-label" data-v-5edf9672>Pager</span><div class="pager" data-v-5edf9672><!----></div><div class="pager" data-v-5edf9672><a class="VPLink link pager-link next" href="/tmagic-editor/docs/runtime-api/core/node.html" data-v-5edf9672><!--[--><span class="desc" data-v-5edf9672>Next page</span><span class="title" data-v-5edf9672>Node</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-30dd6aed data-v-58cefbd9><div class="container" data-v-58cefbd9><p class="message" data-v-58cefbd9>Powered by 腾讯视频会员平台技术中心</p><p class="copyright" data-v-58cefbd9>Copyright (C) 2025 Tencent.</p></div></footer><!--[--><!--]--></div></div>
</body>
</html>