作者：刘lyxandy

本教程教给大家如何制作超链接控件。
本页面提供页内下载控件（版本较新，不稳定），见页面最底部。
本页的教程控件版本为1.1.0（商城版），链接请点我。

控件类型定义

  1. const AUTHOR = '刘lyxAndy';
  2. const HOMEPAGE = 'https://www.yuque.com/liulyxandy';
  3. const QQ = 3449556207;

行3~5:定义作者的基本信息：

  • AUTHOR：作者
  • HOMEPAGE：主页
  • QQ：联系方式（QQ）
    1. const types = {
    2. ...
    3. }
    行7~68：类型定义的一整块。
    1. type:'SUPER_LINK_WIDGET'
    行8：定义控件的类型（其实就是英文大写名）。
    1. icon: 'https://creation.codemao.cn/716/appcraft/IMAGE_vwZPnyOpm_1643090741772.svg',
    行9：定义控件的图标。（图标来源:@于勤(yuqinweb)）
    1. title: '超链接',
    行10：定义控件的中文名。
    1. version: '1.1.0',
    行11：定义控件的版本（虽然看起来没什么用）。
    1. platforms: ['android', 'ios', 'web'],
    行12：定义控件运行的设备（见这里）。
    1. isInvisibleWidget: false,
    2. isGlobalWidget: false,
    行13~14：定义是否为可见控件与全局控件，此处不细讲。
    1. docs: {
    2. url: 'https://liulyxandy.ml/superlink-widget/docs.html',
    3. },
    行15~17：定义控件的文档位置，显示为：
    image.png
    1. properties: [
    2.   {
    3.     key: 'content',
    4.     label: '链接文案',
    5.     valueType: 'string',
    6.     defaultValue: '编程猫',
    7.     tooltip: '链接中显示的文本',
    8.   },
    9.   {
    10.     key: 'href',
    11.     label: '目标URL',
    12.     valueType: 'string',
    13.     defaultValue: 'https://www.codemao.cn/m',
    14.     tooltip: '链接指向的URL',
    15.   },
    16.   {
    17.     key: 'color',
    18.     label: '文本颜色',
    19.     valueType: 'color',
    20.     defaultValue: '#1890ff',
    21.     tooltip: '链接文本颜色',
    22.   },
    23.   {
    24.     key: 'textSize',
    25.     label: '文本大小',
    26.     valueType: 'number',
    27.     defaultValue: 16,
    28.     tooltip: '链接文本大小',
    29.   },
    30.   {
    31.     key: 'textOblique',
    32.     label: '字体倾斜',
    33.     valueType: 'boolean',
    34.     defaultValue: false,
    35.   },
    36.   {
    37.     key: 'textBold',
    38.     label: '字体加粗',
    39.     valueType: 'boolean',
    40.     defaultValue: false,
    41.   },
    42.   {
    43.     key: 'underline',
    44.     label: '下划线',
    45.     valueType: 'boolean',
    46.     defaultValue: true,
    47.   },
    48. ],
    行18~65：定义控件的属性，此次我们定义了content(链接文案),href(目标URL),color(文本颜色),textSize(文本大小),textOblique(字体倾斜),textBold(字体加粗),underline(下划线)这几个属性。其中的键值不再细述，请参见链接和链接。
    1. methods: [],
    2. events: [],
    行66~67：定义控件的方法与事件，这里并不需要，不再赘述，请参见其他教程。

控件实体定义

  1. class SuperLink extends VisibleWidget{
  2.     ...
  3. }

行71~107：控件的实体定义块。

  1.   constructor(props) {
  2.     super(props);
  3.     this.content = props.content;
  4.     this.href = props.href;
  5.     this.color = props.color;
  6.     this.textSize = props.textSize;
  7.     if (props.textBold === true) {
  8.       this.textBold = 'bold';
  9.     } else {
  10.       this.textBold = 'normal';
  11.     }
  12.     if (props.textOblique === true) {
  13.       this.textOblique = 'oblique';
  14.     } else {
  15.       this.textOblique = 'normal';
  16.     }
  17.     this.underline = props.underline;
  18.   }

行72~89：初始化控件的属性。首先使用super(props)。然后用this.名称=props.名称将属性传入。

注：行78~88可能会变换，请随时注意本页。

  1.   render() {
  2.     return (
  3.       // eslint-disable-next-line react/react-in-jsx-scope
  4.       <a
  5.         href={this.href}
  6.         style={{
  7.           color: this.color,
  8.           fontSize: this.textSize,
  9.           fontWeight: this.textBold,
  10.           fontStyle: this.textOblique,
  11.           textDecoration: this.underline ? 'underline' : undefined,
  12.         }}>
  13.         {this.content}
  14.       </a>
  15.     );
  16.   }

行91~106：使用render()渲染控件，使用return()返回HTML进行渲染。HTML就是控件的外观。
特别注意:在此处style=后有两个{!

注：行93的注释为@于勤(yuqinweb)所加，并未了解其意，所以并未解释。

下载链接

super-link.jsx.txt（请自行去掉.txt）V1.1.0