配置脚本

通过 JSON 可以快速构建一个表单,让脚本支持配置。

  1. 打开「在线编辑器」,点击「配置」 Hamibot 在线编辑器-配置
  2. 可通过选择模板,快速创建一个 Hamibot 在线编辑器-配置

示例

[
  {
    "label": "标签",
    "name": "msg",
    "placeholder": "示例内容",
    "help": "帮助说明",
    "validation": "required",
    "validation-name": "验证名称"
  }
]

这是一个较为完整的表单输入,实际效果如下:

Hamibot 在线编辑器-配置 Hamibot 在线编辑器-配置

其中 name 为我们在脚本中能获取到的变量名称,需要避开使用 JavaScript 以及 Hamibot 保留字,例如 ifidapp 等等。

在脚本中使用配置

前面我们通过 JSON 已经构建好了表单,下面介绍如何在代码中使用这些配置。

表单的所有输入都在保存 hamibot.env,包括用户输入的以及表单默认的。

const { msg } = hamibot.env;
toastLog(msg); // 打印并显示空白内容

一般表单默认是没有值的,我们可以在表单区域填上内容作为默认值。 Hamibot 在线编辑器-配置

const { msg } = hamibot.env;
toastLog(msg); // 打印并显示 ✅ Hamibot 机能正常

表单类型

前面我们演示了文本输入,这是最常用,也是默认的一种类型,除此之外,还有单选、多选、下拉选择、多行文本、滑块等等,下面我们将逐一演示。

单选

[
  {
    "label": "单选",
    "type": "radio",
    "name": "radio1",
    "options": {
      "a": "选项 A",
      "b": "选项 B"
    }
  }
]
Hamibot 在线编辑器-配置-单选

复选

[
  {
    "label": "复选",
    "type": "checkbox",
    "name": "checkbox1",
    "options": {
      "a": "选项 A",
      "b": "选项 B"
    }
  }
]
Hamibot 在线编辑器-配置-多选

单项复选

[
  {
    "label": "单项复选",
    "type": "checkbox",
    "name": "checkbox2"
  }
]

下拉选择

[
  {
    "label": "下拉选择",
    "type": "select",
    "name": "select1",
    "options": {
      "a": "选项 A",
      "b": "选项 B"
    }
  }
]
Hamibot 在线编辑器-配置-下拉选择

多行文本

[
  {
    "label": "多行文本",
    "type": "textarea",
    "name": "textarea1"
  }
]
Hamibot 在线编辑器-配置-多行文本

滑块

[
  {
    "label": "滑块",
    "type": "range",
    "name": "range1"
  }
]
Hamibot 在线编辑器-配置-滑块

总结

以上就是表单的基本使用,能覆盖大部分的使用。

在线编辑器能实时预览表单效果,快来试试吧 😉