微信小程序媒体类组件camera摄像头组件使用详解

微信小程序媒体类组件camera摄像头组件使用详解

本篇经验将继续分享媒体类组件中 camera 摄像头组件的使用详解。注意，这篇经验将基于第一个手工构建的微信小程序演示，具体构建步骤，可参考如下经验引用。

0微信小程序开发实战--手工开发第一个小程序

百度搜索 camera 摄像头组件的官方文档，常用属性有 device-position ：哪个摄像头，可选值有 front 和 back，默认为 back；flash：闪光灯打开关闭的设置，mode ：模式，包括相机模式和扫码模式等。

wxml 文件中通过 标签显示一个照相区域，设置其宽高样式。通过一个按钮实现拍照功能（绑定单击事件），并将拍摄的显示在下方的一个 标签中。

js 中定义 wxml 中按钮绑定的单击事件函数，以及 标签绑定的一个变量。

保存编译后，在模拟器中可以查看效果， 组件会调用笔记本电脑上的唯一摄像头，通过按钮可拍摄招聘并显示在下方的图片区域中，符合预期。

通过真机调试，在真实手机上测试，效果如图示：

图1 ： 会弹出授权窗口，需要用户授权访问摄像头硬件；

图2 ： 默认会使用后置摄像头，点击按钮拍摄后显示在下方的图片区域。