更新记录
1.0.8(2025-01-02)
修改uni.$emit为回调函数返回值以兼容uniapp(uniapp使用时,uts插件中有uni.$emit会报错)
1.0.7(2024-12-30)
添加方法提示说明
1.0.6(2024-12-30)
类型说明
查看更多平台兼容性
Vue2 | Vue3 |
---|---|
× | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.6.8,Android:支持,iOS:不支持,HarmonyNext:不支持 | × | × | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 | 鸿蒙元服务 |
---|---|---|---|---|
× | × | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | × | × | × | × | × | × | × | × |
优博讯PDA扫码插件
本插件集成了优博讯SDK,如果不需要集成PDA的SDK,可以使用 通用PDA扫码插件https://ext.dcloud.net.cn/plugin?name=hh-pda
简单使用,只需初始化并注册扫码监听即可,如下所示,更多api使用可以参考示例项目中的详细使用
<template>
<view class="content">
<text>扫码图片:</text>
<view class="image">
<image class="image-content" :src="base64Image"></image>
</view>
<text>扫码码值:</text>
<view class="code">
<text class="f-s-14">{{code}}</text>
</view>
</view>
</template>
<script setup>
import { initScanner, registerScanner, unregisterScanner, getCode, getImage, sendGetImage } from "@/uni_modules/hh-ubx-pda";
const code = ref('');
const base64Image = ref("");
const init = () => {
//初始化pda
initScanner();
//注册扫码监听
registerScanner();
uni.showToast({
title: "初始化成功!",
icon: "none",
mask: false
})
}
onLoad(() => {
init();
//获取扫码值
getCode(_code => {
code.value = _code;
//发送获取图片的请求
sendGetImage();
});
//获取扫码图片,图片为base64格式
getImage(_img => {
base64Image.value = _img;
});
});
onUnload(() => {
//移除扫码监听
unregisterScanner();
uni.showToast({
title: "移除扫码监听!",
icon: "none",
mask: false
})
})
</script>
<style lang="scss" scoped>
.content {
width: 100%;
height: 100%;
padding: 15rpx;
display: flex;
flex-direction: column;
}
.image {
width: 100%;
height: 200px;
border: 1px solid rgb(41, 78, 162);
>.image-content {
width: 100%;
height: 100%;
}
}
.code {
width: 100%;
height: 35px;
border: 1px solid rgb(41, 78, 162);
margin-top: 15rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.action-btn-list {
margin-top: 15rpx;
display: flex;
flex-direction: row;
flex-wrap: wrap;
>.action-btn {
width: 33.33%;
padding: 20 15px;
background-color: rgb(41, 78, 162);
border-radius: 2px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 1px solid #ccc;
>.f-s-14,
.f-s-12 {
color: #fff;
}
&:hover {
background-color: #fff;
}
}
}
</style>