Skip to content

App

App@tmagic/core 的核心类,继承自 EventEmitter,用于管理整个应用的状态和配置。

构造函数

typescript
new App(options: AppOptionsConfig)

AppOptionsConfig

参数类型说明
uastringUser Agent 字符串
envEnv环境信息实例
configMAppDSL 配置
platform'editor' | 'mobile' | 'tv' | 'pc'平台类型
jsEngineJsEngineJS 引擎类型
designWidthnumber设计稿宽度
curPageId当前页面 ID
useMockboolean是否使用 Mock 数据
disabledFlexibleboolean是否禁用 flexible
pageFragmentContainerTypestring | string[]页面片段容器类型
iteratorContainerTypestring | string[]迭代器容器类型
transformStyle(style: Record<string, any>) => Record<string, any>样式转换函数
requestRequestFunction请求函数
dataSourceManagerInitialDataDataSourceManagerData数据源管理器初始数据
nodeStoreInitialData() => any节点存储初始数据工厂函数
errorHandlerErrorHandler错误处理器
beforeEventHandlerBeforeEventHandler事件处理前钩子
afterEventHandlerAfterEventHandler事件处理后钩子

属性

属性类型说明
envEnv环境信息实例
dslMAppDSL 配置
codeDslCodeBlockDSL代码块配置
dataSourceManagerDataSourceManager | undefined数据源管理器
pagePage | undefined当前页面
pageFragmentsMap<Id, Page>页面片段集合
platformstring平台类型
jsEngineJsEngineJS 引擎类型
componentsMap<string, any>已注册的组件
eventHelperEventHelper事件助手实例

静态方法

registerNode

  • 参数:

    • {string} type 节点类型
    • {typeof Node} NodeClass 节点类
  • 返回:

    • {void}
  • 详情:

    注册自定义节点类型,用于扩展节点功能。

  • 示例:

typescript
import App from '@tmagic/core';

class CustomNode extends Node {
  // 自定义实现
}

App.registerNode('custom', CustomNode);

实例方法

setEnv

  • 参数:

    • {string} ua User Agent 字符串
  • 返回:

    • {void}
  • 详情:

    设置环境信息,会根据 UA 字符串更新 env 属性。

  • 示例:

typescript
import App from '@tmagic/core';

const app = new App({});
app.setEnv(navigator.userAgent);

setDesignWidth

  • 参数:

    • {number} width 设计稿宽度
  • 返回:

    • {void}
  • 详情:

    设置设计稿宽度,用于响应式布局计算。

  • 示例:

typescript
app.setDesignWidth(375);

setConfig

  • 参数:

    • {MApp} config DSL 配置
    • {Id} curPage 当前页面 ID(可选)
    • {DataSourceManagerData} initialData 初始数据(可选)
  • 返回:

    • void
  • 详情:

    设置 DSL 配置,会初始化数据源管理器和当前页面。

  • 示例:

typescript
app.setConfig({
  id: 'app_1',
  type: 'app',
  items: [
    {
      id: 'page_1',
      type: 'page',
      items: []
    }
  ]
});

setPage

  • 参数:

    • {Id} id 页面 ID
  • 返回:

    • {void}
  • 详情:

    切换当前页面。

  • 示例:

typescript
app.setPage('page_2');

deletePage

  • 返回:

    • {void}
  • 详情:

    删除当前页面。

getPage

  • 参数:

    • {Id} id 页面 ID(可选)
  • 返回:

    • {Page | undefined}
  • 详情:

    获取指定 ID 的页面,不传 ID 则返回当前页面。

  • 示例:

typescript
const page = app.getPage('page_1');

getNode

  • 参数:

    • {Id} id 节点 ID
    • {GetNodeOptions} options 获取选项(可选)
  • 返回:

    • {Node | undefined}
  • 详情:

    获取指定 ID 的节点。

  • GetNodeOptions:

参数类型说明
iteratorContainerIdId[]迭代器容器 ID 数组
iteratorIndexnumber[]迭代器索引数组
pageFragmentContainerIdId页面片段容器 ID
strictboolean是否严格模式
  • 示例:
typescript
const node = app.getNode('button_1');

registerComponent

  • 参数:

    • {string} type 组件类型
    • {any} Component 组件
  • 返回:

    • {void}
  • 详情:

    注册组件。

  • 示例:

typescript
app.registerComponent('my-button', MyButton);

unregisterComponent

  • 参数:

    • {string} type 组件类型
  • 返回:

    • {void}
  • 详情:

    取消注册组件。

resolveComponent

  • 参数:

    • {string} type 组件类型
  • 返回:

    • {any}
  • 详情:

    解析组件,返回已注册的组件。

runCode

  • 参数:

    • {Id} codeId 代码块 ID
    • {object} params 参数
    • {any[]} args 额外参数
    • {FlowState} flowState 流程状态(可选)
    • {Node} node 节点(可选)
  • 返回:

    • {any}
  • 详情:

    执行代码块。

  • 示例:

typescript
const result = await app.runCode('code_1', { key: 'value' });

runDataSourceMethod

  • 参数:

    • {Id} dsId 数据源 ID
    • {string} methodName 方法名
    • {object} params 参数
    • {any[]} args 额外参数
    • {FlowState} flowState 流程状态(可选)
    • {Node} node 节点(可选)
  • 返回:

    • {any}
  • 详情:

    执行数据源方法。

  • 示例:

typescript
const result = await app.runDataSourceMethod('ds_1', 'fetchData', { id: 123 });

destroy

  • 返回:

    • {void}
  • 详情:

    销毁应用实例,清理所有资源。

  • 示例:

typescript
app.destroy();

Powered by 腾讯视频会员平台技术中心