开发插件

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

插件说明

插件需提供apply方法，其中参数如下：

hooks

hook分类

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

  • hooks.life.init： 创建Store、initWidgets及initRootSchema之前，可对针对参数修改
  • hooks.life.beforeCreate ：render运行之前，此时设计器实例为未创建，但是Store、initWidgets及initRootSchema已完成
  • hooks.life.created ：render运行完成，可通过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}`)
  ]
})

插件示例

• 复制schema示例

从 schema => 复制，粘贴看看效果