手把手教你写控件

此文由官方文档转载

作者：中子星000

让我们在JavaScript的大海中遨游吧！（本次航行没有包含自定义控件全部内容，只讲了不可见控件，和方法积木的定义以及控件实体）

启航之前

一目标

遨游大海，必然要有一艘可靠的船，一个坚定的目标和一位可靠的船长，

一艘可靠的船：即你接下来要做的自定义控件
一个坚定的目标：即你的自定义控件的功能
一位可靠的船长：即你

需求推动发展，那我们必须得先制定一个目标，才能打造一艘优秀的船。这次航行我们有这几个目标，

好好的宣传这次航行，把公告的标题（假设为英文）转换成大写。即把字符串中英文字母全转换成大写
把一位粗心船员写的大小写混乱的句子转换成小写（假设必须要这么做）。即把字符串中英文字母全转换成小写
另一位船员想找找目标中第一个“船员”在哪？。即搜索字符串中第一个子字符串的下标

好了，目标指定完了，开始造船吧！

二造船

造船肯定不能两手空空，还得有材料，

一些造船的基本知识，即一些编程的基本知识
一个好用的车间，即代码编辑器

1 船的框架

造东西可以先造出框架，再填充内容，那我们这次造船也这样

首先必须得创建一个文件叫做字符串工具.js（后缀名不会改的百度搜索后缀名怎么改）

一艘船，当然得有属于他的基本信息，描述清楚他有什么功能，不然别人怎么知道这是什么呢，往文件里放入这个框架吧

const types = { // 这就是你的船了，包含了你的船的信息，即一个自定义控件类型
    type: 'STRING_TOOLS_WIDGET', // 当作是船的型号，最好使用全英文大写，下划线连接
    title: '字符串工具', // 当作是船的名字
    icon: 'https://creation.codemao.cn/716/appcraft/IMAGE_bZbAOhRcTa_1643095470593.svg', // 一艘船得有一个好看的图标作为标识，一般用.svg的图片
    isInvisibleWidget: true, // （实在想不到什么比喻了）用于决定这个控件是否不可见，这个教程只教不可见控件，想要了解可见控件参考其他教程
    isGlobalWidget: true, // （实在想不到什么比喻了）用于决定这个控件是否全局
    properties: [], // 你的船会有一些独特的属性在这里定义，控件的属性列表，本教程中未使用，但也得写上
    methods: [ // 你的船能做什么就看它了，控件的方法列表
        { // 每一个方法都由类似这样的一段大括号里面的内容定义
            key: 'toUpperCase', // 这个方法的名字，会在下面用到
            valueType: 'string', // 我们进行完转换后返回转换后的字符串
            params: [ // 进行一些操作，经常是给方法一些参数的
                {
                    key: 'text', // 参数名，要和下面对应
                    label: '把', // 更好的衔接积木，增加可读性
                    labelAfter: '转换成大写', // 更好的衔接积木，增加可读性
                    valueType: 'string', // 我们要输入一个字符串进行转换大写
                    defaultValue: 'Hello world!', // 积木里默认的值
                },
            ],
            tooltip: '字符串中英文字母全转换成大写', // 向使用这个控件的人描述这个方法是做什么的，怎么用的
        },
        {
            key: 'toLowerCase', // 这个方法的名字，会在下面用到
            valueType: 'string',
            params: [
                {
                    key: 'text',
                    label: '把',
                    labelAfter: '转换成小写', // 更好的衔接积木，增加可读性
                    valueType: 'string',
                    defaultValue: 'Hello world!',
                },
            ],
            tooltip: '字符串中英文字母全转换成小写', // 向使用这个控件的人描述这个方法是做什么的，怎么用的
        },
        {
            key: 'indexOf', // 这个方法的名字，会在下面用到
            valueType: 'number', // 这里返回一个下标，当然是数字类型了
            params: [
                {
                    key: 'text',
                    label: '在',
                    labelAfter: '中搜索第一个', // 更好的衔接积木，增加可读性
                    valueType: 'string',
                    defaultValue: 'Hello world!',
                },
                {
                    key: 'searchText', // 参数名，要和下面对应
                    valueType: 'string',
                    defaultValue: 'o',
                },
            ],
            tooltip: '搜索字符串中第一个子字符串的下标', // 向使用这个控件的人描述这个方法是做什么的，怎么用的
        },
    ],
    events: [], // 你的船不是一帆风顺的，总是会发生一些事情，控件的事件列表，本教程中未使用，但也得写上
}

2 船的内容

光有框架肯定不行，你得向框架里填充内容，就像这样

class Widget extends InvisibleWidget { // 现在，把你船的框架填上代码吧！
    constructor(props) { // 这个是构造函数，必须要有的
        super(props); // 调用超类的构造函数，必须要有的
    }

    toUpperCase = (text) => { // 定义上面对应的方法，这里的参数要和上面对应
        // 这里调用了JavaScript字符串对象的原生方法
        return text.toUpperCase(); // 这里返回的内容数据类型要和上面对应
    }

    toLowerCase = (text) => { // 定义上面对应的方法，这里的参数要和上面对应
        return text.toLowerCase(); // 这里返回的内容数据类型要和上面对应
    }

    indexOf = (text, searchText) => { // 定义上面对应的方法，这里的参数要和上面对应
        return text.indexOf(searchText); // 这里返回的内容数据类型要和上面对应
    }
}

3 下海

你的船不下海当然没法走，所以，你需要下面的代码

exports.types = types;
exports.widget = Widget;

启航

源文件：字符串工具.js

1 一帆风顺

在CoCo中导入你的控件并使用吧！

2 雷雨天气

写自定义控件总是会出现错误，那又该怎么办呢？你可以到CoCo交流群（QQ：861247613）中提问 也可以自行百度（估计很难查到）或者根据自定义控件文档慢慢排查

未来的航程

分享你的控件

在CoCo交流群（QQ：861247613）中分享你的控件吧！

向官方投稿你的控件

继续学习JavaScript

以下网址会帮到你：

https://www.javascript.com/learn（仅Javascript，英文）

https://developer.mozilla.org/zh-CN/docs/learn/JavaScript（非常全面，有中文，推荐）

https://www.runoob.com/js/js-tutorial.html（不是很全面，中文，推荐）

（有啥遗漏或不详细以后再补充吧）

手把手教你写控件 ​

启航之前 ​

一 目标 ​

二 造船 ​

1 船的框架 ​

2 船的内容 ​

3 下海 ​

启航 ​

1 一帆风顺 ​

2 雷雨天气 ​

未来的航程 ​

分享你的控件 ​

继续学习JavaScript ​