如何开发和管理自定义组件-云原生应用组装平台 BizWorks(BizWorks)-阿里云帮助中心

您可以通过自定义组件功能上传在线下开发的自定义组件，上传后的自定义组件可以在页面设计器中使用。本文介绍如何开发和管理自定义组件。

开发自定义组件流程说明

开发自定义组件流程说明如下：

环境要求

node版本：14.20.X
npm版本： 6.14.X

开发自定义组件操作步骤

步骤一：下载示例代码

关于如何下载开发模板，请参见下载示例代码。

步骤二：安装依赖

解压下载的zip包，进入工程根目录，执行npm install命令安装依赖。

npm install

步骤三：启动本地应用

执行npm start命令启动本地应用。在工程根目录下执行 npm start 命令启动本地开发服务器，编译成功后终端输出示例如下。

D:\test-xxx >npm start
> @ali/buf-test-materials@1.0.0 start xxx
> gulp start
[15:40:16] Requiring external module xxx
[15:40:20] Using gulpfile D:\test-maxxx
[15:40:20] Starting 'start'...
10% building 0/0 modules 0 active  ?wds?: Project is running at http://localhost:xxx
?wds?: webpack output is served from /
?wds?: Content not from webpack is served from ./
?wds?: 404s will fallback to /index.html
Starting the development server...
10% building 0/3 modules 3 active D:\test-materials\node_modules\awesome-typescript-xxx
Using typescript@3.9.10 from typescript
?atl?: Using tsconfig.json from D:\test-materxxx
94% after seal ?atl?: Checking started in a sexxx
?atl?: Time: 45ms
?wdm?: Hash: 1bd1e7ed58c49acaxxx
Version: webpack 4.46.0
Time: 3520ms
Built at: 2023/02/15 15:40:24
          Asset      Size   Chunks              Chunk Names
...
Compiled successfully.

design-view.js 6.19 KiB design-view [emitted] design-view design-view.js.map 4.45 KiB design-view [emitted] [dev] design-view meta.js 7.8 KiB meta [emitted] meta meta.js.map 6.39 KiB meta [emitted] [dev] meta view.js 6.09 KiB view [emitted] view view.js.map 4.41 KiB view [emitted] [dev] view ?wdm?: Compiled successfully. http://localhost:3200 页面URL后面追加 &__bufInjectFrom__=http%3A%2F%2Flocalho [15:40:24] Finished 'start' after 3.82 s `

步骤四：调试自定义组件

在应用开发过程中，您无需上传本地组件至平台，即可在任意页面设计器中发起对自定义组件的预览及调试。调试步骤如下：

打开任意页面编排设计器。页面编排设计器打开后，左侧显示组件面板（包含布局、基础、表单等分类组件），中央为空白画布区域（提示"拖拽组件或模板到这里"），右侧为属性配置面板。
复制&__bwfInjectFrom__=http%3A%2F%2Flocalhost%3A3200，追加在设计器页面URL的末尾，回车刷新页面后您可以在组件面板区域的自定义组件页签下看到已经加载的自定义的组件。

步骤五：生成自定义组件zip包

执行npm run build命令构建JS文件，脚本会在根目录生成component.zip。在工程根目录下执行 npm run build 命令，完成构建并生成自定义组件 zip 包。

D:\test xxx      >npm run build
> @ali/bwf-test-materials@1.0.0 build D:\test-xxx
> gulp build
[15:46:05] Requiring external module ts-xxx
[15:46:09] Using gulpfile D:\test-materixxxx
[15:46:09] Starting 'build'...
10% building 0/3 modules 3 active D:\test-materials\node_modules\awesom
  Using typescript@3.9.10 from typescript
i ?atl?: Using tsconfig.json from D:/test-materi
92% chunk asset optimization UglifyJSPlugin(node:16072) [DEP0097] DeprecationWarning: Using a domain property
sync_context variant of MakeCallback or the AsyncResource class instead. (Triggered by calling processImmediat
(Use node --trace-deprecation ... to show where the warning was created)
94% after seali ?atl?: Checking started in a separate process...
i ?atl?: Time: 108ms
[15:46:13] Finished 'build' after 3.61 s
> @ali/bwf-test-materials@1.0.0 postbuixx
> gulp zip
[15:46:13] Requiring external module ts-xxx
[15:46:17] Using gulpfile D:\test-materxxxx
[15:46:17] Starting 'zip'...
[15:46:17] Finished 'zip' after 25 ms
D:\test-materials>

步骤六：发布自定义组件（新增自定义组件）

登录BizWorks，在选择平台下拉列表中选中轻应用组装平台。
单击页面右上角图标或其文本框区域，在下拉列表中单击目标项目名称后，单击应用页签。在应用列表页面单击目标轻应用名称。
在目标轻应用导航栏中，单击扩展管理，在扩展管理页面单击自定义组件页签。
在扩展管理的自定义组件页签，单击新增自定义组件。
在新增自定义组件面板，单击虚线框区域或拖拽目标zip包至虚线框区域内，完成文件上传。填写自定义组件名称和描述信息，编码会自动生成，然后单击确认。
填写自定义组件名称、编码和描述（可选）。
单击确认。
在自定义组件页面，您可查看所新增的定义组件。

编辑自定义组件

在自定义组件页面，单击目标自定义组件或目标自定义组件右侧操作列下的编辑。
在编辑自定义组件面板，完成自定义组件名称和描述信息修改后，单击确认。

下载自定义组件

在自定义组件页面，单击目标自定义组件名称右侧操作列下的下载。

删除自定义组件

在自定义组件页面，单击目标自定义组件名称右侧操作列下的删除。
在二次确认对话框中，单击删除。

下载示例代码

在自定义组件页面，单击下载示例代码。