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

女爷i 2021-07-24 15:56 189阅读 0赞

# web app builder for arcgis 引入第三方js #

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

## 一、引入纯JS文件的 ##

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

### 1、全局通用的JS文件 ###

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

[![format_png][]][format_png 1]

②、修改<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文件后面

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70 1][]

[format_png]: /images/20210724/bdd9f320a4514a0182392053b5600c4e.png
[format_png 1]: http://images.esrichina.com.cn/987131-20160901150418105-557219392.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70]: /images/20210724/1e245b3e38154727874014c15d47ec70.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70 1]: /images/20210724/1c49d47cd33d4a08ab8951f65d22a89f.png