1。简介Enhancer组件由两部分组成：组件配置页面（configurator）和组件本身（widget）。组件配置页面会将用户的配置保存为JSON。组件会被包含在预览页面的指定窗口容器中，并获取配置JSON。建议先去Enhancer教程看必读部分。配置页面（configurator）下图为enhancer-timeline组件的配置页面。通用配置页面分为数据源配置和其他配置项。上图中，左边是数据源配置，右边是其他配置项。配置页面生成的json如下：{"dataSourceId":1,//数据源id，通过它可以获取组件数据"direction":"vertical",//显示方向"showCenter":true,//居中显示"icon":"fasfa-tag",//节点图标"iconSize":16,//图标大小"titleFontSize":16,//标题字体大小"contentFontSize":14,//内容字体大小"footerFontSize":12//底部字体大小}组件预览页面(widget)下图是enhancer-timeline组件的预览页面：2.创建一个组件这里我们要开发一个列表组件，组件名称是widget-dev-demo。以列表的形式渲染从数据源获取的数据。该组件可以控制列表中的数据是否在单行中呈现。下图中左右两部分是不同配置的展示。2.1环境准备请到node.js下载安装node。全局安装组件开发工具ewtool：npminstallewtool-g--registry=https://registry.npm.taobao.org2.2初始化组件打开命令行终端，运行以下命令：mkdirwidget-dev-democdwidget-dev-demoewtoolnpminstall--registry=https://registry.npm.taobao.orgnpmstart3.熟悉组件开发界面开始widget-dev-demo组件开发后，会在默认浏览器中打开页面，显示如下：如果您的默认浏览器不是Chrome，建议使用Chrome查看。3.1场景列表自定义场景：每个组件都会有很多配置项，为了展示不同配置的效果，可以点击下方的另存为按钮，将组件的配置保存为场景。定向场景：定向场景专门用于测试组件的不同API和状态是否可以正常运行，这些场景可以在组件开发完成后用于测试组件。3.2组件配置区开发者需要在该区域渲染组件的不同配置项。3.3操作按钮从左到右依次为：预览组件、保存配置、另存为（将组件配置保存为场景）、查看配置。3.4注意如果在点击保存配置按钮之前点击预览组件按钮，会打开一个新的页面显示如下：你会看到组件一直在加载，因为组件的配置还没有保存在这次，您需要单击保存配置按钮。4.开发配置器widget-dev-demo组件配置器的具体代码请参考配置器。下面介绍主要步骤：4.1在构造函数中初始化html元素。consttplHTML=template({locale:locale()});$('body').html(tplHTML);//初始化数据源配置器this.dataSourceConfig=Enhancer.DatasourceManager.createConfigurator('dataSourceDom',{supportedTypes:['rdb','http','static','jsonp'],dataSpecification:'dataSpecification',//组件数据格式描述onSave:(source)=>{this.profile.dataSourceId=source.id;}});4.2在setProfile函数中回填之前保存的配置项//将保存的数据源Id区加载到数据源中，然后回填到数据源配置器中if(this.profile.dataSourceId){Enhancer.DatasourceManager.getDatasource(this.profile.dataSourceId,(source)=>{this.dataSourceConfig.setConfig(source);});}//回填单行显示配置项if(this.profile.oneLine){$('input[name=oneLine]').prop('checked',true);}4.3在getProfile函数中检查配置的有效性并返回新的配置数据。由于widget-dev-demo组件只有一个数据源配置项和一个单行显示配置项，所以getProfile函数只会返回这两个字段。返回{dataSourceId:this.profile.dataSourceId,oneLine:$('input[name=oneLine]').prop('checked')};开发完成后的效果5、开发组件widget-dev-demo组件具体代码请参考widget，主要代码如下：//获取组件所在的html容器const$container=this.getContainer();//通过配置器中保存的数据源Id加载数据this.getSourceData(profile.dataSourceId,(data)=>{//插入数据源数据(data.rows)和配置数据(profile.oneLine)到tpl模板中渲染$container.html(tpl({locale:locale(),data:data.rows,oneLine:profile.oneLine}));//通知平台组件已经初始化this.trig（'完全的'）;}）;6.配置预览组6.1配置数据源返回配置页面。由于是本地开发，所以数据源类型请选择StaticData。将以下数据粘贴到数据源编辑器中。{"rows":[{"content":"Inlocavorevoluptateassumea.Nonrawdenimsapienteautesmallbatchfap.Rawdenimclichelo-fiumamicrayincididuntsuntbeforetheysoldout.Viralmollitflexitarianlocavore,beardreadymadeeiusmodanim”},{"content":"LoremIpsum已成为行业标准虚拟文本前夕。LoremIpsum已成为行业标准虚拟文本前夕。LoremIpsum已成为行业标准虚拟文本前夕。LoremIpsum已成为行业标准虚拟文本前夜。eve"},{"content":"LoremIpsum已成为行业标准的虚拟文本eve"}]}单击保存数据源按钮。单击保存按钮。6.2预览组件进入配置页面，点击预览按钮，可以看到如下效果：数据以列表的形式呈现，文本宽度不够时自动换行。进入配置页面，勾选Singlelinedisplay复选框，然后点击Save按钮，再点击Preview按钮，可以看到效果如下：数据以列表的形式呈现，当宽度不是够了，多余的部分会显示为省略号。7.发布组件发布组件可以通过以下两种方式发布，任选其一。方式一：命令发布打开命令行终端，切换到widget-dev-demo目录。运行以下命令：ewtoollogin//使用enhancer平台注册的用户名和密码登录，如果已经登录，请忽略ewtoolrelease方法二：发布网页打开命令行终端，切换到widget-dev-demo目录。运行以下命令：ewtoolpack//将组件代码打包到widget-dev-demo/release中用浏览器打开https://developer.enhancer.io/myWidgets，点击添加第一个组件，将组件添加到该页面填写组件的相关内容并提交组件。组件发布后，您可以在浏览器中打开我的组件，然后继续完善组件相关信息
