1.新建入口
在【系统管理】-【组件库管理】-【组件库】-【酷屏组件】-【自定义组件】中，可以新建分组，在分组中点击【新建组件】，就打开到了酷屏组件设计器，也可以克隆内置组件进行修改和编辑。
以下是酷屏组件设计器：
2.设计器功能介绍
2.1代码区说明
本部分用来写HTML静态代码，组件中，只要是静态的、不变的、不需要交互（动态传值）的部分，都可以写在这里面。建议只要能写静态的，就绝不要写动态，因为这样浏览器执行效率会高很多。
2）js文件本部分写动态的js脚本，根据该文件里和wiki中提供的模板，来完成你所需要的功能吧。第一次写注意一下各个参数的意义，以及参数的值的形式。
3）CSS文件本部分写css样式文件。注意：js文件和css文件会以从左到右的顺序依次被编译，因此如果js存在父子关系的对象，父对象要放在子对象左边，这些js和css只会在该组件中被调用，作用于本组件中。
2.2取数定义说明
取数定义里定义的数据，即为组件在运行时需要的参数，一般是可以通过sql数据源获得的数据，在定义时，可以设定一个默认值。
点击【取数】后，在弹出的对话框中，点击 "+" 号，就可以实现变量的创建，变量设定完毕后，点击 "确认" 保存。
所有的取数，在js代码中，都会以字符串的形式存放在 "vardata" 参数中，例如上图中，想使用 txts 参数，就要写成 vardata.txts。
2.3组件属性配置说明
点击【属性】按钮，弹出组件属性定义对话框。
点击【高级配置】，切换到json配置界面，点击【默认配置】，回到上图的可视化配置界面。业务人员和研发人员都可以根据自己的需求来选择不同的界面，提高工作效率。
下图为一个自定义组件的属性，前面8个属性(即从name到isdelay)为组件的默认属性，从第9个(maxY属性)开始是新增的属性，点击 “+” 号可新增属性，行末的”-”号删除属性。
定义一个属性，需正确进行下面设置：
1) 属性名称，可以理解为该属性的唯一标识，一个组件中的属性名称不能重复；也就是你在写js代码时，在 “setProperty” 方法中传入的 “key” 值。
2) 属性标题，是属性的中文名称，显示在酷屏编辑页面的右侧属性面板中。比如上图中 “width” 属性，其属性标题为“宽”，在酷屏组件的属性面板中显示为“宽”。
3) 类型，分为很多种，组件编辑者根据该属性的需要，选择相应的类型。
4) 编辑，指是否能在酷屏编辑页面的右侧属性面板，对该属性进行写操作。不勾选，该属性就是不可写状态。
5) 显示，如果勾选了，该属性就会显示在属性面板上，不勾选，则该属性不显示在属性面板。
再来看“事件”选项，“事件”是该组件提供的对外接口，主要用于与其他组件进行联动。具体这个接口中做什么事，是由使用该组件的人来填写。
2.4插入图片功能说明
插入图片，就是将所需的图片文件，从本地上传到酷屏服务器中。
点击上传图片，选择所需要上传的图片就行了，单击所需要的图片，点击“确定”就可以将图片插入了。
这里值得一说的是，“图片管理”的默认界面，显示的都是“用户图标”，如上图。“系统图标”按钮点击后，所显示的图片就是系统自带的，一般用户并不能往系统图标里上传图片。
2.5预览功能说明
“预览”按钮点击后，会显示你的组件当前的实际效果。
2.6另存为“HTML”组件
这个按钮可以为你的组件创建一个新的副本并保存。
3.新建酷屏组件流程
1) 点击新建酷屏组件，打开组件编辑窗口
2) 添加组件取数定义
3) 添加组件属性、组件事件
4) 插入图片素材
5) 通过你掌握的html、js、css知识，依次写好对应的三个文件
6) 点击预览，看你的组件效果
7) 检查并debug调试你的组件，直至符合要求，最后“保存”
至此，一个酷屏组件就编写完毕了。
请先登录