PageWidget 使用说明_网盘与相册服务(PDS)-阿里云帮助中心

本文介绍 PageWidget 的使用方法。

1. 构造方法

"自定义widget(iframe)挂载点" 和自定义样式：

iframe 默认会挂载到 body 下，可根据需要自定义 iframe 的挂载点，比如：

<div id="container"></div>

import { PageWidget } from 'aliyun-pds-js-widget';

const domain_id = 'bj1'; // 您的 domain_id
const token_info = {
  access_token: 'xxxxx',
  refresh_token: 'xxxxx',
  // ...
};

const widgetOpts = {
  widget_endpoint: `https://${domain_id}.apps.aliyunpds.com`,
  // 挂载点
  container: document.querySelector('#container'),
  // 自定义样式
  iframe_style: {
    width: '100%',
    height: '100%',
  },
  // 嵌入的页面
  module: 'drive/user',
  token_info,
  // 配置过期获取token函数。
  refresh_token_fun: async () => {
    // 业务处理逻辑，调用服务端封装的refreshToken接口。
    // new_token_info 从服务端获取
    // let new_token_info = await fetch(.....)
    return new_token_info;
  },
};

const ins = new PageWidget(widgetOpts);

PageWidget 构造参数：

字段	类型	必选	说明
module	string	是	组件名称。详见下方4. module 字段说明。
widget_endpoint	string	是	组件UI的入口 url。一般为domain的apps域名。
container	string or HTMLElement	是	组件挂载入口元素
lang	string		设置语言。支持 zh_CN, en_US。首次默认使用浏览器的 navigator.language。
token_info	Object	是	访问令牌, JSON Object, 至少包含 `access_token` 字段。
share_token	string		分享访问令牌，操作分享的相关资源时有用。
refresh_token_fun	Function	是	access_token 过期刷新 token 方法 ,需要返回新的 token_info
refresh_share_token_fun	Function		share_token 过期刷新 share_token 方法, 需要返回新的 share_token
iframe_style	Object		自定义 iframe 样式
iframe_attr	Object		自定义 iframe Attribute
menus	{name:string, hide:boolean}[]		文件操作菜单列表。可以指定隐藏某些菜单按钮。如 [{name: "sharelink", hide: true}]，其中 name为菜单名称，具体值见下方详见下方 5. menu 字段说明。

2. 实例方法

调用示例：

const ins = new PageWidget(widgetOpts)

// 调用方法
ins.setLang('zh-CN')

PageWidget 支持方法：

方法名	说明	参数说明
setToken	设置组件登录态	JSON Object, token信息
removeToken	清除组件登录态	无
setLang	设置组件语言	字符串，浏览器支持的语言类型，横线“-”替换成下划线“_”，如浏览器中的简体中文“zh-CN”对应的值为“zh_CN”
setShareToken	设置组件 share_token	string
on	监听事件	详见下文
destroy	销毁组件	无
changeModule	组件切换	字符串，组件名称，如"drive/user"。详见下方4. module 字段说明
setMenus	设置菜单项	文件操作菜单列表。可以指定隐藏某些菜单按钮。如 [{name: "sharelink", hide: true}]，其中 name为菜单名称，具体值见下方 5. menu 字段说明。

3. 监听事件

为组件开启事件监听，当组件发生指定事件时，会回调指定的方法。

示例：

const ins = new PageWidget(widgetOpts);

ins.on('事件名', function(data) {
  // do something...
})

支持的事件

事件名	说明	payload参数
load	组件首次渲染完成触发	无
error	监听组件错误	对象，当组件发生错误时触发，如{code: "TokenExpired", mesage:"xxx"}
tokenChanged	监听组件token变化	对象，`token`信息或`null`。
shareTokenChanged	监听组件share_token变化	对象，`share_token`信息或`null`。
langChanged	监听组件语言变化	字符串，语言名称，如`zh_CN`。
routerChanged	监听组件路由变化	字符串，斜杠开头的URL路径，如`/disk/widget/drive/user`。
fileChanged	监听文件变化	{"type": "copy", "fileList": []}，type为文件的操作类型，`fileList` 为对象列表，对象内容为文件信息，具体值见下方补充内容。
preview	触发预览、关闭预览时触发	对象，文件信息，退出预览时值为 `null`。
popup	监听弹窗变化	{"visible": false}，`visible`为布尔值，表示弹窗可见时为`true`，否则为`false`。

error 事件部分错误代码

TokenInvalid：token无效或未设置
TokenExpired：token过期

其他错误码参考：错误处理

fileChanged 事件回调参数说明

ins.on('fileChanged', ({type, fileList})=>{
  // 回调处理
})

字段

必选

类型

type

是

string

star：收藏。
copy：复制。
move：移动。
delete：放入回收站。
remove：彻底删除。
restore：移出回收站。
remark：修改备注。
rename：重命名。
create：创建。
upload：上传。

fileList

是

Object

必定包含属性如下：

drive_id。云盘ID，字符串。
file_id。文件ID。
parent_file_id。父级文件（夹）ID。
type。类型，file 或者 folder。

可能包含属性如下：

name。文件名。
created_at。创建时间，ISO格式。
size。文件大小，字节数。仅当 type 值为 “file” 的时候有值。
starred。是否被收藏，布尔值。
updated_at: 更新时间，ISO格式。

4. module 字段说明

可以通过 module 构造参数配置或者 changeModule 方法切换组件。

PageWidget 支持的组件名称

(用户界面)

drive/group：团队空间
drive/enterprise 企业空间
drive/user：个人空间
mycategory/image我的图片（搜索结果页面）
mycategory/video我的视频（搜索结果页面）
mycategory/audio我的音频（搜索结果页面）
mycategory/doc我的文档（搜索结果页面）
ishare：我的共享
share：收到共享
star：我的收藏
handover：接收的云盘
mysharelinks：我的分享
trash: 回收站

(管理员界面)

groups 团队管理
udrives 用户云盘
tdrives 团队云盘
shareConfig 共享授权设置
shareLinkManagement 分享设置管理
logAudit日志审计
standardCustom标准定制
seniorCustom 高级定制
fileAccess 文件访问
fileSettings 文件设置

PreviewWidget 支持的组件名称

office/preview：文档预览
office/editor：文档编辑
video/player：视频播放

示例：

const widgetOpts = {
  module: 'drive/user',
  // ...
}
const ins = new PageWidget(widgetOpts);

ins.changeModule('drive/group')

5. menu 字段说明

可以通过 menus 构造参数或者 setMenus 方法设置，来隐藏/显示页面的文件操作按钮，true为显示，false为隐藏。

download: 下载
share: 共享
sharelink: 分享
move: 移动
copy: 复制
star: 收藏/取消收藏
rename: 重命名
remark: 备注
detail: 详情
share_owner: 协同管理员
delete: 删除

示例：

const widgetOpts = {
  menus: [
    { name: 'download', hide: false },
    { name: 'copy', hide: false },
    { name: 'move', hide: false },
    { name: 'rename', hide: false },
    { name: 'delete', hide: false },
    { name: 'remark', hide: false },
    // ...
  ],
  // ...
}

const ins = new PageWidget(widgetOpts);

ins.setMenus([
    { name: 'download', hide: false },
    { name: 'copy', hide: false },
    { name: 'move', hide: false },
    { name: 'rename', hide: false },
    { name: 'delete', hide: false },
    { name: 'remark', hide: false },
  // ...
])