介绍

Web小组件是一个被编译成JS文件的异步Vue组件，用于Web端的凌云工作台门户上。

工作台组件栅格布局系统，是基于Vue Grid Layout插件，部分参数可参考 GridItem

完整的小组件从开发到使用的流程为两部分：

• 开发者：创建——编译——上传部署——绑定套件——发布上线；
• 用户：安装套件——可视化配置布局；

小组件结构

├─static
│  └─widget
│      └─web                // 存放WEB小组件目录
│         ├─comp-a          // 小组件名，即文件夹名
│         │   ├─index.vue   // 主入口
│         │   ├─meta.json   // 配置文件（配置小组件名称、大小高宽拉伸参数）【用于上传】
│         │   ├─icon.png    // 图标【用于上传】
│         │   └─comp-a.js   // 编译后文件，根据小组件名生成【用于上传】
│         └─comp-b
│             └─ ...

meta.json 配置文件说明

{
    "info": {
        "desc": "用户分析", // 小组件名称
        "enabled": true // 是否启用（在套件中是否可见，默认启用）
    },

    "props": {
        "w": 6,
        "h": 4,
        "minW": 4,
        "minH": 4,
        "maxW": "Infinity", 
        "maxH": "Infinity",
        "isResizable": true
    }
}

注：props里的属性也可不配置或删除，即按工作台默认。

props具体属性

w

type: Number
required: false
标识栅格元素的初始宽度，值为整数。

h

type: Number
required: false
标识栅格元素的初始高度，值为整数。

minW

type: Number
required: false
default: 1
栅格元素的最小宽度，值为整数。

如果 w 小于 minW，则 minW 的值会被 w 覆盖。

minH

type: Number
required: false
default: 1
栅格元素的最小高度，值为整数。

如果 h 小于 minH，则 minH 的值会被 h 覆盖。

maxW

type: Number
required: false
default: Infinity
栅格元素的最大宽度，值为整数。(Infinity: 不限制)

如果 w 大于 maxW，则 maxW 的值会被 w 覆盖。

maxH

type: Number
required: false
default: Infinity
栅格元素的最大高度，值为整数。(Infinity: 不限制)

如果 h 大于 maxH，则 maxH 的值会被 h 覆盖。

isResizable

type: Boolean
required: false
default: true
标识栅格元素是否可拉伸。

index.vue 文件说明

该文件是编译小组件的主入口，可引用其他vue模块

功能解析

1、接口请求方法（$REQUEST）

this.$REQUEST({
    url: `${this.$BASE_URL}/console-api/user/v1/me`,
    method: 'GET'
})

2、接口请求前缀（$BASE_URL）

this.$REQUEST({
    url: `${this.$BASE_URL}/console-api/user/v1/me`,
    method: 'GET'
})

3、当前用户令牌（$TOKEN）

console.log('userToken==>', this.$TOKEN)

4、引用图片

引用的图片将会编译成Base64编码到JS小组件文件里（会影响JS文件大小）

icon.png 文件说明

该图片是小组件的图标文件

xxx.js 文件说明

该与文件夹名字相同的JS文件，是为编译后生成的JS文件，是工作台门户里加载的小组件文件。

编译说明

编译前需要安装当前工程依赖

npm install

使用NPM编译

• 全部编译

  将会对/static/widget/web/ 里的每个文件夹进行编译
  npm run build:widget

• 编译指定名称的表单

  npm run build:widget -n xxx(文件夹名)

npm run build:widget -n comp-a

预览小组件

打开页面，输入以下路由即可查看（未编译预览/已编译预览）；xxx为当前工程二级路由：

http://localhost:80/xxxx/preview

可根据实时参数，再填写meta.json配置，以达到最好的显示效果。

上传部署小组件

部署所需文件：

• meta.json
• icon.ong
• xxx.js（xxx文件夹名）

PAI 工具部署

注：小组件存在版本隔离，每次部署将会进行添加0.01个版本，即1.01 => 1.02。

pai widget deploy web -n xxx(文件夹名)

示例：pai widget deploy web -n comp-a

简要步骤

1、web组件发布pai widget deploy web
2、云端-开发中心-沙箱安装对应套件
3、云端-工作台(控制台)测试
4、测试无误，如果边端安装的套件是预发行版本，云端-开发中心-版本管理-预发行版本-查看内容-保存
5、边端-运营中心-同步套件
6、边端-控制台-更新套件