uniapp 微信小程序：扫码
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] 单位pxlet [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
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！