场景化开发

文件目录

// 场景目录
| -- packages/scene/src/scene
    | -- comps   // 控件场景目录
        | -- h5 
        | -- pc  
        | -- index.ts // 控件场景统一导出
    | -- pages   // 页面场景目录
        | -- h5 
        | -- pc  
        | -- index.ts // 页面场景统一导出

场景开发

• 场景创建步骤
  • 1、在对应的场景目录下创建文件夹，声明配置文件
  • 2、在 packages/scene/src/scene/[comps|pages]/index.ts 声明导出控件
  • 3、重新 yarn export 生成 packages/scene/src/index.ts 文件

• 场景包内用到外部的组件、方法需要在主工程统一注册

/**
 * editor/src/editor/utils/registerMetaPlugin.js
 */
export const api = {
  // 注册的方法
}
export const components = {
  // 注册的控件
}

• 场景化包内部使用

/**
 * 配置文件 config.ts
 * demo: packages/scene/src/scene/pages/pc/TableList/config.ts
 */
// 配置文件中需要声明该场景内部使用到的方法和组件
export default defineSceneFlowConfig({
  api: ["useActions", "方法名称"], 
  customComponent: ["组件名称"],
  factory: ["Table", "控件"], // 场景内使用到的控件 
  ...
})

/**
 * 场景内部使用
 * demo: packages/scene/src/scene/pages/pc/TableList/useCreatePage.tsx
 */
export const useCreatePage: useLoadWorkFlow(props) {
  // 从props.plugins.meta导出使用
  const { api, customComponent } = props.plugins.meta || {};
  const action = api.useActions();
}