码良之笔神奇的脚本

jiezi

5 年前

本文为“码良系统的使用及设计实现”系列文章的第四篇。可先看前面几篇介绍

开篇: 码良的正确打开方式
码良是如何设计高扩展的在线网页制作平台的
神笔已开，我该如何使用
组件开发

上个礼拜上海再次迎来了进口博览会，我们“被迫”调休加放假三天，假期归来，惊喜地发现码良 star 数已经破 1000 大关，可喜可贺。

上周我们赶在放假前将码良所有项目开源，包括 gods-pen-server

码良服务端、gods-pen-admin

码良管理后台以及于 7 月份就已经开源的 gods-pen

码良编辑器，至此，码良宣告完全开源。

同时我们推出了相应的工具 gods-pen-cli 来辅助您完成整个码良项目的运行和部署，具体细节请参考源码部署文档。

下面进入本篇文章的正文，码良脚本。

市面上 H5 编辑器大多着力于给用户提供可视化的编辑体验，通过提供丰富的模板和海量的组件来满足用户多样化的功能需求，这确实是一个不错的方向，码良平台也具备类似的机制（虽然目前组件还不够多，模板也不够精美）。

但是，码良并不满足于此。

考虑如下场景，我们向某页面添加了 10 个按钮，点击这些按钮时需要分别记录点击时间、组件 id 并发送到服务端（即记录点击日志并提交）。将需求拆分一下：

由于按钮组件本身不具备点击日志记录和发送功能，需要扩展此功能；
需要为这一组按钮都添加这个同样的功能。

在有脚本功能之前，我们需要新开发一个具备上述能力的按钮组件。先不考虑开发组件的成本和所需的权限（码良平台任何用户都可以开发自己的组件，其他平台可是未必支持哦），这种方案能满足上述需求。但是，需求稍一变化，不止按钮，其他组件也需要这个功能呢，还得开发，实在麻烦。

码良的脚本机制便是为了解决此类问题提出的。

码良脚本具备以下几个基本特性：

脚本可以扩展组件功能。
脚本可以被复用。
脚本几乎具备完全的组件控制能力

在这样的能力加持下，其他 H5 编辑器平台不好实现的富交互、重逻辑页面，统统可以搞定。

不够直观？有图为证

编写脚本，点击组件 alert 出当前时间和组件 id

上传脚本，给其他组件添加此脚本

return {mounted: function () {console.log('hello world')
  }
}

以上几行代码就实现了一个超级简单的脚本！使用了此脚本的组件会在其 mounted 生命周期打印出 hello world。

所以，如上所示，脚本就是一个 Vue 配置对象(option object)。是的，就是这么简单！

除原生 Vue 配置属性外，你可以为组件添加自定义属性、自定义方法。

首先，我们先以 vue 语法为组件添加一个属性 who，在该组件mounted 生命周期内会 alert“hello xxx”。

return {
  props: {who: String,}, 
  mounted: function () {window.alert('hello' + this.who)
  }
}

编辑器如何识别这个属性并提供合适的输入控件呢，继续修改上面的脚本

return {
  props: {
    who: {
      type: String,
      default: 'world', // 默认值
      editor: {
        type: 'input', // 需提供一个文本输入框
        label: '谁啊', // 在编辑器中该字段实际展示的名字
        desc: '就是谁啊', // 字段描述信息，帮助理解字段的意义，hover 展示
      }
    }
  }, 
  mounted: function () {window.alert('hello' + this.who)
  }
}

将以上脚本添加给某组件，属性配置面版多处一个 who 属性配置

可以看到，我们在 vue 属性配置对象上添加了 editor 字段，editor.label 和 editor.desc 使 who 属性在编辑器中更友好的展示，editor.type 指定了编辑器应该为该属性提供何种输入控件，更多的 editor.type 输入类型请参考文档。

自定义方法常用于处理回调，响应事件等。

比如组件有一个属性为 successCall，代表某个操作成功的回调方法，其 editor.type 为 function。

为组件添加自定义方法后，就可以在组件 successCall 属性配置面板里选取这个方法。

return {
  editorMethods: {                 // 配置 自定义方法 在组件配置面板如何展示
    workLate: {                    // 方法名，对应于 `methods` 内的某方法
      label: '打卡下班',            // 自定义方法显示名
      params: [                    // 参数列表，可以在编辑器输入  
        {                
          label: '打卡时间',        // 参数 1 的名称
          desc: '按时下班，请勿逗留', // 参数 1 的描述，可选
          type: 'string',          // 参数 1 的类型，支持 `string|number|boolean|array|object`
          default: '02:00'         // 参数 1 默认值
        },
        // 参数 2 参数 3 ...
      ]
    }
  },
  methods:{workLate (ts){// do something}
  }
}

将以上脚本添加给某组件，并将 workLate 方法传给点击操作

与普通 vue 组件相比，也只是添加了editorMethods 配置而已。

this.$parent.getComponent(anotherComponentId)

var $com = this.$parent.getComponent(id)
$com.visible = true // false

更多的组件实例的通用方法和属性请参考文档

再次搬出之前做过的简陋版智障聊天机器人（对话 api 来自 https://www.ownthink.com/robot.html）

使用按钮、列表、文本等组件绘制出页面结构

为发送按钮添加脚本，编写处理逻辑

视频点击观看

脚本的核心实际就是一个普通的 Vue 配置对象（option object），再加上对属性（props）和方法（methods）的描述，辅以一些码良组件的基本通用方法和属性。只要你拥有一些 vue 开发基础，你就可以尽情发挥想象力与创造力，制作开发出富交互、重逻辑的页面。

码良之笔，值得拥有！

例行求体验，例行求 star。

码良之笔神奇的脚本

码良之笔——神奇的脚本

star 破千

脚本是什么

脚本开发

自定义属性

自定义方法

获取组件实例

设置组件显示隐藏

一个简单的复杂例子

总之