1 插件代码的封装

在DWF开发调试的时候，扩展的插件文件需要在dwf-part-all文件夹特定的子文件夹，在DWF SDK展开后dwf-part-all内已经布置了一个part01的文件夹，作为示例。

当插件开发好以后，DWF的装配脚本会将插件的vue文件打包，并且封装为一个zip文件，这个被封装的zip文件称之为代码包，用于进行代码包的封装脚本在：scripts\assemble.py中。

当装配脚本开始执行的时候，其会将文件拷贝到 app-web\src\assemble_components或者modeler-web\src\assemble_components内的文件夹里，并且自动修改config.js文件，从而扩展新的功能。

1.1 代码包目录结构

当开发者打开SDK样例工程的时候，已经预制了一个名为part01的文件夹，用来代表需要独立打包的代码，开发者可以根据自己的偏好将part01修改为其他名称，用来代表自己或者自己小组开发的代码。

part01内部的结构由三部分组成：

part-model：表示代码运行需要提供的基础模型，例如：数据模型，表单模型等，内部保存一个或者多个模型包，关于模型如何打包，详见：第十章应用发布管理。
part-web：前端扩展的代码，分为app, common和modeler三个模块，每个模块又分forms和operations两个子模块，用户在子模块中开发对应的前端控件。
- public：存放前端需要使用的资源文件，可将插件包所需前端资源文件上传至此目录，注意：同名文件会被覆盖！建议在文件夹内单独创建以插件包命名的文件夹，以免被其他项目插件覆盖
part-svc：后端扩展的代码，后端分为app，common和modeler三个模块，每个模块又分controller，entity和service三个子模块，用户在子模块中开发对应的后端接口。
- lib：如果需要在插件里带入一些jar包，可以将这些jar包放到这个lib文件夹中。

目录结构如图：

图-代码包的典型结构

最后，在每一个代码包的结构中有一个asemble-part.yaml用于描述代码包的元信息，在代码开发完成，封装完毕后到现场装配的时候，封装脚本将自动填写。

关于将扩展代码和SDK的核心代码分离原因可以从以下三方面解释：

第一，SDK核心代码与扩展代码分离，防止核心代码升级导致的覆盖混乱。

第二，扩展代码与核心代码的分离有利于保护扩展代码的私密性，尤其是一些敏感行业不希望公开扩展代码时，可以独立进行管理。

第二，前后端代码统一封装，可以实现前后端一步到位的扩展，降低对现场实施人员技能依赖，从而减少实施成本。

1.2 DWF如何识别源文件

为让DWF发现插件，并将正确的插件文件装配到目标系统之中，SDK会在上述源码的文件夹，预先创建一个装配描述文件assemble-to.yaml，如下面的文件夹结构里面所示：

图-装配文件assemble-to.yaml

下面是一个assemble-to.yaml内容的例子，如图中所示，在dwf-part-all\part01\part-web\modeler文件夹下有建模工具、应用前端和手机表单对应的vue文件，在assemble-to.yaml内部通过如下的配置方式即可指示DWF进行自动装配。

利用DWF SDK的装配脚本，可以实现对上述文件的自动更新，使用方法如下：

cd scripts\
python assemble.py devClear #表示清空congfig.js文件，并且删除已经装配的vue文件。
python assemble.py devAssemble #表示自动扫描所有的插件，并且将其写入congfig.js。

1.3 插件的封装方法

代码开发完毕以后，需要封装为符合DWF规范的代码包，这个封装是通过DWF SDK中的assemble.py脚本实现的。

其位置位于SDK目录下：scripts\assemble.py下具体的用法如下：

python assemble.py generate # 为dwf-part-all中所有part打包，每个part一个zip包
python assemble.py generate part01 # 生成指定part的zip包
python assemble.py generate part01 as flok # 利用关键字as实现part名的修改并打包

运行脚本后在dwf-part-all下面会生成一个zipfiles文件夹，这个文件夹内的zip文件即为代码包，将这个代码包发到现场，可以通过dwf modeler的代码装配功能实现装配。

图-代码包上传界面

2.DWF插件简介

在DWF的前端，插件是扩展的基本单位，插件以vue组件的形式开发，保存为.vue文件

2.1 插件的规范

插件vue文件格式如下所示：

<template>
	                        //html区域，用来编写插件的视图；template内只能有一个根元素
</template>
<script>
	import相关依赖
	export default {
		name:              //插件名
		props:             //插件属性[从上级组件(调用插件页面)获取的数据], （如<el-button :type="circle">里面,type就是一种prop)
		data() {...}
		methods: {...}
		...
	}
</script>
<style>	
	                        //css样式区域
</style>

其中，在<script>标记里，几个DWF与插件约定的参数，必须实现。

name : 插件的名称。

methods{...}：插件对外显示的方法，被不同模块调用时，从这里找到标准方法。

需要注意的是，app-web和modeler-web是两个不同的工程，所以操作插件的vue文件，需要考虑分别在两个不同的前端对应不同的实现，最简单的做法是放在common文件夹里，自动拷贝一份。

3 小结

本章主要介绍了DWF的代码包的概念，代码包的组织形式，以及如何将代码打包。

之后，简单介绍了DWF的前端插件的概念，以及插件的发现原理。

下一章，将介绍DWF中最简单的一类前端插件，操作插件。

页面树结构

第三章 前端插件扩展和封装