uniapp制作的小程序:轻松实现扫码功能
最编程
2024-02-22 08:13:58
...
uniapp 微信小程序:扫码
- 测试用二维码
- 1. uni.scanCode 一次一码
- 创建Demo项目
- 扫码结果演示
- 2. camera 之 mode="scanCode" 连续扫码
- 创建 Demo
- 扫码响应结果
- 参考资料
测试用二维码
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": '都是上面内容的重复,略...'
}
参考资料
-
uniapp
uniapp:uni.scanCode(OBJECT)
uniapp:camera -
微信原生
wx.scanCode(Object object)
微信小程序-媒体组件:camera
推荐阅读
-
微信 "扫一扫 "物联网,全面揭秘 "扫一扫 "背后的扫盲技术!-1.1 扫一扫感知物体是做什么的? 1.1 微信扫一扫是做什么的? 扫一扫识物是指以图片或视频(商品图片:鞋/包/美妆/服饰/家电/玩具/图书/食品/珠宝/家具/其他商品)为输入媒介,挖掘微信内容生态中的有价值信息(电商+百科+资讯,如图1所示),并展示给用户。这里的电商基本涵盖了微信小程序覆盖上亿SKU的全量优质电商,可以支持用户货比N家并直接下单购买,百科和资讯则聚合了微信内的头部自媒体如搜狗、搜搜、百度等,向用户展示和分享拍摄商品相关的内容资讯。 图 1 扫一扫识别功能示意图 欢迎大家更新iOS新版微信→扫一扫→识货,亲自体验,也欢迎大家通过识货界面的反馈按钮向我们提交反馈意见。 扫一扫识物实景图展示 1.2 扫一扫识物有哪些使用场景? 扫一扫识物的目的是为用户访问微信内部生态内容开辟一个新窗口,以用户扫图片为输入形式,为用户提供微信生态内容中的百科、资讯、电商等作为展示页面。除了用户熟悉的扫一扫操作外,我们还将进一步拓展长按操作,让用户更方便地进行扫一扫操作。"扫一扫知事 "的落地场景主要涵盖三大部分: a. 科普知识: a.科普知识。用户通过扫一扫,可以在微信生态圈中获取该对象的百科、资讯等常识或趣闻,帮助用户更好地了解该对象; b.购物场景。同样的搜索功能支持用户看到喜欢的商品立即检索到微信小程序电商中的同款商品,支持用户即扫即购; c.广告场景。扫一扫识别物体可以辅助公众号文章、视频更好地理解其中蕴含的图片信息,从而更好地投放匹配广告,提高点击率。 1.3 Sweep Sense 为 Sweep 家族带来了哪些新技术? 对于扫一扫来说,大家耳熟能详的应该就是扫一扫二维码、扫一扫小程序码、扫一扫条形码、扫一扫翻译了。无论是各种形式的编码还是文字字符,都可以看作是图片的一种特定编码形式,而物的识别则是对自然场景图片的识别,这对于扫一扫家族来说是一个质的飞跃,我们希望从物的识别入手,进一步拓展扫一扫对自然场景图片的理解能力,比如扫酒、扫车、扫植物、扫人脸等服务,如下图3所示。 图 3 Sweep 家族
-
如何在微信小程序中启用无缝扫码功能(使用uniapp开发)
-
如何轻松快速实现微信小程序的扫码功能
-
uniapp制作的小程序:轻松实现扫码功能
-
如何在微信小程序中实现快速扫码功能 (以 Uni-app 为例)
-
快速实现:Taro开发的H5和小程序扫码功能,兼容Android与iOS平台,并附带实战Demo演示
-
如何轻松实现H5网页中的扫码功能调起指南
-
在uniapp的小程序中,实现轻松长按二维码扫描,直接跳转至相应小程序或个人微信账号的功能
-
电商收付通系列第10篇:轻松实现扫码支付的合单下单功能