开发第一个小程序自定义插件

# 开发第一个小程序自定义插件

小程序自定义插件采用小程序框架，如果您：

有小程序开发经验，可以直接上手开发小程序自定义插件。
没有使用过小程序，建议先简单学习一下小程序开发文档：

看一个最简单的示例

# 第一步：我们下载小程序的(模板 (opens new window))，代码如下：

修改下列文件：

配置文件，声明插件的入口文件

{
    "components":{},
    "main":"plugins/testplugin.js"
}

插件代码：

export default function (context) {
    return {
        /**
     * 返回要定制的自定义字段组件信息，不需要定制return null
     *
     comInfo: {
                name: "cmpt1",//（必须）自定义字段组件的名称，根目录config.json文件中components节点中指向对应组件的key
                prop: {test: 1}//会透传到自定义字段组件customProp属性，格式不限。
            }
     * @return {Object}
     */
        customFieldCom({ field }) {
            let comInfo = null;
            if (field && field.api_name === "field_testplugin__c") {
                console.log("test plugin: customFieldCom: " + field.api_name);
                comInfo = {
                    name: "cmpt1",
                    prop: { test: 1 },
                };
            }
            return Promise.resolve(comInfo); //异步return
            //return comInfo //或者直接同步return
        },

        /**通用按钮处理*/
        beforeNormalButtonsRender({ buttons }) {
            buttons &&
                buttons.some((it) => {
                    if (it.api_name === "button_testplugin__c") {
                        it.onClick = function () {
                            context.emitEvent("show-dialog1", { test: 654987 });
                        };
                        return true;
                    }
                });
            return Promise.resolve(buttons);
        },

        /**渲染fixed组件*/
        renderFixedCom() {
            return [
                {
                    name: "dialog1",
                    prop: { test: 1 },
                },
            ];
        },

        /**form页渲染完成*/
        renderEnd() {
            console.log("test plugin: renderEnd");
            wx.showModal({
                content: "插件拦截renderEnd",
                showCancel: false,
            });
        },
        /**提交前触发， resovle之后继续提交流程*/
        beforeSubmit(opt) {
            console.log("test plugin: beforeSubmit");
            return new Promise((resolve) => {
                wx.showModal({
                    title: "插件拦截提交",
                    content: "是否提交？",
                    showCancel: true,
                    success(rst) {
                        if (rst.confirm) {
                            resolve(opt);
                        }
                    },
                });
            });
        },
        /**提交成功后触发， resovle之后继续提交后动作*/
        submitted(opt) {
            console.log("test plugin: submitted");
            return new Promise((resolve) => {
                wx.showModal({
                    title: "插件拦截提交后动作",
                    content: "是否继续？",
                    showCancel: true,
                    success(rst) {
                        if (rst.confirm) {
                            resolve(opt);
                        }
                    },
                });
            });
        },
    };
}

# 第二步：压缩文件

注意，解压的文件结构，解压后直接是小程序依赖的各个文件，并非是一个文件夹。

# 第三步：找到管理后台的「自定义插件」管理界面，点击「新建」并上传该文件

plugin-start-form-1

新建插件时，选择组件类型为 新建编辑页JS插件，支持终端为 移动端。

plugin-start-form-2

# 第四步：在表单布局设计器中，找到「全局设置」中的「PC端新建编辑页JS插件」，选择刚才新创建的插件并保存

plugin-start-form-3

# 第五步：打开纷享销客app，新建对象时查看该插件是否生效。

plugin-start-form-4

# 插件代码结构说明

根目录下必须有config.json （重要）
- components：注册需要暴露给插件使用方的组件，key为组件名称，value为组件的相对路径；一些插件+ 内部子组件无需注册；
- main：插件入口js文件相对路径
app.json 的pages节点置空（重要）
项目下的js文件及组件定义参照微信规范，没有额外限制

← 什么是小程序自定义插件 selectObject →