快速上手

插件配置步骤

1. 在用一个示例进行快速上手之前，首先要知道插件的配置方式

2. 当我们想配置审批待办列表的插件时，首先要在【管理后台】的【定制开发工具】中，找到【自定义插件】，并点击【新建】。

   

3. 配置插件的基本信息。这里需要注意选择支持的终端类型，以及选择我们需要的插件类型，比如我们想使用审批详情页JS插件，那么我们就选择它。对于移动端来说，我们除了通过WEB IDE来编写插件以外，还可以通过上传压缩包的形式来配置插件，这里我们以WEB IDE创建插件为例。

   

4. 配置插件的基本信息以后，可以选择”公共模板“、“历史模板”或“使用空模板”。“公共模板”和“历史模板”历史模板都是以前创建好的，我们可以选择以后根据自己的需求来进行简单的修改，当我们选择“使用空模板”，那么我们就需要自己来编写插件内容了。

   

5. 如下图我们进行插件内容的编写，并且需要指定插件的入口，例如：plugins/testplugin.js，配置完成以后点击“保存”或“发布”。

   
   

6. 编写完成以后，我们需要在对应的流程的【高级配置】中找到【自定义插件配置】，并选择自己需要使用的插件即可。

   

简单需求说明

1. 假设现在存在一个需求，即在审批待办列表页中，定制待办列表底部的按钮文案，将其替换成我们想要展示的文案，那么我们就可以通过审批待办列表页JS插件来实现。

代码实现示例

module.exports = function (context, pluginService, pluginParam) {
    return {
        apply() {
            let self = this;
            return [
                {
                    event: "flow.remind.list.batch.btn.render.before",
                    functional: async function (context, options) {
                        let bottomBtnList = options && options.bottomBtnList;
                        if (bottomBtnList) {
                            bottomBtnList.forEach((a, inde) => {
                                a.text = "底部按钮列表自定义文案" + inde;
                            });
                        }
                        //待办列表底部按钮列表
                        return Promise.resolve({
                            bottomBtnList: bottomBtnList //底部按钮列表
                        });
                    }
                }
            ];
        }
    };
};

实现效果展示

插件结构说明

1. 代码主要围绕event和functional来实现
2. event：对于不同的需求要用到不同的event，例如当前示例需求中，需要定制待办列表底部按钮的文案，所以这里的event选择的是审批待办列表页的底部按钮列表渲染前
3. functional：在functional中，是当前事件下对应的处理函数，即我们需要实现的具体功能。这里我们需要待办列表底部按钮的文案，所以这里需要对bottomBtnList进行遍历，然后将每个按钮的text属性进行修改，最后返回修改后的bottomBtnList即可。

示例代码下载

审批待办列表页JS插件demo [点击下载]