腾讯云剪 快速接入指南

准备工作

步骤1：注册腾讯云账号

注册腾讯云 账号，并完成 实名认证。

步骤2：注册小程序账号

登录 微信公众平台，选择【账号分类】>【小程序】，按接入流程注册小程序，并记录小程序的 appid。

步骤3：申请插件权限

1. 在小程序管理后台的【设置】>【第三方设置】中选择【添加插件】。

2. 在弹出的面板中搜索"微剪"，选中插件并添加。

注意：

注意：目前暂时只支持iOS设备。

步骤4：购买插件使用权限

1. 登录云点播控制台，选择【微剪插件】。

2. 根据页面提示填入小程序的 appid 等信息。

代码接入

步骤1：打开项目

注册完成小程序后，在微信开发者工具里新建小程序项目。

说明：

若您当前已有小程序，直接打开即可。

步骤2：引入插件

在项目根目录下的app.json中插入以下代码：

复制

复制成功

 "plugins": {
    "myPlugin": {
     "provider": "wx76f1d77827f78beb",
     "version": "1.0.0"
    }
   }

步骤3：编写页面

1. 在项目中的 pages 目录下新建一个页面 clip：

   复制

   复制成功

   --- mini-program
   --- pages
   --- clip
        --- clip.js
        --- clip.json
        --- clip.wxml
        --- clip.wxss

2. 在 clip 页面对应的配置文件中加入以下代码引入 clip 组件：

   复制

   复制成功

   "usingComponents": {
   "my-clip": "plugin://myPlugin/clip"
   }

3. 打开clip.wxml,，编写页面模板：

   复制

   复制成功

   <view>
   <my-clip
       settings="{{settings}}"
   \></my-clip>
   </view>

4. 打开clip.js，将 settings 配置写入 data：

   复制

   复制成功

   Page({   
   data: {
   settings: {
   common: {
       videoMaxDuration: 30, // 小程序限制最多拍摄30秒
       chooseMaxDuration: 1000, // 选择视频的默认时长限制
       clipMaxDuration: 60, // 裁切时长的默认限制
         }
        }
     }
   })

步骤4：预览

单击开发者工具中的【预览】，进入 clip 页面即可看到组件成功加载。完成后即可进行拍摄编辑。

导出视频

导出操作提供了接口，支持自定义导出页面，如果没有自行实现的话会跳到我们默认提供的导出页面中。

步骤1：创建页面

在完成 第二步 引入 clip 组件之后，还需要引入 export 实现导出操作。在项目的 pages 目录里新建 export 页面目录。

复制

复制成功

--- mini-program
  --- pages
   --- clip
     --- clip.js
     --- clip.json
     --- clip.wxml
     --- clip.wxss
   --- export
     --- export.js
     --- export.json
     --- export.wxml
     --- export.wxss

步骤2：配置页面路径

在 clip 的 settings 中加上配置项，内部会在编辑完成后跳转到定制的导出页：

复制

复制成功

settings: {
  common: {
   videoMaxDuration: 30, // 小程序限制最多拍摄30秒
   chooseMaxDuration: 1000, // 选择视频的默认时长限制
   clipMaxDuration: 60, // 裁切时长的默认限制
   exportPagePath: '/pages/main/export/index'
  }
 }

步骤3： 组件引入

1. 在export.json中引入 export 组件：

   复制

   复制成功

   "usingComponents": {
         "export": "plugin://myPlugin/export"
   }

2. 在export.wxml中编写模板：

   复制

   复制成功

   <export  bindexportsuccess=“handleExportSuccess" watermark="https://cdn./mp-video-edit-static/latest/images/watermark.png">
   <button>导出视频到本地</button>
   </export>