通过学习《360°教你搞定“自定义控件开发”（入门篇）》、《360°教你搞定“自定义控件开发”（进阶篇）》这两篇文章，小黑已经掌握了自定义控件的开发技能。

但是小黑对很多自定义控件的API不太熟悉，例如每个自定义控件都需要的 “KDApi.register”的用途是什么？自定义控件需要满足多语言、多主题色等场景，是否能够通过相关API去获取相关的配置信息？

别担心！本期小编给大家详细介绍自定义控件的API，化解大家的疑惑~

API的分类主要有以下4种，分别是“模型model”、“数据props”、“前端KDApi”和“生命周期”，具体如下图所示：

API概览

接下来，小编将逐一介绍各个模块的功能。

模型对象，自定义控件默认提供，值不能修改，model中的内容通常是包含该自定义控件的外部属性，主要包含以下内容：

自定义控件用于获取自定义控件所在表单的“data-page-id”，API为“pageId”，其调用方式如下所示：

model.pageId    // "6592c03a9d9f4337bde29beee995caac"

自定义控件用来获取设计时配置的自定义控件标识，这个标识是唯一的，API为“key”，其调用方式如下所示：

model.key    // "kdtest_customcontrolap"

自定义控件提供的可供设置“innerHTML”的DOM节点，API为“dom”，其调用方式如下所示：

model.dom

自定义控件用来获取新建方案时填写的控件方案Id，API为“schemaId”，其调用方式如下所示：

model.schemaId    // "dellabel"

自定义控件用来获取新建方案时填写的开发商标识，API为“isvId”，其调用方式如下：

model.isvId    // "kingdee"

自定义控件用来获取新建方案时设置的领域标识，API为“moduleId”，其调用方式如下所示：

model.moduleId    // "hr"

自定义控件可以发送网络请求至平台后端，API为“invoke”，其调用方式如下所示：

model.invoke('click', 'Hello World!')

invoke参数说明

数据对象，props里面描述的通常是该控件的内部属性，直接和控件渲染逻辑相关，常用方法有以下几种：

自定义控件可以根据该主题色标识实现自定义控件多主题，API为“themeColor”，其调用方式如下所示：

props.themeColor    // “blue”

自定义控件可以在设计时的业务属性上配置锁定性，根据该属性判断控件是否可编辑，API为“lock”，其调用方式如下所示：

props.lock    // false

自定义控件可以获取后端插件中setData接口设置的数据，API为“data”，其调用方式如下：

props.data

自定义控件设计时可以设置自定义属性，API为“configItems”，其调用方式如下所示：

props.configItems

当自定义控件放在卡片列表、卡片分录中时，通过cardRowData就能获取到卡片的相关信息，包括卡片里的字段、控件和卡片行号，API为“cardRowData”，其调用方式如下所示：

props.cardRowData

在window下面封装了一个对象“KDApi”，通过该对象可获取平台提供的自定义控件API，常用方法如下：

将自定义控件注册到平台中，该方法必须调用每个自定义控件，API为“KDApi.register”，其调用方式如下所示：

// 创建控件对象
function MyComponent (model) {
  // ...
}
// 将控件注册到平台中
window.KDApi.register('schemaId的值', MyComponent, config)
// 配置使用多语言
// isMulLang：是否使用多语言， 默认为false
// window.KDApi.register('schemaId的值', MyComponent,{ isMulLang: true })

KDApi.register参数说明

自定义控件可以动态加载“JS”、“CSS”文件，API为“KDApi.loadFile”，其调用方式如下所示：

// 加载单个JS文件
window.KDApi.loadFile('./js/a.js', model, callback)
// 如多个文件没有先后依赖关系的，可以并行加载多个文件，如
window.KDApi.loadFile(['./js/a.js', './js/b.js', './css/c.css'], model, callback)

KDApi.loadFile参数说明

自定义控件通过HTML模板和数据，生成“HTML”字符串，可以赋值给“innerHTML”，API为“KDApi.getHTMLStringBytemplate”，其调用方式如下所示：

var tpl = '<div>{{name}}</div>'
var data = {name: '张三'}
var result = window.KDApi.getHTMLStringBytemplate(tpl, data)
// => '<div>张三</div>'

KDApi.getHTMLStringBytemplate参数说明

自定义控件根据字符串模板的文件路径和数据，获取HTML字符串，可以赋值给“innerHTML”，API为“KDApi.getTemplateStringByFilePath”，其调用方式如下所示：

window.KDApi.getTemplateStringByFilePath('./html/tpl.html', model, {name: '张三'}).then(function (result) {
// => '<div>张三</div>'
var dom = document.getEleme