通过学习《360°教你搞定“自定义控件”（入门篇）》、《360°教你搞定“自定义控件”（进阶篇）》、《360°教你搞定“自定义控件”（API手册）》系列文章，小黑已经可以熟练玩转自定义控件的开发。不过学无止境，小黑从白老师那又学到了一些自定义控件的高级开发技巧，就迫不及待地想来分享了。

本篇给大家介绍自定义控件的三个高级技巧：自定义控件嵌入表单、自定义控件多语言方案、自定义控件本地调试。

很多小伙伴会问到自定义控件如何使用苍穹内部的标准控件，这里小编给出答复：

自定义控件暂不支持使用平台标准控件。但但但！！！但是，自定义控件支持使用标准表单。要如何使用呢？带着疑惑，和小编一起往下看。

在使用前要明确两个概念：

1.elementId：自定义控件里面的元素id，也就是说，需要把表单插入到自定义控件的某个节点元素的id中。

2.targetKey：自定义控件id。通过targetKey找到对应的自定义控件。

在自定义控件中，通过showForm指令的方式嵌入标准表单，类型为InContainer，目标容器是自定义控件的elementId。

插件示例如下：

FormShowParameter parameter = new FormShowParameter();
parameter.setFormId(formId);
parameter.setShowTitle(false);

parameter.getOpenStyle().setShowType(ShowType.InContainer);
parameter.getOpenStyle().setTargetKey('自定义控件id');

Map<String, String> customParams = new HashMap<>();
customParams.put("elementId", '自定义控件里面的元素id');
parameter.getOpenStyle().setCustParam(customParams);

this.view.showForm(parameter);

1.在KDApi.register设置开启多语言功能，示例如下：

/*
  * KDApi.register新增第三个参数：config，object类型，没有传入时默认为空
  * isMulLang：是否使用多语言， 默认为false
*/
KDApi.register('dellabel', MyComponent, {
  isMulLang: true
})

2.在自定义控件根目录下，新建lang文件夹，lang文件夹下面新建zh_CN.json和en_US.json，用于表示多语言的文本。

新建lang目录

在lang文件下新建zh_CN.json文件

将index.js的中文词条抽出，放在zh_CN.json中，例如：zh_CN.json：{  "steps.key0001": "简单的步骤条" }。然后，将中文词条翻译为对应的多语言词条，例如：en_US.json：{"steps.key0001": "simple step bar"}。

3.使用KDApi.getLangMsg(model, key) 获取对应的文本。

以下以自定义控件dellabel为例，代码中有中文词条”标签“，则可在zh_CN.json文件写成如下形式：

{
    "dellabel.key0001": "标签1",   // 假如这是第一个词条
    "dellabel.key0002": "标签2"   // 假如这里有第二个词条
    "dellabel.key0003": "标签3{date}" // 假如这里有第三个词条，且词条里面含有一个变量date
    "dellabel.key0004": "标签4{date}, {text}" // 假如这里有第四个词条，且词条里面含有两个变量：date和text
}

在代码中，词条的位置如下所示：

代码中词条位置示例

同时，需要将“标签”改成KDApi.getLangMsg(model, 'dellabel.key0001')，示例如下：

var updateHtml = function(model, props){
  var lang = model.lang  // 获取自定义控件所在单据语言环境，默认中文
  var template = '<div class="hr-delLabel" title="<%= text %>">' +
                      '<div class="hr-delLabel-text">' +
                          '<%= text %>' +
                      '</div>' +
                      '<div class="hr-delLabel-icon"></div>' +
                  '</div>';
  var result = KDApi.getHTMLStringBytemplate(template, {
      text: props.data && props.data['text'] ? props.data['text'] : props.configItems ? props.configItems[0].value : KDApi.getLangMsg(model, 'dellabel.key0001')
      /*
        * KDApi.getLangMsg(model, 'dellabel.key0003', { date: new Date() })
        * KDApi.getLangMsg(model, 'dellabel.key0004', { date: new Date(), text: '文字内容' })
      */
  })
  model.dom.innerHTML = result;
  initEvent(model, props);
}

1.使用NodeJS的express模块建立一个静态资源服务，示例如下：

// server.js
const express = require("express"); // npm i --save express
const app = express();
const path = require('path')
const serveIndex = require('serve