自定义控件-本地调试原创
金蝶云社区-吴锐雄
吴锐雄
10人赞赏了该文章 3,318次浏览 未经作者许可,禁止转载编辑于2022年03月04日 16:30:32

创作不易,如果文章对您有帮助,请为我点击一个朴实无华的赞^_^


从零开始使用自定义控件,请参考其他文章:


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


在开发自定义控件时,需要频繁的上传控件方案,开发效率低下。

门户上有一篇文章讲述了如何对本地的js进行调试,在使用这个方案时,遇到一些问题,做一些补充。


门户上的文章:

https://dev.kingdee.com/index/docsNew/1777b886-53d4-4f68-a4b9-22913db24973

Image_20211008175610.png


步骤:

1.创建另一个控件方案的路径。

2.在第1步创建的路径下,编写js文件,启动一个express服务作为代理。

3.在使用云苍穹的页面时,在url后面加一个请求参数,这样就不会使用原静态目录下的控件方案,而是加载express服务代     理的静态文件。


使用步骤详情:

1.在上传控件方案之后,在本地的静态文件目录下,会生成一系列路径:

isv/开发商标识/领域标识/控件方案名称,如下图:

image.png


我们需要在本地的其他目录下,创建另一个类似的路径,如下图,是我创建的另一个类似的路径

我创建了一个debugjs目录,新增了另一个路径:isv/开发商标识/领域标识/控件方案名称

image.png

在另一个类似的路径下,创建一个server.js文件

image.png


2.编辑server.js文件,把js代码门户上的复制进去

这个代码的意思是创建一个express服务,然后用express作为代理,把云苍穹需要的静态资源,代理到express服务目录下的静态文件,而不是用原来的静态文件。

express服务的详细用法,请搜索百度知乎。

image.png



3.启动

执行以下命令,启动server.js

npm install --save nodemon 
nodemon server.js

启动之后,如下图展示:

image.png


异常场景:

在执行命令行时,可能会报一些异常:

Express Command not found

Cannot find module 'serve-index' 等等异常

用npm命令行,分别安装一下Express 和配置serve-index就好了

npm install -g express
npm i --save express
npm i --save serve-index



4.使用

在浏览器中,访问页面时,后面加上一个参数:&kdcus_cdn=http://localhost:3001

image.png


5.到这里配置就完成了

要修改js代码,可以直接用visual code打开刚刚的express下的目录,修改里面的js即可

image.png


6.移动端打开调试

以上步骤建立完成之后,在移动端调试有些不一样:

点击 移动端预览界面,右侧的“新窗口打开”按钮

image.png


点击f12,打开调试模式,选中切换工具,让这个移动页面适应移动端。

image.png


修改url

原url:

http://ip地址:端口号/ierp/mobile.html?form=单据标识#/page/root2d6397d7180b4ef9bfab4bffb8708023


在原url的#/page路径前,加上&kdcus_cdn=http://localhost:3001,例如:

http://ip地址:端口号/ierp/mobile.html?form=单据标识&kdcus_cdn=http://localhost:3001#/page/root5ca407d738d04476bc71af06045898aa

image.png


7.异常场景

在使用过程中,出现过以下异常

image.png

分析了一下,发现是我的ip地址换了,所以重新修改一下脚本的ip地址,允许当前开发环境的ip 可以访问localhost即可:

修改跨域ip:

image.png




赞 10