文档中心>短视频 SDK>含 UI 集成方案>微信小程序多端框架

微信小程序多端框架

最近更新时间:2025-05-26 11:05:42

我的收藏

服务引入

环境配置

环境要求

多端框架 SDK 的版本要求:iOS SDK ≥ 1.4.18;Android SDK ≥ 1.5.2。

权限要求

Android 端要求在适应 SDK 接口前申请好权限:android.permission.WRITE_EXTERNAL_STORAGE
iOS 端要求在适应 SDK 接口前申请好权限 NSAppleMusicUsageDescription

插件配置

打开多端应用,找到 project.miniapp.json 配置文件,找到其中的多端插件配置选项。


Android 插件配置

在 Android 插件配置中,需要填写下面选项:
1. 是否启用此插件:勾选
2. 插件 ID:wx9cfd2cd2a9497bf6
3. 插件版本:1.0.0(示例值)
4. 插件配置文件:不填

iOS 插件配置

在 iOS 插件配置中,需要填写下面选项:
1. 是否启用此插件:勾选
2. 插件 ID:wx9cfd2cd2a9497bf6
3. 插件版本:1.0.0(示例值)
4. 插件配置文件:不填

服务使用

集成 JS API

在 miniprogram 目录下执行如下命令安装 donut-ugc-editor :
npm i donut-ugc-editor
在微信开发者工具中构建 npm(路径:微信开发者工具 > 工具 > 构建 npm)。

使用方法

1. 引入 jsapi
import UGCEditor from "donut-ugc-editor"
2. 设置 License
2.1 参见 License 申请 的指引申请 License 后,从 云点播控制台 复制 License Key 和 License URL,如下图所示:

License 申请


2.2 在项目中调用 UGCEditor#setUGCLicense 方法来设置 License:
UGCEditor.setUGCLicense(
$licenseUrl,
$licenseKey,
(code,msg) => {
console.log("setUGCLicense listener => code:"+code+",msg:"+msg);
}
);
调用 UGCEditor#setUGCLicense 方法来设置 License 信息,需要的参数为:
licenseUrl :腾讯云申请到的 licenseUrl 信息。
licenseKey :腾讯云申请到的 licenseKey 信息。
callback :(code: number, msg: string) => void 。License 设置的回调信息,code = 0 时为成功,否则失败。
3. 进入 UGC 编辑页
UGCEditor.openUGCEditor(
$wxFilePath,
$minDurationInMilliSec,
$maxDurationInMilliSec,
(resultJSON)=>{
console.log("openUGCEditor success listener => resultJSON:"+JSON.stringify(resultJSON, null, 2));
},
(errorMsg)=>{
console.log("openUGCEditor fail listener => errorMsg:"+errorMsg);
},
()=>{
}
);
调用 UGCEditor.openUGCEditor 方法来进入到 UGC 编辑页面,它所需要的参数如下:
wxFilePath:要编辑的文件路径 (MP4格式),示例:wxfile://xxxxx.mp4。
minDurationInMilliSec:编辑后视频的最小时长,单位 ms。
maxDurationInMilliSec:编辑的最大时长,单位 ms。
success: (jsonStr: string) => void ,编辑完成之后的回调,返回编辑后视频的信息,格式为 JSON,内容包括:
duration:编辑后的视频时长,单位ms。
size:编辑后视频的文件大小,单位byte。
tempFilePath:编辑后视频路径,示例:wxfile://xxxxx。
tempThumbPath:编辑后视频封面图路径,示例:wxfile://xxxxx。
failed: (errMsg: string) => void ,编辑失败的错误信息。

运行效果示例

该方法执行之后,会调起 UGC 视频编辑页面,运行示例截图如下: