如何进行业务组件开发_移动开发平台 mPaaS(mPaaS)-阿里云帮助中心

本文针对不同的前端组件开发框架，提供相应的组件开发脚手架供您参考使用，并提供组件开发指导。您可以基于我们提供的脚手架进行开发，也可以使用您自己的组件开发框架完成组件开发。

组件的开发形式多样，开发者可以自由定制插件、扩展等，但必须确保打包上传的文件符合打包规范，具体参见组件资源上传规范。

业务组件开发脚手架

本文中提供的脚手架（点击相应链接可下载）包含了组件开发的基础代码骨架、组件调试、组件打包等功能。

Vue 组件

画布 Vue 组件开发脚手架适用于使用 Vue 技术栈开发的业务组件。

开发步骤：

组件开发
在 src/components 文件夹下开发此组件，其中目录说明为：
```
.
├── index.js 模块文件
├── mock.json 模块可配置的属性的 mock 测试数据
└── schema.json 模块可配置的属性数据
```
您也可以在 src/components 下新增其他的目录或文件，根据资源、功能划分进行调整。
组件调试
运行 npm start，可打开 http://localhost:8080/ 页面，查看组件是否符合预期。
组件打包
运行 npm run build，可将组件进行打包，并将 mock.json 和 schema.json 文件拷贝到打包后的文件夹中，将会生成一个 dist 文件夹，即组件的打包目录。
组件上传
通过智能搭建控制台的组件管理模块上传打包好的文件，并填写组件相关信息。

React 组件

画布 React 组件开发脚手架适用于使用 React 技术栈开发的业务组件。

注意

React 16 及以下版本的组件不能与 React 17 及以上版本共存，否则 React 17 的组件会无法响应点击事件。建议全部使用 React 16 及以下版本或 React 17 版本来开发 React 组件。

开发步骤：

组件开发
在 src/components 文件夹下开发此组件，其中目录说明如下：
```
.
├── index.js 模块文件
├── mock.json 模块可配置的属性的 mock 测试数据
└── schema.json 模块可配置的属性数据
```
您也可以在 src/components 下新增其他的目录或文件，根据资源、功能划分进行调整。
组件调试
运行 npm start，可打开 http://localhost:3000/ 页面，查看组件是否符合预期。
组件打包
运行 npm run build，可将组件进行打包，并将 mock.json 和 schema.json 文件拷贝到打包后的文件夹中，将会生成一个 dist 文件夹，即组件的打包目录。
组件上传
通过智能搭建控制台的组件管理模块上传打包好的文件，并填写组件相关信息。

Rax 组件

画布 Rax 组件开发脚手架适用于使用 Rax 技术栈开发的业务组件。

开发步骤：

组件开发

在 src 文件夹下开发此组件，其中目录说明如下：

.
├── index.tsx 组件文件
├── index.css 组件样式
├── mock.json 组件可配置的属性的 mock 测试数据
└── schema.json 组件可配置的属性数据

您也可以在 src 下新增其他的目录或文件，根据资源、功能划分进行调整。

组件调试
运行 npm start，可打开 http://localhost:3333/ 页面，查看组件是否符合预期。
组件打包
运行 npm run build，可将组件进行打包，并将 mock.json 和 schema.json 文件拷贝到打包后的文件夹中，将会生成一个 dist 文件夹，即组件的打包目录。
组件上传
通过智能搭建控制台的组件管理模块上传打包好的文件，并填写组件相关信息。

原生 JS 组件

画布原生 JS 组件开发脚手架适用于使用原生 JS 开发的业务组件。

开发步骤：

组件开发

在 src 文件夹下开发此组件，其中目录说明如下：

.
├── index.html 模块布局
├── index.css 模块样式
├── index.js 模块逻辑
├── mock.json 模块可配置的属性的 mock 测试数据
└── schema.json 模块可配置的属性数据

您也可以在 src 下新增其他的目录或文件，根据资源、功能划分进行调整。

组件调试
运行 npm start，可打开 http://localhost:3000/ 页面，查看组件是否符合预期。
组件打包
运行 npm run build，可将组件进行打包，并将 mock.json 和 schema.json 文件拷贝到打包后的文件夹中，将会生成一个 dist 文件夹，即组件的打包目录。
组件上传
通过智能搭建控制台的组件管理模块上传打包好的文件，并填写组件相关信息。

组件资源上传规范

在完成组件开发后，打包上传组件资源时，需要遵守资源文件上传规范。

bundle.js 文件

Vue & React 组件：按照 CMD（Common Module Definition，通用模块定义）规范导出 Named Module 组件定义，单文件 Bundle 打包，格式如下：

define('moduleName', [], function (require, exports, module) {
  module.exports = function 入口函数
})

暴露的入口函数如下：

function render({
  element: string | HTMLElement, // id 选择器/Element
  props: {[key: string]: any}, // props 属性
}) {
  const title = props.title || mock.title;
  // 自定义的组件渲染逻辑
}

原生 JS 组件：打包为可执行的 HTML 文件即可。
Rax 组件：按照 rax-component 打包规范打包即可。

schema.json 文件

schema.json 用来写业务组件的可配置属性。schema.json 文件的基本格式如下：

{
  "title": "Schema",
  "type": "object",
  "properties": {
    ... // 字段属性值
  }
}

schema.json 生成方法：

打开在线表单设计器。
搭建组件的属性配置表单。
复制 schema 到项目的 schema.json 即可。

schema.json 文件中会有一些比较特殊的配置项，请参考下述说明进行配置。

情况 1

针对自定义表单组件，schema.json 会有一个用于打开表单生成器的配置项，此时新增一个 x-component:"FormGenerator" 即可，编辑器会特殊解析。

mPaaS 前端需要将表单生成器封装为一个完整的组件，其中定制好需要的表单组件、提交按钮等，使用的组件参见表单设计器开发指南。

画布侧如果解析到 x-component:"FormGenerator"，就会调用表单生成器。

schema 如下：

"xxx": {
  "title": "设计表单",
  "type": "object",
  "x-component": "FormGenerator"  // 此处 FormGenerator 仅作为示例，可以换成其他名字，需要在 mPaaS 和画布前端保持一致
}

情况 2

针对数据源下拉列表，schema.json 会有一个用于给该业务组件选择合适的数据源接口的配置项。此时，新增一个下拉列表即可，编辑器会特殊解析。

schema 如下：

"xxx": {
  "title": "数据源", // 这里是在编辑器的右侧面板上显示的
  "name": "dataSource",
  "type": "string",
  "x-decorator": "FormItem",
  "x-component": "Select",
    }

情况 3

针对数据源的参数表单，schema.json 会有一个配置项是显示该业务组件的数据源接口所需要的参数的，该参数是在创建接口时所填写。此时，新增一个 x-component:"GetParamsData" 即可，编辑器会特殊解析。

该面板上的参数和参数值会在调用数据源接口的时候分别作为参数 key 和 value 传递。

schema 如下：

"xxx": {
  "type": "array",
  "x-component": "GetParamsData",
    }

情况 4

针对提交数据下拉列表，schema.json 会有一个用于给该业务组件选择合适的提交数据接口的配置项。此时，新增一个下拉列表即可，编辑器会特殊解析。

schema 如下：

"xxx": {
  "title": "提交接口", // 这里是在编辑器的右侧面板上显示的
  "name": "dataSource",
  "type": "string",
  "x-decorator": "FormItem",
  "x-component": "Select",
    }

情况 5

针对提交数据的参数表单，schema.json 会有一个配置项是显示该业务组件的数据源接口所需要的参数的，该参数是在创建接口时所填写。此时，新增一个 x-component:"SaveParamsData" 即可，编辑器会特殊解析。

该面板上的参数和参数值会在调用提交数据接口的时候分别作为参数 key 和 value 传递。

schema 如下：

"xxx": {
  "type": "array",
  "x-component": "SaveParamsData"
    }

情况 6

业务组件中有数组列表。schema.json 中会有一个配置项是用于配置数组列表中的数据的。此时，新增一个 x-component:"ArrayCards" 即可。

这样即可在编辑器中修改数组列表中的每一项和排序等。

schema 如下：

"xxx": {
      "type": "array",
      "x-component": "ArrayCards",
      "x-component-props": {
        "title": "列表" // 这里的标题为显示在编辑器中的，此时的“列表”仅为示例
      },
      "items": { // 这里的“items”为固定的
        "type": "object",
        "properties": {
          "title": {
            "title": "标题",
            "type": "string",
            "x-component": "Input",
            "required": true
          },
          ... // 字段属性
        }
      }
    }

mock.json 文件

mock.json 文件内容格式如下：

{
  "title":"标题"，
  ...其他字段
}