(WAB 【一】)创建自定义面板内小部件
拿到一个新的web app builder(WAB)项目,创建自定义面板内小部件,过程如下:
设要创建的小部件文件夹路径为:
项目名/widgets/小部件文件夹名
1.修改项目名/widgets/小部件文件夹名/Widget.js
文件
define([
'dojo/_base/declare',
'jimu/BaseWidget'
], function(declare,
BaseWidget) {
return declare([BaseWidget], {
// Custom widget code goes here
baseClass: 'jimu-widget-zhuanti'//jimu-widget-name
});
});
2.修改项目名/widgets/小部件文件夹名/Widget.html
文件
<div style="width: 100%;height: 100%;">
<div style="width: 100%;height: 100%;">This is my widget.</div>
</div>
3.修改项目名/config.json
文件,找到"widgetPool"下的"widgets"
{
"name": "Zhuanti",//与小部件文件夹名相同
"label": "Zhuanti",//随意,这是小部件在web上显示的名称
"version": "2.15",//WAB版本号
"uri": "widgets/Zhuanti/Widget",//Widget.js的路径
"index": 1,
"id": "widgets_Zhuanti_Widget_10",//随意取个id
"icon": "widgets/Zhuanti/images/icon.png"//图标
},
4.修改项目名/widgets/小部件文件夹名/manifest.json
文件
{
"name": "Zhuanti",//与文件夹名相同
"2D": true,//是否支持2D
"3D": true,//是否支持3D
"platform": "HTML3D",
"version": "2.15",
"wabVersion": "2.15",
"author": "Esri R&D Center Beijing",
"description": "",
"copyright": "",
"license": "http://www.apache.org/licenses/LICENSE-2.9",
"properties": {
"inPanel": true,//重要。设置为true才会显示在面板中
"hasUIFile": true
}
}
该过程即实现生成一个小部件,点击小部件弹出位于面板内的内容。
官网参考:
manifest.json文件参考