组件_camera

系统相机。扫码二维码功能

<camera style="width: 100%; height: 300px;"></camera>

属性	类型	默认值	必填	说明
mode	string	normal	否	应用模式，只在初始化时有效，不能动态变更 normal:相机模式 scanCode:扫码模式
device-position	string	back	否	摄像头朝向 front:前置 back:后置
flash	string	auto	否	闪光灯，值为 auto , on, off

相机

wxml

<camera
  mode="normal"
  device-position="back"
  flash="on"
  style="width: 100%; height: 300px;"
></camera>
<button type="primary" bindtap="takePhotoHandle">拍照</button>
<view>预览</view>
<image mode="widthFix" src="{{src}}"></image>

ts

Page({
  data: {
    src: '',
  },
  takePhotoHandle() {
    const ctx = wx.createCameraContext()
    ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        this.setData({
          src: res.tempImagePath,
        })
      },
    })
  },
})

扫码

wxml

<camera mode="scanCode" bindscancode="onScanCode"></camera>
<view class="result"> 扫描结果：{{scanResult}} </view>

ts

Page({
  data: {
    scanResult: '', // 用于存储扫描结果
  },

  onScanCode(event) {
    const scanResult = event.detail.result
    this.setData({
      scanResult: scanResult,
    })
    console.log('扫描结果:', scanResult)
    wx.showToast({
      title: '扫码成功',
      icon: 'success',
      duration: 2000,
    })
  },
})

至此，本章节的学习就到此结束了，如有疑惑，可对接技术客服进行相关咨询。