调用 uni.scanCode 方法
j***@163.com
- 发布：2023-08-04 17:20
- 更新：2026-03-04 14:49
- 阅读：1022
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： 22621.1992
HBuilderX类型： 正式
HBuilderX版本号： 3.8.7
手机系统： Android
手机系统版本号： Android 13
手机厂商： 新德里 PDA手持终端
手机机型： qualcomm
页面类型： vue
vue版本： vue2
打包方式： 云端
项目创建方式： HBuilderX
操作步骤：
预期结果：
正常视角，不发生旋转，不镜像
正常视角，不发生旋转，不镜像
实际结果：
视角发生旋转，颠倒
视角发生旋转，颠倒
bug描述：
使用扫码 uni.scancode api时，视角颠倒，很难对准，经测试在其他设备上无问题，并且 uni.chooseVideo 调用摄像头时视角无问题。
解决方式
1.插件市场中扫码插件实现，不过需要付费
2.（我使用的）新建.nvue页面（vue项目可以使用），在nvue页面使用<barcode></barcode>，再对这个barcode添加样式
transform:rotate(180deg)。调用扫码的地方跳转到app端跳转到nvue页面，使用uni.$on监听事件，其余端仍然使用uni.scancode()。
官方链接：https://uniapp.dcloud.net.cn/component/barcode.html
具体实现
调用扫码页面
const scanClick = () => {
// #ifdef MP-WEIXIN
uni.scanCode({
success: function (res) {
console.log('条码类型：' + res.result);
}
});
// #endif
// #ifdef APP
uni.$on("scanFinish",(data)=>{
if(data.type=="success"){
console.log(data.value);
}else{
uni.showToast({
icon:'none',
title:'扫码失败，请重试'
})
}
uni.$off('scanFinish');
})
uni.navigateTo({
url:'/pages/common/scan'
})
// #endif
}扫码.nvue页面
<template>
<view >
<barcode id='1' :style="'min-height:' + windowHeight + 'px;'" class="barcode" autostart="false" ref="barcode" background="rgb(0,0,0)" frameColor="#1C86EE" scanbarColor="#1C86EE" :filters="fil" @marked="success1" @error="fail1"></barcode>
<!-- <button class="btn" @click="toStart">开始扫码识别</button> -->
<!-- <button class="btn" @click="tocancel">取消扫码识别</button> -->
<!-- <button class="btn" @click="toFlash">开启闪光灯</button> -->
<!-- <button class="btn" @click="toscan">预览</button> -->
</view>
</template>
<script>
export default {
onLoad() {
const { windowHeight } = uni.getSystemInfoSync();
this.windowHeight = windowHeight;
setTimeout(()=>{
this.$refs.barcode.start({
conserve: false,
vibrate:true
});
},100)
},
data() {
return {
windowHeight:0,
fil: [0,8,10]
}
},
methods: {
success1(e) {
console.log("success1:" + JSON.stringify(e));
let info =e.detail.message;
uni.$emit("scanFinish",{type:'success',value:info})
this.$refs.barcode.cancel();
uni.navigateBack()
},
fail1(e) {
console.log("fail1:" + JSON.stringify(e));
uni.$emit("scanFinish",{type:'fail',value:null})
this.$refs.barcode.cancel();
uni.navigateBack()
}
}
}
</script>
<style scoped>
.barcode {
width: 750rpx;
background-color: #808080;
transform:rotate(180deg)
}
</style>
j***@163.com (作者)
没有啊，不知道怎么解决。就等官方修复了。
2023-08-17 14:33
2***@qq.com
回复 j***@163.com: 我的更奇怪，就只有一个界面的扫描反过来了，其余的没有反过来
2023-09-07 10:41