如何使用小程序媒体组件

我们可以使用上述的代码来实现播放暂停视频及发送弹幕功能。首先，我们先看看该组件的常用属性，这里我去掉了不常用的属性按钮，更多属性请参考官方文档。

值得注意的是<video />默认宽度300px、高度225px，我们可通过wxss设置宽高。在上面的代码中，我们设定了src的视频地址，设置了相关id，并打开了弹幕的相关设置。

之后在index.js中，我们通过bindInputBlur()函数和bindSendDanmu()函数来获取你填入的弹幕及显示弹幕。关于API具体使用教程，请参考官方文档，本文只是带大家入门。

Hello World - camera相机组件

在这篇文章中，教大家使用了基础的相机组件的使用，通过相机，拍照返回当前的图片。这里拍照使用的是CameraContext()API，我们可以使用下面的代码实现相机高阶玩法。

首先我们看看官方文档，这里我们需要调用CameraContext()API，具体API使用请参考官方文档，本文暂不赘述。可以使用下面的代码来体验相机使用。首先修改index.wxml文件。

<view class="page-body">
    <view class="page-body-wrapper">
      <camera
        flash="{{flash}}"
        device-position="{{position}}"
        binderror="error"
      >
      </camera>
      <text>当前闪光灯状态：{{flash}}</text>
      <view class="btn-area first-btn">
      <view class="btn-area">
        <button type="primary" bindtap="toggleflash">切换闪光灯状态</button>
      </view>
      <button type="primary" bindtap="togglePosition">切换摄像头</button>
      </view>
      <view class="btn-area">
        <button type="primary" bindtap="takePhoto">拍照</button>
      </view>
      <view class="btn-area">
        <button type="primary" bindtap="startRecord">开始录像</button>
      </view>
      <view class="btn-area">
        <button type="primary" bindtap="stopRecord">结束录像</button>
      </view>
      <view class="preview-tips">预览</view>
      <image wx:if="{{src}}" mode="widthFix" class="photo" src="{{src}}"></image>
      <video wx:if="{{videoSrc}}" class="video" src="{{videoSrc}}"></video>
    </view>
</view>

接下来，打开index.js文件，写入下面的代码。

Page({
  onShareAppMessage() {
  },
  data: {
    src: '',
    videoSrc: '',
    position: 'back',
    mode: 'scanCode',
    result: {},
    flash : 'on'
  },
  onLoad() {
    this.ctx = wx.createCameraContext()
  },
  takePhoto() {
    this.ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        this.setData({
          src: res.tempImagePath
        })
      }
    })
  },
  startRecord() {
    this.ctx.startRecord({
      success: () => {
        console.log('startRecord')
      }
    })
  },
  stopRecord() {
    this.ctx.stopRecord({
      success: (res) => {
        this.setData({
          src: res.tempThumbPath,
          videoSrc: res.tempVideoPath
        })
      }
    })
  },
  togglePosition() {
    this.setData({
      position: this.data.position === 'front'
        ? 'back' : 'front'
    })
  },
  toggleflash() {
    this.setData({
      flash: this.data.flash === 'off'
        ? 'on' : 'off'
    })
  },
  error(e) {
    console.log(e.detail)
  }
})

通过这里的代码，那就可以实现相机组件的大部分使用了。那有小伙伴问了，如何实现二维码扫描呢？这里比较简单，我们可以直接调用微信的扫一扫进行二维码的扫描。修改index.wxml文件如下。

<view class="btn-area">
  <button type="primary" bindtap="scanCode">扫码</button>
</view>

然后打开index.js文件，写入下面的代码。

Page({
  scanCode(){
    wx.scanCode({
      success(res) {
        console.log(res)
      }
    })
  }
})

这里扫描的二维码，会调用微信的二维码扫描工具进行扫描，扫描完成后，将参数返回给小程序，这里我们将扫描出来的内容通过控制台方式打印出来。

{result: "https://www.techeek.cn/wx-navigator", charSet: "UTF-8", errMsg: "scanCode:ok", scanType: "QR_CODE", rawData: "aHR0cHM6Ly93d3cudGVjaGVlay5jbi93eC1uYXZpZ2F0b3I="}

我们看到系统已经返回了相关内容，包含扫码内容，类型，字符集及原始的base64编码。

总结

关于媒体的组件你学会了吗？使用小程序媒体组件，可以实现很多功能哦~赶快去试试吧！后续我将会对其他组件做详细的介绍。喜欢的小伙伴请持续关注本公司。腾讯云联合小程序给大家带来了小程序·云开发解决方案，为开发者提供完整的云端支持，弱化后端和运维操作，使用平台原生 API 进行核心业务开发，实现快速上线和迭代。欢迎免费使用！