本文主要是介绍微信小程序：自定义扫码功能，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
我们今天主要是介绍小程序自定义扫码的应用，相关业务处理可以根据自己需求来填补
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 })}
})这篇关于微信小程序：自定义扫码功能的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
