更新记录
1.0.5(2024-06-13)
细分扫码类型,支持码类型见scanCodeApi中config配置中的barcodeFormatsType 注意新旧版本的barcodeFormatsType值发生了变化,更新插件时需重新适配barcodeFormatsType
1.0.4(2024-05-30)
新增使用第三方相册插件配置示例,新增错误码9010003
1.0.3(2024-05-26)
Api错误消息请看interface.uts中的ScanCodeApiErrorCode
查看更多平台兼容性
Vue2 | Vue3 |
---|---|
√ | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.99,Android:5.0,iOS:不支持,HarmonyNext:不确定 | × | × | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | × | × | × | × | × | × | × | × |
插件使用
注意事项
- 1.HBuilderX设置->插件配置->uts开发扩展ndroid中gradle版本(若配置过)不能高于
7.6.1
- 2.项目根目录manifest.json-App常用其他配置-targetSdkVerson需配置为大于等于
33
(由于官方目前不支持配置compileSdkVersion,这里升高targetSdkVersion后,App需要适配高版本Sdk) - 3.导入插件后,需自定义基座后再使用
- 4.HBuilderX版本4.02及以上时,需删除插件app-android目录AndroidManifest.xml文件中的package字段,或者直接删除AndroidManifest.xml文件
- 5.为了提升扫码效率,默认配置的是只扫描二维码,可在config中设置barcodeFormatsType的值,默认值:2,只扫描常用二维码,0:全部(条码+二维码),1:常用条码(Code 128),2:常用二维码(QR Code),3:Code 39,4:Code 93,5:CodeBar,6: DataMatrix,7:Ean 13,8:Ean 8,9:ITF,10:UPC A,11:UPC E,12:PDF 417,13:AZTEC
- 6.一维码二维码类型介绍,网址1,网址2
- 7.插件仅适配android uniapp项目,不支持iOS,还未在uniappx中测试
AndroidManifest.xml文件
<!--app-android AndroidManifest.xml文件 --> <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" package="com.ccxxcoder.uniapp.scancode"> </manifest>
亮点
- 1.自动处理Android Camera、Storage权限(符合应用市场对隐私弹窗的样式要求),使用者无需处理权限
- 2.支持常用一维码(条码)、二维码,扫码速度快,兼容性强
- 3.仿微信、支付宝,支持多码扫描
- 4.支持扫描相册中的图片
- 5.支持第三方相册(默认使用系统相册)
- 6.扫码页面样式支持可定制
使用
导入
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
<view class="buttonWrap">
<button class="buttonItem buttonItemTopMargin" type="primary" @click="jumpToScanCodePage">
扫一扫
</button>
</view>
<text class = "scanCodeResutTextPadding">{{scanCodeResutData}}</text>
</view>
</template>
<script>
import {
scanCodeApi,
scanCodeResumeApi,
scanCodeCompleteApi
} from "@/uni_modules/citycoder-scancode";
export default {
onLoad() {
},
data() {
return {
title: 'Hello',
scanCodeResutData: ''
}
},
methods: {
jumpToScanCodePage() {
let _that = this;
scanCodeApi({
// 扫码参数配置,其他参数可看插件interface.ust中的ScanCodeConfigParams
config: {
/*
扫码格式类型,默认值:2,只扫描常用二维码
0:全部(条码+二维码)
1:常用条码(Code 128)
2:常用二维码(QR Code)
3:Code 39
4:Code 93
5:CodeBar
6: DataMatrix
7:Ean 13
8:Ean 8
9:ITF
10:UPC A
11:UPC E
12:PDF 417
13:AZTEC
*/
barcodeFormatsType:2
},
// 扫码页面style配置,其他参数可看插件interface.ust中的ScanCodePageStyleParams
scanPageStyle: {
titleText:"标题文本",
titleSize:18,
titleColor:"#FFFFFF"
},
// 扫码结果页面style配置,其他参数可看插件interface.ust中的ScanCodeResultPageStyleParams
resultPageStyle: {
// 背景颜色,16进制ARGB色值,默认值(透明度为99值的黑色 ) #99000000
backgroundColor:"#99000000",
// 扫描到多个码时的提示文本
multipleCodeText:"扫描到多个码"
},
// 相册插件配置,其他参数可看插件interface.ust中的ScanCodeAlbumPluginConfig
albumPluginConfig: {
// 需要了解原生知识,知道什么是Activity、Intent
// action: "",
// category: "android.intent.category.DEFAULT",
// imagePathKey: ""
},
// 对话框样式设置,其他参数可看插件interface.ust中的ScanCodeDialogStyleParams
dialogStyle: {
// alert对话框,位置,0:顶部,1:中间,2:底部
alertDlgPosition:1
},
// 权限适配样式设置,其他参数可看插件interface.ust中的ScanCodePermissionStyleParams
permissionStyle: {
cameraRequestTitle:"开启相机权限",
cameraRequestMessage:"为了支持拍照上传图片,我们将征求你的同意来获取相机权限",
cameraRequestSureText:"我知道了"
},
// 成功回调,res.result为扫码结果,数据类型:字符串
success: (res) => {
console.log("Page. " + res.result);
// 关闭扫码页面
scanCodeCompleteApi();
_that.scanCodeResutData = res.result
},
// 失败回调,res.errCode错误码,错误类型可看unieeror.uts中的错误
failure: (res) => {
console.log("Page failure. " + res.errCode)
},
complete: (res) => {
console.log("Page complete. ")
// 关闭扫码页面
scanCodeCompleteApi();
}
}, {
// 扫码页面其他事件回调,某些场景很有用
// 扫码页面返回事件
scanPageBackCallback: () => {
console.log("Page. " + "扫码返回键");
// 关闭扫码页面
scanCodeCompleteApi();
},
// 扫码页面标题栏右侧组件点击事件
scanPageActionCallback: () => {
console.log("Page. " + "扫码Action");
},
// 扫码结果页面放回事件
resultPageBackCallback: () => {
console.log("Page. " + "结果返回键");
}
});
},
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
.buttonWrap {
display: flexbox;
width: 100%;
padding: 0 16px;
}
.buttonItem {
position: relative;
display: block;
margin-left: 16px;
margin-right: 16px;
padding-left: 14px;
padding-right: 14px;
box-sizing: border-box;
font-size: 18px;
text-align: center;
text-decoration: none;
line-height: 2.55555556;
border-radius: 5px;
-webkit-tap-highlight-color: transparent;
overflow: hidden;
color: #000;
background-color: #f8f8f8;
cursor: pointer;
}
.buttonItemTopMargin {
margin-top: 16px;
}
.scanCodeResutTextPadding{
padding: 16px;
}
</style>
Api介绍
注意:扫码流程在Android原生环境(不是uni-app环境)环境切换时请使用使用scanCodeResumeApi、scanCodeCompleteApi
- 1.scanCodeApi 扫码Api,用来完成扫码
- 2.scanCodeResumeApi 扫码恢复Api,扫码可能因某些原因中断,如扫码过程中被错误弹窗中断,此时可使用该Api(在uni-app环境中)进行恢复(Android原生环境)扫码
- 3.scanCodeCompleteApi 完成扫描Api,会关闭扫码页面,并释放扫码资源,可使用该Api(在uni-app环境中)进行结束(Android原生环境)扫码流程
样式定制
样式Api可看插件的interface.uts中的注释
- 1.scanPageStyle配置扫码页面样式
- 2.resultPageStyle配置扫码结果页面样式
- 3.albumPluginConfig第三方相册插件配置,若不配置则使用系统自带的相册
- 4.dialogStyle配置扫码过程中弹窗样式
- 5.permissionStyle配置权限对话框样式
图片
部分样式支持传图片,支持本地static目录中的图片、网络图片(http开头) 例:
scanPageStyle: {
photoAlbumIconPath:"/static/logo.png",
// photoAlbumIconPath:"http://www.......",
// photoAlbumIconPath:"https://www.......",
}
第三方相册插件配置
albumPluginConfig配置项需要3个参数,action、category、imagePathKey。接一下来一步一步进行介绍。
albumPluginConfig: {
// 需要了解原生知识,知道什么是Activity、Intent
action: "",
category: "android.intent.category.DEFAULT",
imagePathKey: ""
},
第一步
安装媒体选择插件,这里已媒体选择插件为例,集成该插件后,在插件app-android目录中的AndroidManifest.xml中配置下activity,详情见下。重点关注action android:name的配置
<!--app-android AndroidManifest.xml文件 -->
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"
package="com.ccxxcoder.uniapp.mediaselector">
<!--若需对其他UTS插件、或是其他App提供图片选择服务时,可放开如下配置-->
<application>
<activity android:name="com.city.code.android.mediaselector.view.ImageSelectorActivity" android:exported="true"
android:screenOrientation="portrait">
<intent-filter>
<!--若用户手机有其他App也用了我的插件,因名称相同时,会触发多个选择,因此尽量保证name唯一,一般使用公司名称作为包名。 -->
<action android:name="需要用英文填写name,格式如:com.你的公司名英文.uts.ImageSelectorActivity" />
<category android:name="android.intent.category.DEFAULT" />
</intent-filter>
</activity>
</application>
</manifest>
第二步
确定媒体选择插件对外提供的key,也就是选择图片后,将图片保存时的key(需要了解原生intent,intent.putExtra(key,imagePath))。这里已媒体选择插件为例,该插件的key为ToImagePath
第三步
若第一步”action android:name“配置的是com.a.b.uts.ImageSelectorActivity,则albumPluginConfig配置如下,其中category为固定配置。
albumPluginConfig: {
// 需要了解原生知识,知道什么是Activity、Intent
action: "com.a.b.uts.ImageSelectorActivity",
category: "android.intent.category.DEFAULT",
imagePathKey: "ToImagePath"
},