更新记录

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"
},

个人博客

CSDN

DCloud个人中心

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问