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