我们今天主要是介绍小程序自定义扫码的应用,相关业务处理可以根据自己需求来填补
WXML:
<view class="scan-box direction-column" wx:if="{{ showCanScan }}">
<camera class="camera" resolution="high" device-position="back" binderror="error" flash='{{flashBtn}}'>
<image class="camera-img" src="{{iconScanBgGif}}"></image>
</camera>
<view>
<view class="scan-tip">请将摄像头对准VIN号</view>
<view class="margin-top-40 flex-center direction-column">
<view class="flashlight-btn" bind:tap="changeflashBtn">
<image src="{{flashBtn=='on'?'手电筒打开图标':'手电筒关闭图标'}}"></image>
</view>
<view class="margin-top-20">轻触照亮</view>
<view class="margin-top-20">
<van-button plain hairline type="primary" bind:tap="recognition">扫一扫</van-button>
</view>
<view class="margin-top-20">
<van-button plain hairline type="primary" bind:tap="hideScanWindow">取消</van-button>
</view>
</view>
</view>
</view>
WXSS:
page {
font-family: PingFang SC-Regular, PingFang SC;
font-size: 24rpx;
background-color: #F8F7FB;
}
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.direction-column {
flex-direction: column;
}
.margin-top-20 {
margin-top: 20rpx;
}
.margin-top-40{
margin-top: 40rpx;
}
.scan-box {
position: fixed;
top: 0;
width: 100%;
height: 100vh;
background-color: #000000;
z-index: 999999;
}
.scan-box .camera {
position: relative;
width: 100vw;
height: 10vw;
margin: 20vh auto 0;
}
.scan-box .camera-img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999;
}
.scan-box .scan-tip {
padding: 20rpx 0 0 0;
font-size: 32rpx;
text-align: center;
color: #fff;
}
.scan-box .flashlight-btn{
background: transparent !important;
width: 100rpx;
height: 80rpx;
padding: 0 !important;
}
.scan-box .flashlight-btn>image{
width: 100%;
height: 100%;
}
JS:
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
windowHeight: app.globalData.windowHeight + 400,
showCanScan: false,
flashBtn: 'off',
checked: true
},
numberRecognition: function () {
this.takePhoto();
},
uploadAndRecognition(paths) {
Toast.loading({
duration: 0,
message: '识别中...',
forbidClick: true,
});
let _this = this;
// 图片上传处理接口
},
//拍照
takePhoto: function () {
var that = this;
//创建拍照上下文对象
const ctx = wx.createCameraContext()
ctx.takePhoto({
quality: 'high',
//拍照成功
success: (res) => {
that.uploadAndRecognition(res.tempImagePath);
},
fail: err => {
console.log(err)
}
})
},
changeflashBtn: function () {
let _this = this;
_this.setData({
flashBtn: _this.data.flashBtn == 'off' ? 'on' : 'off'
})
},
hideScanWindow: function () {
let _this = this;
_this.setData({ showCanScan: false })
}
})