uniapp小程序 scanCode实现 扫一扫功能

先上效果图：

camera实现官网有详细的介绍

 

代码实现：

flash手电筒

cover-view是扫一扫中间蓝色的横线，不能设置style阴影，会出不来

onScancode扫码成功之后的操作（e.detail.result）

<view class="scan-border">
<view style="width: 80%;height: 500rpx;border: 1rpx solid #ccc;position: relative;">
<view class="Bordertop">
<view style="width: 44rpx;height: 10rpx;background-color: #518BFA;"></view>
<view style="width: 44rpx;height: 10rpx;background-color: #518BFA;"></view>
</view>
<view class="Borderright">
<view style="width: 10rpx;height: 44rpx;background-color: #518BFA;"></view>
<view style="width:10rpx;height: 44rpx;background-color: #518BFA;position: absolute;bottom: 0rpx;">
</view>
</view>
<view class="Borderbottom">
<view style="width: 44rpx;height: 10rpx;background-color: #518BFA;"></view>
<view style="width: 44rpx;height: 10rpx;background-color: #518BFA;"></view>
</view>
<view class="Borderleft">
<view style="width: 10rpx;height: 44rpx;background-color: #518BFA;"></view>
<view
style="width: 10rpx;height: 44rpx;background-color: #518BFA;position: absolute;bottom: 0rpx;">
</view>
</view>
<!-- bindscancode="onScancode" @initdone="onCameraInitDone" -->
<camera v-if="isshowPhone" class="scan-camera" :flash="flash" @scancode="onScancode" @error="onerror"
mode="scanCode" device-position="back">
<cover-view class="scan-animation" :animation="animation"></cover-view>
</camera>
</view>
<view class="footerButton">
<!-- 开关手电筒 -->
<view class="" @click="takePhoto()">
<image src="../../static/open.png" class="flashlightOpen" v-if="flash=='on'"></image>
<image src="../../static/guan.png" class="flashlight" v-if="flash=='off'"></image>
</view>
<!-- <view class="prompt">
<span v-if="flash=='off'" style="color:#ffffff;">轻点点亮</span>
<span v-if="flash=='on'">轻点关闭</span>
</view> -->
</view>

 

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

在onShow生命周期调用

/**扫码线条动画*/
lineAnimation() {
this.animation = animation;
let that = this;
let scode = true;
this.timer = setInterval(
function() {
if (scode) {
animation.translateY(220).step({
duration: 1500,
});
scode = !scode;
} else {
animation.translateY(-10).step({
duration: 1500,
});
scode = !scode;
}
that.animation = animation.export();
}.bind(this),
1500
);
},

 扫码只要不离开二维码就会一直触发一直触发

我的需求是只触发一次

实现如下：设置一个控制变量

data定义