# 开发插件

以开发手机号规则为例,自定义规则如何开发及如何注册到指定widget上?

# 插件说明

插件需提供apply方法,其中参数如下:

# hooks

# hook分类

  • hooks.life 设计器生命周期,可参考生命周期

    • hooks.life.init: 创建StoreinitWidgetsinitRootSchema之前,可对针对参数修改
    • hooks.life.beforeCreaterender运行之前,此时设计器实例为未创建,但是StoreinitWidgetsinitRootSchema已完成
    • hooks.life.createdrender运行完成,可通过ctx.$$origin获取实例
    • hooks.life.beforeDestroy 执行销毁设计器之前执行,此时能正常获取设计器所有属性及状态
    • hooks.life.destroyed 销毁设计器
  • hooks.render 渲染器生命周期,阶段同设计器生命周期(注意不在设计器中单独渲染生命周期当前版本不生效)。可参考生命周期

    • hooks.render.init: 同设计器
    • hooks.render.beforeCreate :同设计器
    • hooks.render.created :同设计器
    • hooks.render.beforeDestroy 同设计器
    • hooks.render.destroyed 同设计器
  • hooks.schema 渲染器生命周期,可参考生命周期

    • hooks.schema.copy 执行schema复制操作时触发

# 调用方式

  • 示例1: hooks.life.init.tap(callback),通过.tap方式调用,参数为hook函数callback,其中设计器及渲染器生命周期的hook callback 参数为 { ctx }ctx为设计器或渲染器实例

  • 示例2: hooks.scheam.copy.tap(callback) callback参数为schema的字符串形式。应该返回处理后的schema

// 按指定缩进进行复制
class SchemaIndentPlugin {
  constructor(indent){
    this.indent = indent || 2
  }
  apply(hooks) {
    hooks.schema.copy.tap(schema => {
      return JSON.stringify(JSON.parse(schema), null, this.indent)
    })
  }
}
// 底部添加引用
class SchemaFooterPlugin {
  constructor(banner){
    this.banner = banner
  }
  apply(hooks) {
    hooks.scheam.copy.tap(schema => {
      return schema + '\n\n' + this.banner
    })
  }
}

new Epage({
  // 其他参数
  plugins: [
    new SchemaIndentPlugin(4),
    new SchemaFooterPlugin(`===== 当前地址 ===== \n${window.location.href}`)
  ]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

# 插件示例

  • 复制schema示例

schema => 复制,粘贴看看效果

更新: 4/6/2021, 11:10:45 PM