自定义控件-移动端自定义控件使用jQuery原创
金蝶云社区-吴锐雄
吴锐雄
4人赞赏了该文章 1528次浏览 未经作者许可,禁止转载编辑于2022年03月08日 18:21:31


背景

移动端的自定义控件不提供jQuerypc端是默认带有jquery的)。

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


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


实现过程

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

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

3.下载jquery文件

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

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

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


实现详情

1.下载模板

image.png


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中。

代码如下图:

image.png


3.下载jquery文件

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

image.png


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

image.png

上传:

image.png


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

结构代码如下:

image.png

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.创建移动表单。绑定自定义控件

image.png


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

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


效果

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

image.png

image.png


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

image.png


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

image.png








异常场景

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

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

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

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

image.png

image.png


解决方案:

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

如下图:

image.png



赞 4