UniApp 小程序封装原生组件（使用与交互详细流程）

一、简介

• 在使用 UniApp 进行多平台小程序开发的时候，发现 UniApp 官方组件在其中部分平台无法生效，或新的属性还没有进行支持，这个时候可以自行封装一个原生组件，并使用到 UniApp 中。

  

  

• 参考文档：

  • platforms 文件夹使用命名文档

  • wxcomponents、kscomponents … 文件夹使用命名文档

二、案例：封装一个快手播放器组件 ks-video

• 按下面原生写好组件，也按上面导入之后，直接在对应页面使用 <ks-video></ks-video> 即可，跟正常 vue 的组件一样，记得区分平台进行条件编译。

• index.css 没啥好写的。

• index.ksml

  <view class="ks-video-view">
    <video
      class="inner-class"
      style="{{ innerStyle }}"
      id="{{ id }}"
      src="{{ src }}"
      controls="{{ controls }}"
      autoplay="{{ autoplay }}"
      loop="{{ loop }}"
      muted="{{ muted }}"
      initial-time="{{ initialTime }}"
      duration="{{ duration }}"
      object-fit="{{ objectFit }}"
      show-progress="{{ showProgress }}"
      show-fullscreen-btn="{{ showFullscreenBtn }}"
      show-play-btn="{{ showPlayBtn }}"
      enable-progress-gesture="{{ enableProgressGesture }}"
      show-mute-btn="{{ showMuteBtn }}"
      bindplay="handleStart"
      bindpause="handlePause"
      bindended="handleEnded"
      bindtimeupdate="handleTimeupdate"
      bindfullscreenchange="handleFullscreenchange"
      binderror="handleError"
    >
    </video>
  </view>
  

• index.json

  {
      "usingComponents": {},
      // 是组件，记得填 true
      "component": true
  }
  

• index.js

  对外参数在 vue 中可以按正常参数使用，例如：:src="url"

  对外抛出的事件在 vue 中可以按正常参数使用，例如：@start="handleStart"

  // 自定义组件参考：https://mp.kuaishou.com/docs/develop/frame/custom_comp/component_constructor.html
  // video 参考：https://mp.kuaishou.com/docs/develop/components/media/video.html
  // 组件封装
  Component({
    // 外部样式属性定义，其实也就是把内部需要外部支持的 class 名称放这里导出
    // 在外部直接使用导出的名称字段关联即可，可以同时导出多个，这里是数组 ['','',...]
    externalClasses: ['inner-class'],
    // 对内参数
    data: {
    },
    // 对外参数（prop）
    properties: {
      // 内部样式
      innerStyle: {
        type: String,
        value: ''
      },
      // 唯一标识符
      id: {
        type: String,
        value: ''
      },
      // 播放地址
      src: {
        type: String,
        value: 'http://vjs.zencdn.net/v/oceans.mp4'
      },
      // 显示默认播放控件（播放/暂停按钮、播放进度、时间）
      controls: {
        type: Boolean,
        value: true
      },
      // 自动播放
      autoplay: {
        type: Boolean,
        value: false
      },
      // 循环播放
      loop: {
        type: Boolean,
        value: false
      },
      // 静音播放
      muted: {
        type: Boolean,
        value: false
      },
      // 指定视频时长
      duration: {
        type: Number,
        value: 0
      },
      // 指定视频初始播放位置
      initialTime: {
        type: Number,
        value: 0
      },
      // 'contain' | 'fill' | 'cover'
      objectFit: {
        type: String,
        value: 'contain'
      },
      // 若不设置，宽度大于 240 时才会显示
      showProgress: {
        type: Boolean,
        value: true
      },
      // 是否显示全屏按钮
      // 在同层渲染模式下仅支持控制竖屏状态（非全屏）下的「全屏按钮」的显示，横屏状态（全屏）不显示「退出全屏按钮」，只能通过标题旁边的箭头退出全屏
      showFullscreenBtn: {
        type: Boolean,
        value: true
      },
      // 是否显示视频底部控制栏的播放按钮
      showPlayBtn: {
        type: Boolean,
        value: true
      },
      // 是否开启控制进度的手势
      enableProgressGesture: {
        type: Boolean,
        value: true
      },
      // 是否显示静音按钮
      showMuteBtn: {
        type: Boolean,
        value: false
      }
    },
    // 组件方法
    methods: {
      // 当开始/继续播放时触发 play 事件
      handleStart (e) {
        this.triggerEvent('start', e)
      },
      // 当暂停播放时触发 pause 事件
      handlePause (e) {
        this.triggerEvent('pause', e)
      },
      // 当播放到末尾时触发 ended 事件
      handleEnded (e) {
        this.triggerEvent('ended', e)
      },
      // 播放进度变化时触发，event.detail = {currentTime, duration} 。触发频率 250ms 一次
      handleTimeupdate (e) {
        this.triggerEvent('timeupdate', e)
      },
      // 视频进入和退出全屏时触发，event.detail = {fullScreen, direction}，direction 有效值为 vertical 或 horizontal
      handleFullscreenchange (e) {
        this.triggerEvent('fullscreenchange', e)
      },
      // 视频播放出错时触发
      handleError (e) {
        this.triggerEvent('error', e)
      }
    }
  })
  

三、抛一个问题，暂未解决

• 在 uniapp 中，自定义小程序原生组件后，可以在 pages.json 中页面配置 usingComponents 中配置后即可在当前页面使用。但是，如果是在页面的组件中需要使用到这个原生自定义组件，如何在这个 .vue 组件中配置好 usingComponents 使用这个小程序原生组件？