作者:中子星000

这个教程里,我们将使用自定义控件实现一个BASE64编解码器
(文末附源码,已投稿至控件商城)

控件类型定义

基本信息

首先我们创建一个常量叫 BASE64_ZZX_WIDGET,用于定义控件类型,以及一些会用到的常量(如图标、颜色等)。这里使用自定义图标(上传方式见上传控件图标方式)和自定义颜色。(使用#RGBA可以让积木透明)

  1. const BLOCK_COLOR = '#00B6B6AA';
  2. const WIDGET_ICON = 'https://creation.codemao.cn/716/appcraft/IMAGE_KvkhthrhIl_1643078284866';
  3. const BLOCK_ICON = 'https://creation.codemao.cn/716/appcraft/IMAGE_e2CmsKVPl_1643078450099';
  4. const AUTHER = '中子星000';
  5. const HOMEPAGE = 'https://shequ.codemao.cn/user/2867423';
  6. const QQ = 2422481178;
  7. const BASE64_ZZX_WIDGET = {};

接下来我们需要定义控件的基本信息。
type代表控件的类型,按照传统一般为全大写并以 _WIDGET结尾)。
icon代表控件的图标。
title代表控件的名称,会在拖拽图标的下方以及创建控件实例时作为控件的默认名称显示。
version代表控件版本,这里就设置成1.0(相信我不会再更新了)。
isInvisibleWidget代表控件是否不可见控件。
isGlobalWidget代表控件是否为全局控件。
docs代表控件文档,docs.url是文档连接。

  1. const BASE64_ZZX_WIDGET = {
  2. type: 'BASE64_ZZX_WIDGET',
  3. icon: WIDGET_ICON,
  4. title: 'BASE64',
  5. version: '1.0',
  6. platforms: ['android', 'ios', 'web'],
  7. isInvisibleWidget: true,
  8. isGlobalWidget: true,
  9. docs: {
  10. url: 'https://www.yuque.com/appcraft/widget/base64'
  11. },
  12. };

控件属性

接下来我们需要定义控件的属性。首先添加字段 properties。我们通过一个对象定义属性,具体每个字段的含义请参考 自定义控件开发指南。这里用不到本内容,请参考其他教程或开发指南。

  1. const BASE64_ZZX_WIDGET = {
  2. type: 'BASE64_ZZX_WIDGET',
  3. icon: WIDGET_ICON,
  4. title: 'BASE64',
  5. version: '1.0',
  6. platforms: ['android', 'ios', 'web'],
  7. isInvisibleWidget: true,
  8. isGlobalWidget: true,
  9. docs: {
  10. url: 'https://www.yuque.com/appcraft/widget/base64'
  11. },
  12. properties: [],
  13. };

控件方法

接下来我们需要定义控件的方法。首先添加字段 methods。和属性类似,我们通过一个对象定义方法的基本属性,具体每个字段的含义请参考 自定义控件开发指南。这里我们定义了一个方法 BASE64,用于编码和解码两个功能。为了实现两个功能,可以使用dropdown设定下拉选项。
valueType可以决定是否有返回值,此处返回值类型为string。
blockOptions则是积木选项,blockOptions.icon是积木图标;blockOptions.color是积木颜色。
tooltip是鼠标悬停在积木上时的提示。

  1. const BASE64_ZZX_WIDGET = {
  2. type: 'BASE64_ZZX_WIDGET',
  3. icon: WIDGET_ICON,
  4. title: 'BASE64',
  5. version: '1.0',
  6. platforms: ['android', 'ios', 'web'],
  7. isInvisibleWidget: true,
  8. isGlobalWidget: true,
  9. docs: {
  10. url: 'https://www.yuque.com/appcraft/widget/base64'
  11. },
  12. properties: [],
  13. methods: [
  14. {
  15. key: 'BASE64',
  16. label: 'BASE64编解码',
  17. valueType: 'string',
  18. params: [
  19. {
  20. key: 'mode',
  21. valueType: 'string',
  22. defaultValue: 'encode',
  23. dropdown: [
  24. { label: '编码', value: 'encode' },
  25. { label: '解码', value: 'decode' }
  26. ]
  27. },
  28. {
  29. key: 'str',
  30. label: '文本',
  31. valueType: 'string',
  32. defaultValue: ''
  33. },
  34. ],
  35. blockOptions: {
  36. icon: BLOCK_ICON,
  37. color: BLOCK_COLOR,
  38. },
  39. tooltip: `本扩展支持中文 编码模式:将字符串编码为BASE64;解码模式:将BASE64解码为字符串`,
  40. },
  41. ],
  42. },

控件事件

接下来我们需要定义控件的事件。首先添加字段 events。和属性、方法类似,我们通过一个对象定义事件的基本属性,具体每个字段的含义请参考 自定义控件开发指南。不过呢这里我们不需要定义它的事件,所以留空。

  1. const BASE64_ZZX_WIDGET = {
  2. type: 'BASE64_ZZX_WIDGET',
  3. icon: WIDGET_ICON,
  4. title: 'BASE64',
  5. version: '1.0',
  6. platforms: ['android', 'ios', 'web'],
  7. isInvisibleWidget: true,
  8. isGlobalWidget: true,
  9. docs: {
  10. url: 'https://www.yuque.com/appcraft/widget/base64'
  11. },
  12. properties: [],
  13. methods: [
  14. /* ... */
  15. ],
  16. events: [],
  17. },

有了这部分的定义,我们就能够生成编辑态下的控件定义,包括控件选择界面,属性面板和积木外观。
image.pngimage.pngimage.png
(注:点击“如何使用?”打开控件文档)

接下来我们需要定义BASE64编解码在运行时的行为表现,也就是调用了上面的积木后,控件会做出的响应。这里我们需要实现一个叫 BASE64的js类。

控件实体定义

控件实体是一个继承 isInvisibleWidget 或者 VisibleWidget 的类,其中包含初始化、方法定义、事件触发、渲染(仅可见控件)等。
在运行时,会根据控件的属性值初始化一个实例对象。

初始化

将控件的属性通过 props 传入,这里的 props 其实就是控件类型定义中的 properties 中的属性,但本教程中不需要使用属性。

  1. class WIDGET extends InvisibleWidget {
  2. constructor(props) {
  3. super(props);
  4. }
  5. }

方法定义

在控件类型定义中,定义了一个方法BASE64,对应的我们需要在控件实体中定义同名的两个方法,方法的参数类型和数量也需要一致
由于JavaScript中自带的btoa()、atob()方法不支持中文,所以我们还应对输入的文本做一定处理。

  1. class WIDGET extends InvisibleWidget {
  2. constructor(props) {
  3. super(props);
  4. }
  5. BASE64(mode, str) {
  6. if (mode === 'encode') {
  7. return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,
  8. function toSolidBytes(match, p1) {
  9. return String.fromCharCode('0x' + p1);
  10. }))
  11. }
  12. else {
  13. return decodeURIComponent(atob(str).split('').map(function (c) {
  14. return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
  15. }).join(''))
  16. }
  17. }
  18. }

导出控件

最后我们需要将这些定义通过两个变量导出,types对应控件的基本定义,widget对应用于生成运行态实例的控件类。

  1. exports.types = BASE64_ZZX_WIDGET;
  2. exports.widget = WIDGET;

将写好的内容保存到 BASE64.js中,通过CoCo编辑器导入(或通过控件商城【强烈建议】),我们就可以正常的使用自定义的BASE64控件啦!
image.png

参考资料

  1. BASE64控件 JS 源码:BASE64
  2. 可以在控件商城导入 BASE编解码控件(升级版,支持BASE64和BASE91)