Question

我试图将jquery和jquery-modal（https://jquerymodal.com/）的本地版本仅添加到我的窗口小部件和窗口小部件中，因为它将仅在窗口小部件中使用。

我尝试在我的小部件根文件夹（widget.js / html所在的位置）中创建一个名为“ extraLibs”的文件夹，并在代码的define（[]）和function（）部分的widget.js中引用它，但我做错了，因为它返回“未定义jQuery”错误，因此我认为问题出在我如何在“ extraLibs”文件夹中声明.js文件。

然后我去https://jquerymodal.com/，获取CDN链接，并下载了两个.js文件，将它们重命名为jQuery.js和jQueryModal.js，并将它们放置在“ extraLibs”文件夹中。

然后我这样声明它们：

define([... './extraLibs/jQuery', './extraLibs/jQueryModal'],
function(... jQuery, jQueryModal){
//code goes here
});

单击打开的小部件后，它在控制台中返回“未定义jQuery”错误。

我已经按照thread进行了尝试，没有运气。

将外部库添加到小部件的正确方法是什么？

Answer 1

通过执行以下操作，我能够在小部件级别成功加载jQuery：

define([... 'jimu/loaderplugins/jquery-loader!https://code.jquery.com/jquery-3.4.1.min.js'],
function(...){
//code goes here
});

对于jquery-modal模块，我将其代码移到了postCreate函数中，将其直接嵌入到widget.js中。

Answer 2

Arcgis Web AppBuilder（WAB）在init.js文件中定义了 dojoConfing 变量。如果仔细观察，会发现在其中定义了一个“ libs”包：

...
,{
  name: "libs",
  location: window.path + "libs"
},
...

因此，您可以将外部库放在libs文件夹（wab / server / apps / 1 / libs /-对于ID为1的应用程序）中，然后使用以下方法引用该库：

//File: MyWidget.js
define([
'libs/JQuery', 
'libs/lib2',
'libs/lib3'
],function(jQuery, Lib2, Lib3){
 //...
});

我没有测试这段代码，但是从WAB默认小部件来看，这似乎是预期的方式。

您可以在Web AppBuilder in this video上找到更多很棒的提示。

Answer 3

如果您使用的是arcgis javascript API，因此您在使用dojo之前先设置一个dojoConfig对象。

<script type='text/javascript'>
var dojoConfig = {
aliases [
['jQuery', 'extraLibs/jquery/jquery.js'],
['jQueryModal', 'extraLibs/jquery-modal/jquery-modal.js']
]
}
</script>
<script src="https://js.arcgis.com/3.28/"></script>

然后在您的主要JavaScript文件中，您只需引用别名

define[... 'jQuery', 'jQueryModal],
function(... jQuery, jQueryModal){
});

将自定义库添加到ArcGIS Web AppAbuilder中的窗口小部件

3 个答案: