帮你快速理解、总结文档立即下载
文档中心>智能媒资托管>SDK 文档>SMH UIKit>H5 网页 UIKit

H5 网页 UIKit

最近更新时间：2026-05-06 17:29:22
我的收藏

本页目录：

准备工作

1. 您需要一个 H5 应用，这个应用可以是您现有的工程，也可以是您新建的一个空的工程。
2. 请确保您的 H5 应用支持 ES6 的现代浏览器（Chrome、Safari、Firefox、Edge 等）。

操作步骤

步骤1：获取 SDK

从 cnb 根目录下 h5 目录下载 smh uikit：
h5/
├── index.html          # 入口页面
├── h5App.js            # SDK 核心 JS
├── page/
│   └── smh_ui_kit.js   # 业务逻辑 JS
└── assets/             # 资源文件

步骤2：部署静态文件

将产物中的所有文件部署到您的 Web 服务器，保持目录结构不变。例如部署到 https://your-domain.com/smh/：
https://your-domain.com/smh/
├── index.html
├── h5App.js
├── page/smh_ui_kit.js
└── assets/...

步骤3：加载 SDK 脚本

按您的部署目录选择对应路径。
如果 H5 产物直接部署在当前页面同级目录下，请使用：
<script src="./page/smh_ui_kit.js" type="text/javascript"></script>
<script src="./h5App.js" type="text/javascript"></script>
如果您将整套产物放在 sdk/ 子目录下，请使用：
<script src="./sdk/page/smh_ui_kit.js" type="text/javascript"></script>
<script src="./sdk/h5App.js" type="text/javascript"></script>
说明：
发布产物自带的 index.html 默认使用根目录相对路径：page/smh_ui_kit.js 与 h5App.js。

步骤4：打开文件管理页面

调用 window.SmhUiKit.openPage(smhConfig, accessTokenProvider, pageName)：
smhConfig：SMH 配置对象
accessTokenProvider：需要实现 getAccessToken(callback)
pageName：可选，默认为 smh_netdisk
<script>
  function buildAccessTokenProvider() {
    return {
      getAccessToken: function(callback) {
        fetch('https://your-server.com/api/smh/token')
          .then(function(res) { return res.json(); })
          .then(function(data) {
            callback({
              accessToken: data.token,
              token: data.token,
              startTime: data.startTime,
              expiresIn: data.expiresIn
            });
          })
          .catch(function() {
            callback({ errorMsg: '获取 Token 失败' });
          });
      }
    };
  }

  var smhConfig = {
    host: 'https://xxx.api.tencentsmh.cn',
    libraryId: 'your-library-id',
    spaceId: 'your-space-id'
  };

  window.SmhUiKit.openPage(smhConfig, buildAccessTokenProvider(), 'smh_netdisk');
</script>
嵌入到已有页面（iframe 方式）
如果您希望将文件管理嵌入到已有页面中，可以使用 iframe 承载部署后的 H5 页面，再由 iframe 内宿主页面主动调用 window.SmhUiKit.openPage(...)。

SmhConfig 参数

参数
说明
类型
是否必填
host
SMH API 地址，如 https://xxx.api.tencentsmh.cn
String
是
libraryId
媒体库 ID
String
是
spaceId
空间 ID
String
是
path
初始 space 目录路径，默认根目录
String
否
userId
用户 ID（SMH 服务端概念）
String
否

AccessToken 参数

参数
说明
类型
是否必填
token
访问凭证
String
是
startTime
Token 起始时间（毫秒时间戳）
number
是
expiresIn
有效时长（秒）
number
是
说明：
startTime 和 expiresIn 用于描述 Token 有效期。SDK 内部会优先复用未过期 Token，接入方无需额外管理 Token 生命周期。
中国站