自定义控件-自定义按钮

创作不易，如果文章对您有帮助，请为我点击一个朴实无华的赞^_^，我会更有动力地更新文章。

代码请查看附件

效果如下，添加一个自定义按钮，点击这个按钮，弹出浏览器提示框

实现思路：

1.创建.html文件，定义一个按钮

2.创建.css文件，定义按钮样式

3.创建index.js，并使用KDApi

4.在页面添加一个自定义控件

5.自定义控件新增控件方案，要注意id必须和index.js中的id一致

6.自定义控件使用新增的控件方案

testbt.html使用button标签定义一个按钮

<div>
    <button id="button" class="testbt" >快点我</button>
</div>

testbt.css定义按钮样式

.testbt{
    width: 200px;
    height: 50px;
}

index.js

/**
 *  自定义控件书写模板
 */
(function(KDApi, $){
    // 构造函数，变量名随意，与最后一句代码的KDApi.register的第二个参数一致即可
    function testbt (model) {
        this._setModel(model)
    }

    // 原型中封装生命周期函数，固定格式
    testbt.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
        }
    }

    var initFunc = function(model, props) {
        // KDApi.loadFile可以通过路径加载js或css文件，并且在html文件头生成script或者link标签，第一个参数是路径，第二个参数是model，第三个参数是加载完成后执行的回调函数
        KDApi.loadFile('./css/testbt.css', model, function() {
            // 通过路径去获取html字符串，第一个参数是路径，第二个参数是model，第三个参数是HTML模板中变量的值
            KDApi.getTemplateStringByFilePath('./html/testbt.html', model, {
                //text: ''
            }).then(function(result) {
                model.dom.innerHTML = result
                initEvent(model, props)
            })
        })
    }

    var initEvent = function(model, props){
        //内置了jquery对象，可直接使用$
        $('.testbt', model.dom).click(function(){
            // model.invoke，用于给后端发送请求，第一个参数是事件名，可自定义；第二个参数是发送给后端的数据，可以是任意类型
            // model.invoke('click', 'Hello World!')
            alert("hello world");
        })
    }

    // KDApi注册一个id号，这个id号要和控件方案的id号对应
    KDApi.register('clickbt', testbt)
})(window.KDApi, jQuery) // 这里的jQuery不是必须要传进去的，可移除，要用到的时候才传，PC端系统默认会有jQuery对象，版本是1.12.4

页面添加一个自定义控件

新增控件方案

自定义控件使用刚刚新增的控件方案