在上一篇文章《小程序端视频剪辑的春天来了？》 一文中介绍了一款小程序端视频剪辑用的插件-微剪，其作为小程序端视频剪辑能力的补齐，相比于晦涩的底层API（小程序：好了好了，再说就多了），还是很有使用价值的。从上一个版本发布后，我也一直在关注着其动态，最近插件更新了1.4.2版本，在原有能力的基础上又多了几个比较有趣新特性，下面就跟大家分享下。

前言：如何升级至1.4.2

app.json 文件修改插件对应的version属性即可，如下所示：

  "plugins": {
    "myPlugin": {
      "version": "1.4.2", // <- 填写最新的版本号，写文章时是1.4.2
      "provider": "wx76f1d77827f78beb",
      "export": "index.js" // <- 很关键，后面要用
    }
  }

多段拍摄

之前版本（1.3.x）只支持单段拍摄，新的版本相机组件支持了多段拍摄，最多可以拍摄5段视频，总时长依旧是30s限制。除此之外，还新增了倒计时拍摄模式，使用自定义组件的时候可以自行控制倒计时时间，插件默认是3s。这个功能比较简单，没什么要特别强调的，大家自行下载代码片段体验即可。

值得一提的是，相机组件提供了两种不同的拍摄模式：simple和advanced模式，simple模式跟上个版本一样。advanced模式下，新增了对滤镜的支持，也就是说可以像抖音，快手那样拍摄之前设置一个滤镜效果，拍摄完后的视频就自带滤镜了，相比于整体设置滤镜更加灵活，如下图。

哎呦，不错哦

通过代码演示下这几个属性的用法

<wj-camera
	id='myCamera'
    mode="advanced"
    countdown="5"
    filter="{{customeFilter}}"
    bindready="onCameraReady"
    bindmediachanged="onMediaChanged" >
    <view class="preview-button" catchtap="onClickPreviewBtn">
        <navigator data-source="jump" url="../player/player" hover-class="none">
            <text>预览效果</text>
        </navigator>
      </view>
</wj-camera>

• mode：相机模式，可选值simple 和 advanced，只有advanced模式下才可以使用滤镜；
• countdown：倒计时，默认为0，即关闭倒计时，传入正整数开启倒计时模式；
• filter：拍摄用到的滤镜，仅advanced模式可用，可选值为getFilterList返回数据的key值。

PS：如果到这里你都看得一脸懵逼，wj-camera 是个啥？请自行上翻回顾下第一篇文章中的内容。

这里说几点滤镜的使用注意项：

1. filter的值为字符串，相机组件内置了一部分滤镜，可以通过下述方式获得

   let camera = this.selectComponent("#myCamera")
   let fiterList = camera.getFilterList()
   

   fiterList 的数据结构如下所示：

   [
     {
       key: "baixi",
       name: "白皙"
     },
     ...
   ]
   

   PS：1.4.2版本增加了新的访问插件内置资源的方法，下文会有介绍。

2. 只能在相机组件 ready 之后再设置滤镜，否则无效。

支持贴纸、表情

1.4.2版本新增了对贴纸和表情的支持，这个是此版本的一大亮点，进一步丰富了素材类型，前一篇文章我们提到了clip的概念，贴纸和表情也是通过一种新的clip类型 - sticker 实现的，插件目前支持的clip类型

插件内置贴纸、表情

可以在app.js中通过下述方式，获取插件内置贴纸(表情)：

var myPluginInterface = requirePlugin('myPlugin');
App({
  onLaunch: function () {
    let resources = myPluginInterface.resources
    global['resources'] = resources
    let {
      filters,
      effects,
      fonts,
      stickers
    } = resources
  }
})

上述方式可以获取到插件内置的所有类型的资源，其中stickers就是贴纸资源。相比于旧的api方式更加方便，推荐使用。

stickers的数据结构如下所示：

  {
    category: "default",  // 贴纸
    list: [
      {
        "key": "guozhi",
        "name": "果汁",
        "iconUrl": "https://cdn.cdn-go.cn/mp-video-edit-static/latest/stickerIcon/guozhi.png"
      },
      ……
    ]
  },
  {
    category: 'emoji', // 表情
    list: [
      {
        "key": "cuolian",
        "iconUrl": "https://cdn.cdn-go.cn/mp-video-edit-static/latest/emojiIcon/cuolian.png"
      },
      ……
    ]
  }

值得一提的是，插件不仅内置了一部分贴纸和表情，还提供了扩展的方法，支持用户自定义贴纸和表情，具体请参考文档自定义贴纸

设置字体

还记得上篇文章中那个平平无奇、被我一笔带过的文字输入组件 wj-textEditor 吗？它现在长这个样子：

1.4.2版本开始新增了对文字字体的支持，插件内置了几个字体，使用的时候请注意以下事项：

由于小程序插件无法调用wx.loadFontFace方法，因此需要小程序手动暴露该接口给插件，或者在小程序内提前加载字体后再传入插件渲染。

官方提供的两种解决方案：

方案1：小程序内加载完成后渲染（推荐），参考官方API：wx.loadFontFace

高级模式下如果使用到文字组件，推荐这种方案，配合文字组件的 fontList 属性，实现自定义字体的效果。

//  在小程序代码中加载字体
loadFontFace({
    family: 'familyName',
    source: "字体文件网络地址",
    scopes: ['webview','native'],
    success(res) {
      console.log('font success')
      console.log(res.status)
      resolve()
    },
    fail: function(res) {
      console.log('font fail')
      console.log(res.status)
      reject()
    }
  });

构造字体用clip，设置其fontloaded属性为true，标记为已加载。

 let mytext = new global['wj-types'].Clip({
      type: 'text',
      content: {
        content: "文字", // 文字内容
        style: {
          type: 'background', // 文字样式
          color: '#ffffff', // 文字颜色
          backgroundColor: '#ff00ff',  // 文字背景色
          fontfamily: 'familyName', // 上述字体名称
          fontloaded: true // 标记为已加载，避免重复加载
        },
        position: {
          x: 50,
          y: 90
        },
      },
      section: {
        start: 0,
        end: 10,
        duration: 10
      },
    })

方案2：暴露接口给插件

如果没有自定字体的需求，只使用插件内置的字体，可以采用这种方式。前提是要配置插件的export属性。插件指定 export 属性

// 小程序根目录 index.js 中添加如下代码（没有index.js就新建一个），将 wx.loadFontFace 方法暴露出来
module.exports = {
    loadFontFace: wx.loadFontFace
}

// 小程序根目录 app.json 文件指定暴露给插件的内容
  "plugins": {
    "myPlugin": {
      "version": "1.4.2", 
      "provider": "wx76f1d77827f78beb",
      "export": "index.js" // <- 这里
    }
 }

与贴纸、表情一样，插件内置了一部分字体，也提供了扩展的方法，支持用户使用自定义字体，具体请参考文档自定义字体

编辑素材

1.4.2版本新增了对添加到视频中的素材（文字、贴纸、表情）编辑功能，支持 删除、编辑（仅字体可用）、旋转放大、设置展示时间 如下图所示：

具体使用方式请移步官方文档 编辑控件

总结

如果说1.3.x版本是“小荷才露尖尖角”，1.4.2版本则可称之为“灼灼荷花瑞，亭亭出水中”，插件在原有基础视频剪辑功能的基础上，添加了更多娱乐性的探索，功能板块更加完善，可玩性更强。

横向对比了下抖音与快手等短视频软件的编辑功能，美中不足的是常用的转场动画和视频模板还是缺失的，而且使用久了会出现手机发热的问题（冬日暖手宝，为发热而生？），插件应该还是依赖小程序内置浏览器的内核，与原生的性能相比还是差一些，希望官方团队能优化下。

从插件的几个大版本更新内容来看，其一方面面向普通用户，旨在以类似low code的方式快速将插件应用到小程序中；另一方面面向开发者，在视频剪辑功能的基础上提供了一系列扩展方法，支持开发者根据各自需求自定义插件的内容，这部分对外暴露接口的部分相比于传统的视频剪辑工具还是很灵活的，对开发者也更友好。

微剪作为小程序端的首款视频剪辑类工具，还是很有学习、研究价值的，感兴趣的同学不防亲自试一下，探索更多的插件玩法。当然，也可以向官方提各自的需求，他们内部评审通过的话，响应还是挺积极的。

哦对了，示例代码片段我也更新了，感兴趣的同学自行 点击下载。