:::danger 因为手册编写人员的疏忽，忘记了备注作者名，如作者发现可在评论区留言！我们会积极修改！ ::: 在我们制作浏览器时，需要搜索的内容会是中文的。而有些系统不支持中文URL，所以我们就用自定义控件制作一个URL编解码器，来解决这样的问题。

1.控件类型、基本框架定义

设置好基本类型
type代表控件类型名
icon代表控件图标
title代表控件名称
version代表控件版本
isGlobalWidget代表控件全局

  1. const types = {
  2.   isInvisibleWidget: true,
  3.   type: "MY_WIDGET",
  4.   icon: "https://creation.codemao.cn/716/appcraft/IMAGE_nSerf649vS_1650681785871",
  5.   title: "URL编解码",
  6.   version: "1.0.0",
  7.   isGlobalWidget: true,
  8. };

2.控件列表框架

在本教程中，积木融合在方法函数后，所以不需要定义属性、积木、事件列表不需要填写。但因语法要求，还要写上空列表。

  1. const types = {
  2.   isInvisibleWidget: true,
  3.   type: "MY_WIDGET",
  4.   icon: "https://creation.codemao.cn/716/appcraft/IMAGE_nSerf649vS_1650681785871",
  5.   title: "URL编解码",
  6.   version: "1.0.0",
  7.   isGlobalWidget: true,
  8.   properties: [],
  9.   methods: [],
  10.   events: [],
  11. };

3.控件方法

接下来要定义控件积木了。
首先新建方法函数开头，但无需填写。

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

积木都在最后，开始编写积木代码。

  1. types['methods'].push({ //编写积木信息
  2.   key: 'URL1', //积木函数名
  3.   label: 'URL', //积木标签
  4.   valueType: 'string', //返回值类型
  5.   params: [ //属性列表
  7.   {
  8.     key: 'ahh', //参数名
  9.     label: '转换', //参数标签
  10.     valueType: 'string', //值类型
  11.     dropdown: [ //下拉选项
  12.           { label: '编码', value: '编码', },
  13.     { label: '解码', value: '解码', },
  14.   ],
  15.   },
  18.   { //同上
  19.     key: 'str',
  20.     label: '文本',
  21.     valueType: 'string',
  22.     defaultValue: 'hello',
  23.   },
  26.   ],
  27. })
  28. Widget.prototype.URL1 = function (ahh,str,) { //开始写方法函数
  29.     if ((ahh) == '编码') {
  30.     return (encodeURI(str));} else if ((ahh) == '解码') {
  31.     return (decodeURI(str));}
  32. ;
  33. }

4.导出控件

控件编写完成，就差最后一步：导出

  1. exports.types = types;
  2. exports.widget = Widget;

5.附件

本控件最初由Weddle编辑器制作，以下是附件：
js附件：URL编解码.js
wsddle附件：URL编解码.waddle.txt（请下载后自行去掉.txt后缀）