uniapp 微信小程序：扫码
测试用二维码
1. uni.scanCode 一次一码
创建Demo项目
- HBuilderX 创建一个新项目，直接用默认模板
- 添加一个【扫码】按钮，绑上点击事件。
- 使用
uni.scanCode调起客户端扫码界面，扫码成功后返回对应的结果。
| 界面 | 演示 |
|---|---|
 |
camera 之 scanCode模式扫码 |
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{
{title}}</text>
</view>
<view>
<button @click="scanCodeHandler">开始扫码</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: '调用 uni.scanCode 实现扫码'
}
},
onLoad() {
},
methods: {
// 扫码按钮点击回调
scanCodeHandler(){
let that = this;
// 调起条码扫描
uni.scanCode({
onlyFromCamera: true, // 是否只能从相机扫码，不允许从相册选择图片
scanType: ['qrCode'], // 扫码类型 qrCode二维码
autoZoom: false, // 是否启用自动放大，默认启用
success: function (res) {
console.log(`扫码结果：${
JSON.stringify(res,null,2)}`);
that.parseQRCode(res);
},
fail: function (err) {
console.log(`错误：${
err}`);
},
complete: function (data) {
console.log('擦屁股！');
}
});
},
// 解析二维码，处理业务
parseQRCode(data){
uni.vibrateShort(); // 震动提示
uni.showToast({
title: data.result}) // 弹出提示
}
}
}
</script>
<style>
/* 样式部分没动 */
</style>
扫码结果演示
扫码结果：
{
"charSet": "utf-8",
"scanType": "QR_CODE",
"errMsg": "scanCode:ok",
"result": "大家好，我是笨笨，笨笨的笨，笨笨的笨，谢谢！",
"codeVersion": 8,
"rawData": "5aSn5a625aW977yM5oiR5piv56yo56yo77yM56yo56yo55qE56yo77yM56yo56yo55qE56yo77yM6LCi6LCi77yB"
}
2. camera 之 mode=“scanCode” 连续扫码
创建 Demo
- HBuilderX 创建一个新项目，直接用默认模板
- 添加一个 camera 组件，如下调整。
2.1.mode="scanCode"将摄像机模式设为扫码。
2.2.@scancode="scancodeEventHandle"扫码成功回调scancodeEventHandle方法。
2.3. 其它参数不赘述看文档即可。 - 再添加一个 view 通过样式实现一个绿色标记点。
3.1. 通过:style实现动态 修改标记点位置 。
3.2. 扫码响应中target.scanArea值含义：[ left，top，width，height ]单位px。
注意：官方有说单位是rpx，我调了两天，一直对不上。
| 界面 | 演示 |
|---|---|
 |
uni.scanCode 扫码 |
<template>
<view>
<camera device-position="back" flash="off" mode="scanCode" @scancode="scancodeEventHandle" @error="error" >
<view class="mark" v-show="isShowMark" :style="{ left: obj.l + 'px', top: obj.t +'px' }" ></view>
</camera>
</view>
</template>
<script>
export default {
data() {
return {
lockSet: {
},
obj: {
l: 0, t: 0 },
isShowMark: false
}
},
onLoad(option){
this.obj = {
"l": 0,"t": 0}
},
methods: {
scancodeEventHandle(res){
let rawData = res.target.rawData;
if(Object.hasOwn(this.lockSet, rawData) === false){
this.lockSet[rawData] = true;
console.log(`扫码响应结果：${
JSON.stringify(res)}`);
this.isShowMark = false; // 开始前先隐藏上一次显示的标记点
let result = res.target.result
// 震动提示
uni.vibrateShort({
success: () => uni.showToast({
title: result}) // 弹出提示
});
// 标记位置
this.markQrCode(res.target);
// 同一个码间隔几秒才会再次处理
setTimeout(that => delete that.lockSet[rawData], 3000, this);
}
},
markQrCode(target){
// [左上角x坐标，左上角y坐标，width，height] 单位px
let [left, top, width, height] = target.scanArea;
let markWH = uni.upx2px(64) / 2; // mark是边长64rpx的方形，要转成 px
// 算出显示标记的位置
this.obj = {
"l": left + width/2 - markWH, "t": top + height/2 - markWH };
// 显示标记点
this.isShowMark = true;
// 无任何外力情况下，5秒后也会消失
setTimeout(that => that.isShowMark = false, 5000, this);
},
error(err){
console.log(`报错：${
JSON.stringify(err)}`);
debugger;
}
}
}
</script>
<style>
camera {
margin: 50rpx auto;
width: 500rpx;
height: 500rpx;
}
.mark{
position: absolute;
width: 64rpx;
height: 64rpx;
background-color: #00ff00;
border: 5px solid #f8ffeb;
border-radius: 50%;
}
</style>
扫码响应结果
{
"type": "scancode",
"target": {
"dataset": {
"eventOpts": [["scancode",[["scancodeEventHandle",["$event"]]]],["error",[["error",["$event"]]]]]
},
"id": "",
"offsetTop": 26,
"offsetLeft": 66,
"type": "qrcode",
"result": "大家好，我是笨笨，笨笨的笨，笨笨的笨，谢谢！",
"rawData": "5aSn5a625aW977yM5oiR5piv56yo56yo77yM56yo56yo55qE56yo77yM56yo56yo55qE56yo77yM6LCi6LCi77yB",
"charSet": "utf-8",
"scanArea": [68.094444,105.23687,84.844955,81.93183]
},
"currentTarget": {
"dataset": {
"eventOpts": [["scancode",[["scancodeEventHandle",["$event"]]]],["error",[["error",["$event"]]]]]
},
"id": "",
"offsetTop": 26,
"offsetLeft": 66
},
"timeStamp": 97727,
"detail": {
"type": "qrcode",
"result": "大家好，我是笨笨，笨笨的笨，笨笨的笨，谢谢！",
"rawData": "5aSn5a625aW977yM5oiR5piv56yo56yo77yM56yo56yo55qE56yo77yM56yo56yo55qE56yo77yM6LCi6LCi77yB",
"charSet": "utf-8",
"scanArea": [68.094444,105.23687,84.844955,81.93183]
},
"mp": '都是上面内容的重复，略...'
}