创建一个模块

模块资源加载

通过 load 方法加载模块资源。data 参数应为数组格式。

ptah.$load(RESOURCE_TYPE.BLOCKS, data);

模块数据结构

模块数据结构定义了模块的类型、标题以及包含的项。以下是一个示例：

json

[
  {
    "title": "Web Module",
    "items": [
      {
        "title": "Common",
        "icon": "icon-detail",
        "items": [UiButton, UiBox]
      },
      {
        "title": "Layout",
        "icon": "icon-detail",
        "items": [UiGrid]
      }
    ]
  }
]

创建一个按钮模块

步骤

新建 UiButton 目录 用于存放模块相关代码：

UiButton
  ├─ index.js
  ├─ index.vue
  └─ schema.js

创建 index.js

index.js 文件用于导出组件及其配置。

import Component from './index.vue';
import Schema from './schema';

export default {
    Component,
    Schema
};

创建 schema.js

schema.js 文件定义了模块的属性及其配置。以下是一个按钮模块的配置示例：

import {
    createSlot,
    createGroupProp,
    createObjectProp,
    createArrayProp,
    createStringProp,
    createNumberProp,
    createBooleanProp
} from '@ptahjs/creative-vue';

export default () => {
    return {
        type: 'UiButton',
        title: 'Button',
        // icon: "input-cursor-move",
        // image: "./path.png",
        props: [
            createStringProp({
                component: 'PropString',
                field: 'field1',
                label: 'Box1'
            }),
            createNumberProp({
                component: 'PropNumber',
                field: 'field2',
                label: 'Width',
                defaultValue: 0
            }),
            createArrayProp({
                field: 'field3',
                label: 'Select',
                defaultValue: '1',
                options: [
                    { label: 'primary', value: '1' },
                    { label: 'secondary', value: '2' },
                    { label: 'dashed', value: '3' },
                    { label: 'outline', value: '4' },
                    { label: 'text', value: '5' }
                ]
            }),
            createGroupProp({
                label: 'Group',
                props: [
                    createStringProp({
                        field: 'field4',
                        label: 'Box2'
                    }),
                    createNumberProp({
                        field: 'field5',
                        label: 'Width',
                        defaultValue: 0
                    })
                ]
            }),
            createBooleanProp({
                label: 'Toggle',
                field: 'field6',
                defaultValue: true
            }),
            createObjectProp({
                field: 'field9',
                label: 'Object',
                defaultValue: {},
                props: [
                    createStringProp({
                        field: 'field10',
                        label: 'Obj-1'
                    }),
                    createNumberProp({
                        field: 'field11',
                        label: 'Obj-2',
                        defaultValue: 0
                    })
                ]
            })
        ],
        events: [
            {
                type: 'click',
                title: 'CLICK'
            },
            {
                type: 'onload',
                title: 'LOAD'
            }
        ],
        slots: [
            createSlot({
                title: 'slot1',
                props: []
            })
        ]
    };
};

根据上述配置，生成的数据结构如下：

{
  field1: '',
  field2: 0,
  field3: 1,
  field4: '',
  field5: 0,
  field6: true,
  field9: {
    field10: '',
    field11: 0
  }
}

每个方法都有一个 component 属性，用于自定义参数组件时使用。下一章将详细讲解如何使用这些组件。

createStringProp({
  component: "PropString"
}),

创建 index.vue

index.vue 文件定义了模块的 UI 组件。以下是一个按钮组件的示例：

vue

<template>
    <!-- ref 绑定当前模块的 ID。复杂交互将使用组件的 ref 函数（如有需要）。 -->
    <div :ref="id" class="ui-button">
        <button @click="onTestEventClick">Button</button>
    </div>
</template>

<script>
import { defineComponent } from 'vue';
import { useUI, useExecuteEvent } from '@ptahjs/creative-vue';

export default defineComponent({
    name: 'UiButton',
    props: {
        id: {
            type: String,
            default: ''
        }
    },
    setup(props) {
        // 初始化当前 UI 模块，模块必须调用此函数
        const { module } = useUI(props.id);

        const { execute } = useExecuteEvent(module);

        // 测试点击事件
        const onTestEventClick = (e) => {
            execute('click', (res) => {
                console.log('res', res);
            });
        };

        return { onTestEventClick };
    }
});
</script>

备注

Web、Mobile、Canvas 的模块开发过程是类似的。

创建 Flows 模块

步骤

新建 UiAjax 目录 用于存放模块相关代码：

UiAjax
  ├─ action.js
  ├─ index.js
  ├─ index.vue
  └─ schema.js

创建 index.js

index.js 文件用于导出组件、模式和动作函数。

import Component from './index.vue';
import Schema from './schema';
import Action from './action';

export default {
    Component,
    Schema,
    Action
};

创建 action.js

action.js 文件定义了模块的行为逻辑。以下是一个 AJAX 模块的示例：

export default (data) => {
    const { next } = data;

    setTimeout(() => {
        next(`<div>ajax</div>`);
    }, 2000);
};

action 参数

参数名	描述
app	ptah 实例
next	执行完成后传递到下一个任务
item	当前模块信息
params	参数
previousResult	上一个任务的返回结果
run	运行子流程任务
terminate	结束整个流程
runCode	执行 JS 代码
goTo	跳转到指定任务
count	执行次数

创建 3D 模块

步骤

新建 UiCube 目录 用于存放模块相关代码：

UiCube
  ├─ component.js
  ├─ index.js
  └─ schema.js

创建 index.js

index.js 文件用于导出组件及其配置。

import Component from './component';
import Schema from './schema';

export default {
    Component,
    Schema
};

创建 component.js

component.js 文件定义了模块的 3D 组件模板及其设置。以下是一个 3D 立方体的示例：

import { BoxGeometry, MeshBasicMaterial, Mesh } from 'three';

export default {
    // 模块模板
    template(engine, data) {
        const { props } = data;
        const geometry = new BoxGeometry(1, 1, 1);
        const material = new MeshBasicMaterial({ color: 0x00ff00 });
        const cube = new Mesh(geometry, material);
        return cube;
    },
    // 模块的后续操作和处理
    setup(engine, entity) {
        engine.on('change', ({ type, data }) => {
            entity.position.x = data.value;
        });
    }
};

创建一个模块 ​

模块资源加载 ​

模块数据结构 ​

创建一个按钮模块 ​

步骤 ​

创建 Flows 模块 ​

步骤 ​

创建 3D 模块 ​

步骤 ​

创建一个模块

模块资源加载

模块数据结构

创建一个按钮模块

步骤

创建 Flows 模块

步骤

创建 3D 模块

步骤