7qb 中文文档教程

Question

七巧板

最灵活的云项目平台

安装

npm i 7qb -g

因为七巧板引用了 Vue.js, Vue Router, Ant Design of Vue, Monaco Editor 等 NPM 包，为了减少最终项目的代码大小，需要再目标项目编译的同时，进行混合编译。为此需要对 vue 编译配置进行如下调整。

// 将下方代码追加到 vue.config.js
module.exports = {
    // 将 node_modules 中 七巧板 代码编译到本地项目 
    transpileDependencies: ["7qb/src"],
};

使用

在已有 Vue.js 项目中引用七巧板项目

// 引用七巧板内核
import { Qqb } from '7qb';

// 安装七巧板插件
Vue.use(Qqb);

// 关联七巧板项目
const qqb = new Qqb({
  // 云端项目标识
  // 注意：标识需要根据项目不同进行替换
  id: "24875521-ec64-4ed3-8862-2f0a1ba02c70",
});

// 注意：
// 七巧板需要基于 vue-router 运行

// 启动 Vue 应用
const vm = new Vue({ /* ...已有Vue项目的路由与应用等参数... */ });
// 注入七巧板
qqb.setup(vm);

目录结构

src
 ├─actions                                            // 自定义动作目录
 │  ├─jdt-example                                     // 自定义动作范例
 │  │      index.js                                   // 动作 Meta 声明
 │  │      jdt-example.js                             // 动作逻辑脚本
 │  │      jdt-example-props-component.vue            // 动作设置界面
 │  └─index.js                                        // 自定义扩展动作引用列表
 └─widgets                                            // 自定义组件目录
    ├─jdt-example                                     // 自定义组件范例
    │      index.js                                   // 组件 Meta 声明
    │      jdt-example-component.vue                  // 组件实体代码
    │      jdt-example-props-control-schema.js        // 组件设置 Meta 声明
    └─index.js                                        // 自定义扩展组件引用列表

组件 Meta 声明

/**
 * 组件配置
 * src/widgets/jdt-example/index.js
 */
export default {
    // 组件标识
    id: "jdt-widget-example",
    // 设计语言
    framework: "eleme",
    // 组件名称
    name: "自定义组件",
    // 组件图标
    iconUrl: "//7qb.jd.com/assets/...",
    // 组件分类
    kind: "数据",
    // 继承组件（可选项）
    extends: [/* "父级组件 id" */],
    // 组件特征描述（可选项）
    schema({ $7qb }) {
        return {
            // 是否是动态容器（可选项）
            container: false,
            // 子集组件列表（可选项）
            children: [],
            // 扩展属性（可选项）
            props: {
              /* 依据组件需要，自定义属性 */
            }
        }
    },
    // 支持事件（可选项）
    events({ $7qb, schema }) {
        return {
            ready: { title: "准备就绪" }
        }
    },
    // 模拟数据（可选项）
    mock({ $7qb, schema }) { return Mock.mock('@string') },
    // 当插入时触发
    insert({ $7qb, schema }) {}
    // 当插入子节点时触发（可选项）
    insertChild({ $7qb, schema, originalSchema, childSchema, originalChildSchema }) { },
    // 当删除子节点时触发（可选项）
    deleteChild({ $7qb, schema, childSchema }) { },
    // 当拷贝时触发（可选项）
    copy({ $7qb, newSchema, schema }) { },
    // 创建页面包裹布局处理（可选项）
    createLayoutBundleSchema({ projectSchema, contentSchema }) { }
    // 在组件列表中隐藏（可选项）
    hidden: false,
    // 不建议使用（可选项）
    deprecated: false,
    // 当不建议使用组件进入编辑界面触发（可选项）
    upgrade({ $7qb, schema }) { },
    // 展业组件 VueComponent
    component,
    // 编辑器占位组件（可选项）
    blockComponent,
    // 组件设置 Meta 声明
    propsControlSchema,
    // 附加至子集组件的设置 Meta 声明（可选项）
    childPropsControlSchema,
}

动作 Meta 声明

/**
 * 动作配置
 * src/actions/jdt-example/index.js
 */
export default {
    // 动作标识
    id: "jdt-action-example",
    // 动作名称
    name: "自定义动作",
    // 动作说明
    description: "自定义动作的功能描述",
    // 动作特征描述
    schema({ $7qb }) {
        return {
            // 动作属性
            props: {
                /* 依据动作需要，自定义属性 */
            }
        }
    },
    // 动作逻辑 class
    logic,
    // 配置面板组件 VueComponent
    propsComponent,
}

npm install
npm run build:render-ant
npm run build:render-eleme
npm run marge-render
npm run build:editor

cp -f -r ./dist $BUILD/resource echo "bash /home/export/shell/run.sh" > $BUILD/bin/start.sh