应用实例 API

createPtah()

该方法用于创建一个新的应用实例。通过此实例，您可以访问应用的各种功能和配置项。

• 详细说明
  id 是必填参数，用于唯一标识每个应用实例，确保不同实例之间的隔离。应用的其他设置可以根据实际需求进行配置。 licenseKey 是必填参数，授权码

• 参数

  • id (String): 应用实例的唯一标识符，不能为空。
  • licenseKey (String): 应用实例的授权码，不能为空。

• 示例

  import { createPtah } from '@ptahjs/creative-vue';
  
  const app = createPtah({
      id: 'app-1', // 设置应用实例的唯一ID
      licenseKey: '******'
  });

app.id

该属性用于获取当前应用实例的唯一标识符。通过此属性，您可以方便地访问和验证当前应用实例。

• 详细说明
  app.id 返回应用实例的 id 值，帮助开发者在多实例环境中进行区分。

• 示例

  console.log(app.id); // 输出：'ptah-app-1'

app.modeType

该属性返回当前应用所使用的模式类型。可以用来区分应用的运行模式，帮助进行不同场景下的配置和渲染。

• 详细说明
  modeType 返回当前应用的模式，如 WEB，MOBILE，CANVAS 等，您可以根据需要切换不同的模式。

• 示例

  console.log(app.modeType); // 输出：'WEB'

  参考 模式类型 获取更多信息。

app.$load()

该方法用于加载应用所需的各种资源。在编辑模式下，您需要加载积木块数据、场景参数以及事件等。

• 详细说明
  app.$load() 允许您加载各种资源，支持动态加载不同类型的资源，以便在运行时灵活扩展应用功能。

• 参数

  • resourceType (String): 资源的类型（如 BLOCKS，SCENE_PROPS，SCENE_EVENTS）。
  • data (Array): 要加载的资源数据。

• 示例

  import { RESOURCE_TYPE } from '@ptahjs/creative-vue';
  
  // 加载模块、场景参数和事件
  app.$load(RESOURCE_TYPE.BLOCKS, []);
  app.$load(RESOURCE_TYPE.SCENE_PROPS, []);
  app.$load(RESOURCE_TYPE.SCENE_EVENTS, []);

  参考 资源类型 获取更多信息。

app.$proxyData()

该方法用于代理应用中的数据，将其转换为响应式数据。适用于 Vue 3 项目，可以通过数据代理轻松实现响应式管理。

• 详细说明
  app.$proxyData() 接收一个函数，该函数返回代理后的数据，确保数据能够在视图中实时更新。

• 示例

  app.$proxyData((data) => reactive(data));

app.$lifecycle()

生命周期管理方法，通常用于插件开发中。通过该方法，插件可以在应用的特定生命周期阶段修改数据，帮助实现更精细的控制。

• 详细说明
  app.$lifecycle() 可以注册钩子函数，用于在应用的不同生命周期阶段修改数据。例如，可以在数据转换前进行干预，或者在数据加载完成后执行其他操作。

• 参数

  • lifecycleType (String): 生命周期类型，例如 BEFORE_TRANSFORM_DATA。
  • callback (Function): 钩子函数，用于执行自定义操作。

• 示例

  import { LIFECYCLE_TYPE } from '@ptahjs/creative-vue';
  
  export default {
      name: 'TestPlugin',
      install(engine) {
          engine.$lifecycle.notify(LIFECYCLE_TYPE.BEFORE_TRANSFORM_DATA, (data) => {
              console.log('BEFORE_TRANSFORM_DATA', data);
              return data; // 修改数据并返回
          });
      }
  };

  参考 生命周期类型 获取更多信息。

app.$blocks()

该方法用于加载和动态添加积木块数据。积木块是构建应用的核心模块，您可以通过此方法动态调整模块内容。

• 详细说明
  app.$blocks() 可以加载多个积木块配置，并将其添加到应用中。支持动态更新积木块的数据，适合在编辑模式下使用。

• 示例

  app.$blocks.load([
      {
          title: '远程组件',
          icon: 'icon-detail',
          items: [
              {
                  title: 'A',
                  icon: 'icon-detail',
                  items: [data.data]
              }
          ]
      }
  ]);

  参考 积木块数据 获取更多信息。

app.$vueInstance()

该方法用于将一个 Vue 实例绑定到应用中。通过该方法，您可以在应用中自动注册 Vue 组件及执行其他 Vue 相关操作。

• 详细说明
  app.$vueInstance() 允许在应用中直接注册 Vue 组件，简化了 Vue 实例的管理。

• 示例

  import { createApp } from 'vue';
  import App from './App.vue';
  
  const app = createApp(App);
  ptahInstance.$vueInstance(app);

app.$mode()

该方法用于设置应用的场景模式。通过选择不同的场景模式，您可以控制应用的表现形式，适应不同平台或需求。

• 详细说明
  app.$mode() 接受场景模式作为参数，您可以通过该方法选择不同的扩展场景模式，如 Web、移动端或 3D 等。

• 示例

  import ModeWeb from '@ptahjs/mode-web';
  
  ptahInstance.$mode(ModeWeb);

app.use()

该方法用于将插件或其他功能模块安装到应用中。

• 详细说明
  app.use() 允许在应用中动态安装插件或库，拓展应用的功能。

app.schema()

该方法用于加载schema数据,回显并渲染成页面。

• 详细说明
  app.schema() 允许在应用中动态加载schema数据。

app.mount()

该方法用于挂载应用并启动它。通过 mount() 方法，您可以正式启动应用，进行渲染并处理事件。

• 备注
  带 $ 前缀的方法是内置的插件扩展，支持链式调用，以简化配置过程。

app.unmount()

该方法用于卸载应用实例，停止所有操作。

链式调用支持

您可以通过链式调用一次性完成多个配置和初始化步骤，从而提高代码的简洁性和可读性。

const ptahInstance = createPtah({
    id: 'app-1',
    licenseKey: '******'
})
    .$vue(vueInstance)
    .$mode(ModeWeb)
    .$load(RESOURCE_TYPE.BLOCKS, [])
    .mount();