插件开发

功能描述：根据业务需要在标准产品上进行二次开发，可新增、删除、修改组件，可覆盖原有data属性和methods方法
前提条件：App.isPlugin = true; 应用支持插件开发

插件模块

说明：只支持data、watch、methods和生命周期方法
data：merge处理，会覆盖同名属性
watch：追加监听，同名不覆盖，先执行标准监听代码，再支持插件监听代码
methods：merge处理，会覆盖同名方法
生命周期方法：先执行平台生命周期，再执行标准代码生命周期，再执行插件生命周期

平台方法

新增组件

• 方法: this.addComponent$(parentOrKey, code, propsData, nextDomId)
• 参数说明:
  • parentOrKey：parent：表示父组件VueComponent，新组件添加在容器末尾，key：表示在该id的dom之前插入。当parentOrKey类型为VueComponent时，那么parentOrKey为父组件VueComponent，比如：Header、Body、Footer等。当parentOrKey类型为String时，那么parentOrKey为父组件key，在该key的组件之前插入
  • code: 组件标签名，例如：TextBox
  • propsData：Object，传入的属性集合，必须包含id属性，不然个性化后会找不到对应的ref
  • nextDomId: 新增后，后面第一个兄弟节点的key，就是在哪个组件之前插入

删除组件

• 方法：this.removeComponete$(vueOrKey)
• 参数说明：
  • vueOrKey：自身VueComponent或者组件key

设置组件属性

• 方法：this.setComponentAttribute$(vueOrKey, attributeName, value)
• 说明：设置组件属性，其实实际是设置data里面的属性，因为props属性不能修改
• 参数说明：
  • vueOrKey：自身VueComponent或者组件key
  • attributeName：属性名，只试用于data里面有的
  • value：属性值

组件绑定事件

• 方法：this.addComponentEvent$(vueOrKey, eventName, fun)
• 参数说明：
  • vueOrKey：自身VueComponent或者组件key
  • eventName：事件名
  • fun：事件触发后执行的方法

删除组件绑定事件

• 方法：this.removeComponentEvent$(vueOrKey, eventName, fun)
• 参数说明：
  • vueOrKey：自身VueComponent或者组件key
  • eventName：事件名，可空，当为空时，删除该组件所有事件
  • fun：事件函数，当指定eventName后，fun不为空时，只移除指定事件函数

注意

• 不允许在头部 import，可在代码中动态引入平台或标准业务代码提供的模块js，可采用 import(“…”).then(function(module){ … })来动态引入
• 采用标准格式，export default { … }，”export default”不能缺失
• 保证语法格式的正确，语法错误，运行时，控制台会有error提示，不会影响正常程序运行

运行插件

1. 企业用户进入系统
2. 开发中心 -> 应用插件
3. 选择要扩展开发的应用，并指定版本，上传js文件
   1. 优先找默认版本
   2. 其次找 “latest” 版本
   3. 再按版本号逆序排序，返回第一个
4. 保存
5. 发布、取消发布
6. 刷新页面，无需强刷

代码样例

export default {
    data: function() {
        return {
        };
    },
    watch: {
        watchName: {
            handler() {
            }
        }
    },
    methods: {
        onChange() {
        }
    },
    beforeCreate: function() {
    },
    created: function() {
    },
    beforeMount: function() {
    },
    mounted: function() {
    },
    beforeUpdate: function() {
    },
    updated: function() {
    },
    beforeDestroy: function() {
    },
    destroyed: function() {
    }
};