本文以一个 API 类型的扩展为例，讲述慧编程扩展设计器的使用。简单几步，你就能设计出一个舞台角色可以使用的扩展。

需要实现的效果如下：每运行一次积木块，就可以显示不同的句子。

【舞台扩展】为舞台角色编写扩展 - 图1

基本原理说明

在慧编程中，点击一个积木语句块运行，实际上是一段 js 程序的执行，所以制作可运行的积木语句实际上并不难。
以一言网站提供的API为例，分析其 API文档 得知，如下 API 请求能够获取一条来自动画的句子结果（可以直接粘贴到浏览器查看效果，如果选取的API不能直接访问，有可能存在跨域问题）

  1. https://v1.hitokoto.cn/?c=a&encode=json

结果如下：

{
  "id": 84,
  "hitokoto": "因为无法再见面，所以要笑着说再见。",
  "type": "a",
  "from": "AIR",
  "creator": "Sai",
  "created_at": "1468605909"
}

我们可以将该请求过程定义在积木块的执行程序里，并且将结果返回。

具体步骤

步骤1：登陆扩展设计器

第一步，我们进入扩展设计器。
（如果你没有账号，可以非常方便的在扩展设计器主页注册一个。 这个账号后续可以用于童心制物的所有产品体系中，包括慧编程的社区、移动端、PC 端、Web 端等等，用该账号还可以同步自己的作品，使用慧编程的人工智能服务。）
image.png

步骤2：新建扩展

注册好了账号后，登录设计器，在左侧栏，选择“我的插件” > “我的扩展”。

（在扩展设计器中，“我的设备” 和 “我的扩展” 是两个不同的概念，设备指的是对具体的硬件设备的支持，也可以理解为一个硬件角色，和舞台角色相对应，而扩展是需要依赖一个硬件角色或者舞台角色而存在。）
有关设备和扩展的详细概念描述，参见“通过扩展设计器可以开发什么类型的扩展？”

为舞台角色开发增强扩展，选择 ”我的扩展“ > ”新建扩展“。

【舞台扩展】为舞台角色编写扩展 - 图3

在弹出的的模板选择对话框中选择“通用模板”，点击“确定”。
image.png

步骤3：填写基本信息

填写扩展的基本信息。
image.png
点击“确定”。
在扩展列表，点击扩展的名称进入编辑页。
image.png

步骤4：添加分类和积木

1、点击“添加分类”，在弹出的窗口中填写分类信息，然后点击”确定“。标识 ID 默认即可。
image.png
2、点击积木列表下方的“+”添加一个新积木块。
image.png

步骤5：设计语句块

【舞台扩展】为舞台角色编写扩展 - 图9

如上图所示，我们需要三个积木，其中“选择句子来源”这个积木负责发起HTTP请求，“显示句子“和”显示句子来源“负责显示请求的结果。

设计【选择句子来源】
对于API：https://v1.hitokoto.cn/?c=a&encode=json，参考 API 文档，参数 c 可以取值为： a, b, c, d, e,f, g 等。

** ** **
c 可选 a 动画
b 漫画
c 游戏
d 文学
e 原创
f 来自网络
g 其他
h 影视
i 诗词
j 网易云
k 哲学
l 抖机灵
其他 作为”动画“类型处理
encode 可选 text 返回纯洁文本
json 返回格式化后的 JSON 文本
js 返回指定选择器的同步调用函数。默认选择器为：.hitokoto
其他 返回格式化后的 JSON 文本
charset 可选 utf-8 返回 utf-8 编码的内容
gbk 返回 gbk 编码的内容。不支持与异步函数同用
其他 返回 utf-8 编码的内容
callback 可选 id 一言标识
hitokoto 一言正文。编码方式 unicode。使用 utf-8。
type 类型。请参考第三节参数的表格
from 一言的出处
from_who 一言的作者
creator 添加者
creator_uid 添加者用户标识
reviewer 审核员标识
uuid 一言唯一标识；可以链接到 https://hitokoto.cn?uuid=[uuid] 查看这个一言的完整信息
commit_from 提交方式
created_at 添加时间
length 句子长度

1、将积木块的内容设置为“选择句子来源”并通过 “空格+@”的方式引入一个下拉框参数。
image.png
2、设置参数名称为 ”origin“，后面会用到。
image.png
点击 “+”，按照提示批量添加参数，点击确定。
image.png
得到参数如图 （如果参数第一行是空的，删掉第一行），这里左边是输入框中显示出来的描述文字，右边是该选项真正对应的值。
image.png
这样，我们就得到一个带参数的语句块。
image.png
3、勾选支持的平台后，并点击“保存”。
image.png

步骤6：”在线运行处理配置“以及”公共代码配置“

在线运行处理配置

定义好了语句块描述以及参数以后，接着定义执行该语句块的具体行为，点击”在线运行处理配置“。
image.png
双击黑色区域，填写该语句块的具体执行程序。

这里设计器已经封装好了执行接口，大家只需要在大括号中填入对应的 js 执行代码，设计器支持 es6、es7 语法，大家可以使用 async 等语法。（编辑区中的args, app,device,block等用法，可以参考”扩展回调事件（公共代码配置）“。）

async (args, app, device, block) => {
    const { origin } = args;  // args.origin 表示获取下拉框的值
    await getYiYanOfCategory(origin);
}

在这里大家会发现有一个函数 getYiYanOfCategory，这个函数哪里来的？
下面将介绍扩展设计器中的配置项”公共代码配置“。

公共代码配置

点击”公共代码配置“页签。
image.png
双击黑色区域，输入 js 代码。
这里可以定义全部变量、全局函数，扩展设计器中的其他 js 配置项可以直接调用这些公共代码。像上一步【在线运行处理配置】中的 getYiYanOfCategory 函数，就是在这里定义的，完整代码如下：

var yiYanResult = {
    hitokoto: '',
    from:''
};
const request = async (opts = {}) => {
    const host = 'https://v1.hitokoto.cn/';
    const { method, body, headers } = opts;
    var url = host + opts['url'];
    try {
        if (!navigator.onLine) {
            console.log('网络状况不佳～～～～')
        }
        let req = {
            // 默认为POST请求
            method: method ? method : 'POST',
            headers: new Headers(),
        }
        // POST 请求则在body中添加请求参数
        if (method == 'POST') {
            Object.assign({}, req, { body: JSON.stringify(body) })
        }
        const res = await fetch(url, req);
        return res.json()
    } catch (err) {
        console.log(err.toString())
    }
}
const getYiYanOfCategory = async (category) => {
    return await request({
        url: `?/c=${category}&encode=json`,
        method: 'GET'
    })
}

image.png
输入代码后，点击”保存“。

步骤7：定义返回积木块

按照步骤6，我们可以利用 yiYanResult 来存储每次 api 接口请求到的内容，然后在返回积木块中返回。 配置积木块：
image.png

配置”在线运行配置“。
image.png
代码为如下，return 数值，就是该类积木块的运行配置。

(app, device, block) => {
    return yiYanResult['hitokoto']
}

验证调试扩展

方式1：点击设计器右上角的”预览“

image.png
在弹出的预览窗口中，你会发现我们的扩展已经加载进来啦！如果没有出现扩展，注意检查右上角的登陆账号是否和扩展设计器一致。

【舞台扩展】为舞台角色编写扩展 - 图22

你可以鼠标移动到标题栏，右键：检查，像普通浏览器调试一样，调试你的扩展代码。

【舞台扩展】为舞台角色编写扩展 - 图23

方式2：下载扩展到本地，拖拽到慧编程中直接使用

参考”将扩展导入到慧编程电脑客户端使用“。

小结

舞台扩展定义做下来，是不是也还挺简单，等熟练掌握了扩展的制作方法，你就可以尝试制作更多好玩的扩展啦！
你还可以参考”扩展分享——制作自己的扩展主页“为自己的扩展制作一个扩展主页，用于展示扩展的介绍和用法，并与用户交流，持续改进。

扩展包下载

hitokoto.rar