资源工坊

网页组件概述 ​

V7文档中心基于云文档标准场景，提供了一系列网页组件，帮助企业将自己的系统和文档中心紧密连接，快速复用文档中心基础功能。

使用场景 ​

文件选择器分享组件文件选择器(H5)
功能介绍文件选择器组件支持用户快速选中云文档的文件与文件夹(文件路径)，目前仅支持多选文件分享组件支持用户开启/关闭文件分享，添加分享协作者文件选择器(H5)组件支持用户快速选中云文档的文件与文件夹(文件路径)，目前仅支持单选
API文档文件选择器API文档分享面板API文档文件选择器(H5)API文档

使用流程 ​

  1. 申请并上架：云文档集成组件应用(APP ID: cloud.opencomponents)，版本不低于：V1.0.8(Universal)
  2. 进入WPS开放平台创建应用，并申请对应scope权限（申请的scope都为用户授权）
  • 文件选择器
    • kso.doclib.read
    • kso.doclib.readwrite
    • kso.drive.read
    • kso.file.read
    • kso.file.readwrite
    • kso.file.search
    • kso.file_link.readwrite
    • kso.file_permission.read
    • kso.file_permission.readwrite
    • kso.user_base.read
    • kso.sys_settings.read
  • 分享组件
    • kso.user_base.read
    • kso.drive.read
    • kso.file.readwrite
    • kso.file.read
    • kso.file_link.readwrite
    • kso.file_permission.readwrite
    • kso.file_permission.read
    • kso.doclib_settings.readwrite
    • kso.contact.readwrite
    • kso.contact.read
    • kso.group.read
    • kso.group.readwrite
    • kso.sys_settings.read
  • 文件选择器(H5)
    • kso.doclib.read
    • kso.doclib.readwrite
    • kso.drive.read
    • kso.file.read
    • kso.file.readwrite
    • kso.file.search
    • kso.file_link.readwrite
    • kso.file_permission.read
    • kso.file_permission.readwrite
    • kso.user_base.read
    • kso.sys_settings.read
  1. 在项目中引入对应js资源
  • 文件选择器
html
<!-- 引入umd资源 base为云文档域名+webpath -->
<script src="${base}/c/ecissdk/open/index.umd.js"></script>
<script src="${base}/c/directorychooser/index.umd.js"></script>
  • 分享组件
html
<!-- 引入umd资源 base为云文档域名+webpath -->
<script src="${base}/c/ecissdk/open/index.umd.js"></script>
<script src="${base}/c/sharemodal/index.umd.js"></script>
  • 文件选择器(H5)
html
<!-- 引入umd资源 base为云文档域名+webpath -->
<script src="${base}/c/ecissdk/open/index.umd.js"></script>
<script src="${base}/c/mobiledirchooser/index.umd.js"></script>
  1. 初始化集成组件
js
await CognacOpen.config({
  appId: "xxx001", // 应用id（应用ak）
  domain: "https://v7.wpseco.cn", // 云文档域名
  companyId: 3, // 企业id
  userToken: "xxx", //用户授权oauth2.0流程后用code换取的用户授权accesstoken（无需携带Bearer前缀）
});
  1. 调用对应组件
  • 文件选择器
js
// 打开文件选择器
CognacOpen.invoke('kit.yundoc.directoryChooser', 'open', {
    title,
    // 更多api
    onOk: (target, fileName) => {
        console.log('选中数据：' target)
        console.log('新文件名(显示文件重命名输入框时该参数才有值)：' fileName)
    },
    onCancel: () => {
        // 关闭文件选择器
        CognacOpen.invoke('kit.yundoc.directoryChooser', 'close')
    }
})
  • 分享组件
js
// 打开分享面板
CognacOpen.invoke("kit.yundoc.shareModal", "open", {
  linkId: "xxx", // 分享Id
  visible: true, // 面板显隐控制
  // 更多api
  onCancel: () => {
    // 关闭分享面板
    CognacOpen.invoke("kit.yundoc.shareModal", "close");
  },
});
  • 文件选择器(H5)
js
// 打开H5文件选择器
CognacOpen.invoke('kit.yundoc.mobileFileChooser', 'open', {
    title,
    // 更多api
    onOk: (target, fileName) => {
        console.log('选中数据：' target)
        console.log('新文件名(显示文件重命名输入框时该参数才有值)：' fileName)
    },
    onCancel: () => {
        // 关闭文件选择器
        CognacOpen.invoke('kit.yundoc.mobileFileChooser', 'close')
    }
})

Q & A ​

Q: 引入js资源报419的错如何处理？ ​

问题

A: 去运维平台将引入js资源的域名加入跨域白名单 ​

回答