# 1 用户场景
苍穹平台目前在web端、移动端分别提供了众多标准控件，可以满足业务场景绝大部分通用场景开发。但是面对特殊或者个性化需求时，平台支持开发自定义控件方式扩展平台控件。简单来讲，当平台提供的控件不能完全满足业务所需要的场景时，开发者可以使用自定义控件重新去实现一个全新的控件。从前端到后端完全自定义控件自主开发，因此更适合有前端开发经验的开发者。
# 2 功能介绍
下文会通过一个最简单的例子：**hello world **的开发，来给大家介绍开发自定义控件的每一个步骤。
# 3 操作步骤
## 3.1 快速入门
### 3.1.1 新建目录
本地任意目录新建一个**helloworld**目录， 在该目录下新建**index.js**文件：
### 3.1.2 开发
使用编辑器打开 **helloworld** 文件夹，并将下面代码（**可以先忽略代码逻辑，后面会描述**）添加到 **index.js** 文件中：
```js
/**
* 自定义控件书写模板
*/
(function(KDApi, $){
// 构造函数，变量名随意，与最后一句代码的KDApi.register的第二个参数一致即可
function HelloWorld (model) {
this._setModel(model)
}
// 原型中封装生命周期函数，固定格式
HelloWorld.prototype = {
_setModel: function(model) {
this.model = model
},
init: function(props){
// TO DO
initFunc(this.model, props)
},
update: function(props){
// TO DO
},
destoryed: function(){
// TO DO
}
}
// Other Code
var initFunc = function(model, props) {
model.dom.innerHTML = 'init: Hello World!'
}
// 你只需知道第一个参数是你接下来要新增控件方案时填的方案id，第二个参数是上面声明的构造函数
KDApi.register('helloworld', HelloWorld)
})(window.KDApi, jQuery) // 这里的jQuery不是必须要传进去的，可移除，要用到的时候才传，PC端系统默认会有jQuery对象，版本是1.12.4
```
注：以上模板适用于PC端的自定义控件开发，如果是移动端的自定义控件开发，则需要将模板中使用的 **jQuery** 对象("$")去除，移动端不提供 **jQuery** 对象。如果移动端需要使用 jQuery，可以通过 **全局扩展JS**或者自定义控件内部的**KDApi.loadFile**接口自行加载。
### 3.1.3 打包
将 **helloworld** 目录下的文件打成 **zip** 包，注意不要将 **helloworld** 文件夹也打包，只需要其目录下的文件，且 **zip** 包下根目录必须要有 **index.js** 文件。
### 3.1.4 上传
接下来在**设计器**左侧的控件列表找到"**自定义控件**"，通过点击或拖拽操作把该控件添加到页面中，并设置其"标识"为 **helloworld**。
在设计器右侧的**控件属性**面板中点击设置"**控件方案**"属性，在弹出的“**控件方案列表**”中点击“**新增**”按钮，弹出"**控件方案**"界面新增控件方案，"方案id"填写为 **helloworld**，"领域标识"为 **cq** ，并且选择上传 **helloworld.zip** 。
* 左侧导航找”自定义控件“：
* 在"**控件方案**"界面的"**资源文件**"区域上传”helloworld.zip“包：
注意：本地环境不会显示资源文件上传区域，开发流程请参考[标准产品开发自定义控件全流程](https://vip.kingdee.com/article/218081486686564608)
* 在"**控件方案**"界面点击 **保存**，之后在"**控件方案列表**"界面选择这条新建的方案，并点击 **返回数据**
### 3.1.5 预览
在设计器上点击 **保存** 按钮，之后点击 **预览** 按钮
预览结果：
第一个例子 **helloWorld** 就到此完成
回顾上面例子，完成一个自定义控件的步骤总结如下：
1. 新建一个包含 **index.js** 文件的目录， **index.js** 是程序主入口；
2. 按照模版代码编辑前端 **javascript** 逻辑，完成后打包成 **zip** ；
3. 设计器上新增自定义控件，点击**新增控件方案**，上传 **zip** 包，方案和 **zip** 关联；自定义控件选择该方案，返回数据；
4. .在页面上点击保存并且预览，就可以看到自定义控件的内容。
## 3.2 结构样式分离
**
