完整微信小程序(Java后端) 技术贴目录清单页面(必看)
系统相机。扫码二维码功能,需升级微信客户端至6.7.3。需要用户授权 scope.camera
。 2.10.0起 initdone 事件返回 maxZoom,最大变焦范围,相关接口 CameraContext.setZoom。
相关api:wx.createCameraContext
属性 |
类型 |
默认值 |
必填 |
说明 |
最低版本 |
mode |
string |
normal |
否 |
应用模式,只在初始化时有效,不能动态变更 |
2.1.0 |
resolution |
string |
medium |
否 |
分辨率,不支持动态修改 |
2.10.0 |
device-position |
string |
back |
否 |
摄像头朝向 |
1.0.0 |
flash |
string |
auto |
否 |
闪光灯,值为auto, on, off |
1.0.0 |
frame-size |
string |
medium |
否 |
指定期望的相机帧数据尺寸 |
2.7.0 |
bindstop |
eventhandle |
|
否 |
摄像头在非正常终止时触发,如退出后台等情况 |
1.0.0 |
binderror |
eventhandle |
|
否 |
用户不允许使用摄像头时触发 |
1.0.0 |
bindinitdone |
eventhandle |
|
否 |
相机初始化完成时触发,e.detail = {maxZoom}
|
2.7.0 |
bindscancode |
eventhandle |
|
否 |
在扫码识别成功时触发,仅在 mode=“scanCode” 时生效 |
2.1.0 |
mode 的合法值
值 |
说明 |
最低版本 |
normal |
相机模式 |
|
scanCode |
扫码模式 |
|
resolution 的合法值
值 |
说明 |
最低版本 |
low |
低 |
|
medium |
中 |
|
high |
高 |
|
device-position 的合法值
值 |
说明 |
最低版本 |
front |
前置 |
|
back |
后置 |
|
flash 的合法值
值 |
说明 |
最低版本 |
auto |
自动 |
|
on |
打开 |
|
off |
关闭 |
|
torch |
常亮 |
2.8.0 |
frame-size 的合法值
值 |
说明 |
最低版本 |
small |
小尺寸帧数据 |
|
medium |
中尺寸帧数据 |
|
large |
大尺寸帧数据 |
|
Bug & Tip
-
tip
: 同一页面只能插入一个 camera
组件
-
tip
:请注意原生组件使用限制
-
tip
:onCameraFrame 接口根据 frame-size 返回不同尺寸的原始帧数据,与 Camera 组件展示的图像不同,其实际像素值由系统决定
示例代码
在开发者工具中预览效果
index.xml
<view class="page-body">
<view class="page-body-wrapper">
<camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 300px;"></camera>
<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" src="{{src}}"></image>
<video wx:if="{{videoSrc}}" class="video" src="{{videoSrc}}"></video>
</view>
</view>
index.js
Page({
onLoad() {
this.ctx = wx.createCameraContext()
},
takePhoto() {
this.ctx.takePhoto({
quality: 'high',
success: (res) => {
this.setData({
src: res.tempImagePath
})
}
})
},
startRecord() {
this.ctx.startRecord({
success: (res) => {
console.log('startRecord')
}
})
},
stopRecord() {
this.ctx.stopRecord({
success: (res) => {
this.setData({
src: res.tempThumbPath,
videoSrc: res.tempVideoPath
})
}
})
},
error(e) {
console.log(e.detail)
}
})
运行效果截图(要真机调试)
微信搜一搜【java1234】关注这个放荡不羁的程序员,关注后回复【资料】有我准备的一线大厂笔试面试资料以及简历模板。