快速开始-智能创作-文档中心-腾讯云

准备工作
已登录注册微信小程序并获得小程序的 appid。
已获得微剪插件使用权限。
说明
 具体操作请参见 准备工作。
代码接入
步骤1：打开项目
注册完成 小程序 后，在微信开发者工具里 新建小程序项目。
说明
 若您当前已有小程序，直接打开即可。
步骤2：引入插件
在项目根目录下的app.json中插入以下代码，详情参考小程序使用插件：
"plugins": {
    "myPlugin": {
    "provider": "wx76f1d77827f78beb", // 固定值
    "version": "1.7.0", // 取最新版本号
    "export": "index.js" // 导出到插件部分的内容
    }
 }
在小程序目录新建index.js，暴露插件所需的接口:
module.exports = {
  downloadFile:wx.downloadFile, // 文件下载
  loadFontFace: wx.loadFontFace, // 字体加载
  getFileSystemManager: wx.getFileSystemManager, // 模板功能用文件系统接口实现本地包缓存
  realtimeLogManager: wx.getRealtimeLogManager(), // 错误日志上传
  USER_DATA_PATH: wx.env.USER_DATA_PATH // 文件系统中的用户目录路径 (本地路径)
}
注意
 由于插件更新频繁，上述的version版本号不一定是最新的，若要体验最新的特性请务必留意 版本号 。
myPlugin：微剪插件的别名，可以改为其他名称，主体小程序中统一使用此别名。
provider：插件提供方，其值为微剪插件的 appid，即wx76f1d77827f78beb。
version：微剪插件的 版本号，一般选择最新版本。
步骤3：访问入口组件或者配置模板页面
通常会在主体小程序中通过点击按钮的方式访问插件，提供两种访问方式：跳转至相机组件和直接访问模板列表页，二者可同时使用，也可单独存在。
插件1.6.0版本新增模板功能，clip中自带模板入口，原有接入组件方式不变；若需要直接访问模板页面，也可以通过配置页面跳转的方式实现。
3-1：以相机页作为插件入口，底部自带模板列表入口 
1. 在项目中的 pages 目录下新建一个页面如：test
--- mini-program
  --- pages
--- test
​     --- test.js
​     --- test.json
​     --- test.wxml
​     --- test.wxss
2. 在页面对应的配置文件 test.json 中加入以下代码引入插件提供的 clip 组件：
 "usingComponents": {
"my-clip": "plugin://myPlugin/clip" // “myPlugin”需与app.json中定义一致，“clip”为固定值
  }
3. 编写页面模板 test.wxml：
 <view>
<my-clip></my-clip>
 </view>
4. 注入插件配置，具体配置项可参考 自定义配置 中的配置项说明部分：
注意
 新版本（1.7.0）统一使用 initPlugin 的方式初始化配置，旧的通过 clip 组件配置 settings 属性的方式已不推荐。
<!-- 初始化逻辑通常写在app.js中-->
const plugin = requirePlugin("myPlugin")
﻿
App({
  onLaunch: function () {
 if(plugin.initPlugin){
   const settings = {
     theme: {
       primaryColor: "rgba(255,88,76)",  // 主题色
       textColor: "#fff", // 文字色
       disableColor: "#ddd", // 禁用色
       backgroundColor: "#000", // 整体背景色
     },
     common: {
       clipMaxDuration: 60, // 裁切时长的默认限制
       clipMinDuration: 1, // 裁切时长最短限制
       chooseMaxDuration: 1000, // 选择视频的默认时长限制
       imgDisplayDuration: 3, // 单张图片默认展示时间（秒）
       allMediaNum: 9, // 所有素材数量限制
       videoMediaNum: 5, // 视频素材数量限制
     },
     // 其他配置项
   }     
   plugin.initPlugin(settings)  // 手动初始化插件
 }
  }
})
﻿
3-2：以模板页作为插件入口
若有不经过相机组件、直接跳转至模板页的需求，可以通过配置模板页跳转链接的方式，从主体小程序中直接跳转至插件模板列表页，不需要编写上述的 test 页面。
<!-- 主体小程序中的跳转配置 -->
<navigator url="plugin://myPlugin/main?mode=template">
   <view>视频模板</view>
</navigator>
注意
 此方式需要手动初始化插件，以传入自定义 settings。
<!-- 初始化逻辑通常写在app.js中-->
const plugin = requirePlugin("myPlugin")
﻿
App({
  onLaunch: function () {
    if(plugin.initPlugin){
    const settings = {
      ……
    }
    plugin.initPlugin(settings)  // 手动初始化插件
    }
  }
})
﻿
步骤4：配置导出页（可选） 
导出操作提供了接口，支持自定义导出页面，如果没有自行实现的话会跳到插件内置默认导出页面。如果有自定义导出页UI的需求，可按照如下方式操作：
步骤4-1：创建导出页
在项目的 pages 目录里新建 export 页面目录。
--- mini-program
  --- pages
   --- export
​     --- export.js
​     --- export.json
​     --- export.wxml
​     --- export.wxss
步骤4-2：配置页面路径
自定义配置 settings 中加上导出页配置项，内部会在编辑完成后跳转到指定的导出页：
settings: {
  ……
  export: {
      exportPagePath: "../export/index", // 指定自定义导出页路径
   },
}
步骤4-3：引入插件提供的导出组件
在上述自定义导出页的配置文件 export.json 中引入插件提供的 export 组件：
"usingComponents": {
  "export": "plugin://myPlugin/export" // “myPlugin”需与app.json中定义一致，“export”为固定值
}
在 export.wxml 中自定义UI：
自定义UI部分
<export
   bindexportsuccess="handleExportSuccess"
   watermark="https://cdn-weijian-1258344699.file.myqcloud.com/images/watermark.png">
   <button>导出视频到本地</button>
</export>
步骤5：通过开发者工具预览效果
注意
 微剪使用 webgl canvas 进行了重量级的渲染工作，目前微信开发者程序不支持调试功能，因此请用手机扫码预览进行调试（真机调试也是不通的）。

快速开始

本页目录：

准备工作

代码接入

步骤1：打开项目

步骤2：引入插件

步骤3：访问入口组件或者配置模板页面

3-1：以相机页作为插件入口，底部自带模板列表入口

3-2：以模板页作为插件入口

步骤4：配置导出页（可选）

步骤4-1：创建导出页

步骤4-2：配置页面路径

步骤4-3：引入插件提供的导出组件

步骤5：通过开发者工具预览效果