自定义控件-移动端自定义控件使用jQuery

背景

移动端的自定义控件不提供jQuery（pc端是默认带有jquery的）。

在使用自定义控件时，有时需要用到其他第三方JavaScript框架。

以一个移动端的简单例子，在移动表单引入jQuery，或者其他第三方js。

实现过程

1.【系统服务云】【系统管理】【登录页配置】下载模板

2.修改模板中的 index_m.js，文件，让这个文件去加载js代码

3.下载jquery文件

4.压缩js文件为zip包，然后上传

5.创建自定义控件中，使用jquery

6.创建移动表单。绑定自定义控件

实现详情

1.下载模板

2.修改模板的代码：

模板下面有两个文件：index.js 和 index_m.js

index.js是pc端的，如果有第三方的JavaScript框架要在pc端的自定义控件上使用，可以写在这个文件里面。

index_m.js是移动端的，作用和index.js类似。

因为我是准备在移动端上使用jquery，所以在index_m.js文件中加载jquery，因为移动端的自定义控件中需要使用jquery，所以需要在自定义控件初始化之前，加载完jquery的js文件，所以只在如下图加上代码即可。

如果是想在平台的js运行后才加载扩展的js，需要在写在window.afterLoaded中。

代码如下图：

3.下载jquery文件

在浏览器中，右键 另存为 到本地即可

4.压缩js文件为zip包，然后上传

上传：

5.在移动端的自定义控件中，使用jquery

结构代码如下：

index.js

(function(KDApi, $) {
    function clickbt_mob(model) {
        this._setModel(model)
    }

    clickbt_mob.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.templateFilePath('./html/index.html',model,null).then(result => {
            model.dom.innerHTML = result;
            initEvent(model,props);
        })
    }

    var initEvent = function(model, props) {
        $('#clickbt', model.dom).click(function(){
            alert("hello kingdee and wrx");
        })
    }

    // KDApi注册一个id号，这个id号要和控件方案的id号对应
    KDApi.register('clickbt_mob', clickbt_mob)
})(window.KDApi, jQuery)

/html/index.html

<div>
    <button id="clickbt">快点我</button>
</div>

6.创建移动表单。绑定自定义控件

创建移动表单，自定义控件的步骤在这里省略部分，如果想了解详情，请查看我的其他文章：

https://vip.kingdee.com/article/150626162270913792

效果

预览表单，打开f12，浏览器的调试模式

发现确实加载了jquery文件，这样，在移动端里面就能使用jquery文件了。

点击按钮，成功弹出消息，说明，jquery代码是生效的

异常场景

发现界面一直在加载，或者一片空白。

f12进入调试模式，如果发现抛异常，提示加载不到到 jquery的js文件，

或者在浏览器中，没有看到加载index_m.js文件。

以下这两张图是正常加载的情况：

解决方案：

在static-file-service\isv\开发商标识\globalfiles中手动添加几个js文件。

如下图：