web app builder for arcgis 引入第三方共享库(最全最详细攻略)

web app builder for arcgis 引入第三方js

WAB 经常需要引入第三方的共享库,目前应该主要包括两种第三方的共享库,第一种,引入纯JS文件即可的,第二种需要引入JS和CSS样式的。

一、引入纯JS文件的

这种一般有两种情况:全局的JS文件,所有微件都能用到的;某个widget单独用到的JS文件

1、全局通用的JS文件

①、首先把需要共享引用的第三方库添加到以下目录:<WebAppBuilderForArcGIS安装目录>\client\stemapp\libs。 

web app builder for arcgis 引入第三方共享库(最全最详细攻略)


②、修改<WebAppBuilderForArcGIS安装目录>\client\stemapp\libs\main.js。在Define函数的依赖数组中添加刚才添加的第三方类库。以添加echart类库为示例,注意该路径一定要指向到具体的JS文件,不能知道文件所在的文件夹: 
define(["./usng/usng", "./storejs/json", "./storejs/store", "./md5/md5", "./qrcode","./echarts"], function(){ 
}); 
③、在需要引用该类库的Widget的定义代码中引用。这里假设Widget.js的所在目录结构为<WebAppBuilderForArcGIS安装目录>\client\stemapp\Widgets\<自定义的Widget目录>\Widget.js,则定义代码Widget.js应这样来引用共享类库: 
define(['dojo/_base/declare', 'jimu/BaseWidget',"../../libs/echarts"] 
, function(){ 
}); 

2、某个微件单独用到的JS文件

把JS文件之间放到微件里面,然后微件中直接引入即可,定义代码Widget.js应这样来引用共享类库: 
define(['dojo/_base/declare', 'jimu/BaseWidget',"../../libs/echarts"] 
, function(){ 
}); 

二、引入JS文件和CSS样式的

一般同样放到libs下面,建立一个文件夹存放JS和css文件,然后在index.html页面中利用标签引入:

JS文件,最好放在jquery.js文件后面

web app builder for arcgis 引入第三方共享库(最全最详细攻略)

web app builder for arcgis 引入第三方共享库(最全最详细攻略)