小程序中实现手电筒

实现原理

通过小程序组件 <camera> 中的 flash 属性的控制实现后置闪光灯的打开与关闭

页面部分

注意：mode="scanCode" 只有扫码模式才能准确控制闪光灯的开关

/* flashlight.wxml */
<view class="lightBox">
    <view class="topBtn">
        <view bindtap="changeType" data-type="flash" class="flash btnItem {{ activeType == 'flash' ? 'active' : '' }}">闪光</view>
        <view bindtap="changeType" data-type="sos" class="sos btnItem {{ activeType == 'sos' ? 'activeRed' : '' }}">SOS</view>
    </view>
    <view bindtap="changeType" data-type="light" class="lightClose {{ activeType == 'light' ? 'active' : '' }}">
        <text class="iconfont icon-close"></text>
    </view>
        <!-- 注：mode="scanCode" 只有扫码模式才能准确控制闪光灯的开关 -->
    <camera wx:if="{{ showCamera }}" resolution="low" mode="scanCode" flash="{{ flash }}" class="camera"></camera>
</view>

逻辑处理部分

1.因防止打开子页面加载摄像头会延迟卡顿，所以暂时通过 showCamera 进入页面不立即进行加载，提升流畅度。

/* 延迟加载摄像头, 防止进入页面时卡顿 */
  onLoad: function (options) {
    pageUtil.setNavBar(options)
    setTimeout(() => {
      this.setData({
        showCamera: true
      })
    }, 1000);
  },

2.切换开关控制

  toggleLight(value) { // 切换开关
    this.setData({
      flash: value ? value : (this.data.flash === 'off' ? 'on' : 'off')
    })
  },

效果体验，欢迎扫码使用或微信小程序搜索 - "辛巴达盒子"

辛巴达盒子