一. 前语

之前提到,我的一个 uni-app 项目遭到用户吐槽:“你们这个 App 扫码的正确率太低了,尤其是安卓的设备。经常性的扫码扫不出来,就算是扫出来了,也是错误的成果!”

面对以上这个问题,我在当时的项目是运用了一个根据安卓原生 zxing 扫码插件完结的,尽管扫码功率可观,可是它也有一些坏处,比如:仅支持安卓设备不支持苹果设备样式不是特别好看反光二维码辨认会有影响等等,详细了解请参阅我之前写过的一篇文章:

uni-app 跳坑系列:谈谈我是如何提高安卓 App 扫码精确率的

今天这篇文章,咱们继续探究一下是否还有其他更优异的插件,能够给咱们在 uni-app 的项目中供给流通的扫码服务,之前在开发项目的过程中,确实发现一款相对更优异的原生扫码插件,它具有更优异且强大的辨认才能和辨认速度,对弱光反光模糊二维码也具有优异的辨认才能,接下来咱们来具体的看一下吧!

二. mPaaS 扫码组件

mPaaS 扫码组件是支付宝的扫码组件,目的是能够让咱们的 APP 具有像支付宝相同的扫码体会,辨认速度、辨认率远超开源扫码。扫码组件完全免费供给运用,可是接入时需求在阿里云上进行注册注册并将 mPaaS 扫码增加到项目工程即可

三. 创建 mPaaS 运用

1. 注册阿里云 mPaaS

登录阿里云控制台,找到移动开发平台 mPaaS进入,或直接访问 移动开发平台 mPaaS 产品页面就能够直接进入。

之后点击 “管理控制台”,进入 “注册产品” 页面。点击 “立即注册”,就能够注册 mPaaS 产品。

以上咱们就完结了第一步,注册阿里云 mPaaS,接下来咱们需求进行创建运用了。

2. 创建 mPaaS 运用

注册后您需求创建一个 mPaaS 运用

简单维护好运用称号运用 LOGO就完结了敞开 mPaaS 接入的第一步

将 mPaaS 接入到我的运用,1 分钟快速完结 App 代码装备

装备过程中首要包含以下四个过程:

  1. 维护运用信息

    • 首要是运用的称号及 Logo,感觉没什么用,能够跳过省略。
  2. 下载装备文件

    • 填写装备信息,完结上传签名 APK,然后“下载装备文件”到本地,进行代码装备,需求上传签名后的 APK 文件,输入运用包名 Package Name

    • 这一步很重要,装备完结后,下载装备文件中有咱们要用到的一些信息。

  • Android 代码装备:

uni-app 扫码插件引荐:根据支付宝 mPaaS 扫码组件进行开发

  • iOS 代码装备:

uni-app 扫码插件引荐:根据支付宝 mPaaS 扫码组件进行开发

  1. mPaaS 基线挑选:

    • 如果你是 Android 或 iOS 原生开发人员,或许你更倾向于自己开发 uni-app 原生插件,能够挑选 mPaaS 某些基线功用,但如果咱们仅是作为 uni-app 开发人员,不熟悉原生开发,这一步也能够进行疏忽。

简单说一下 mPaaS 基线的含义,基线是指一系列功用的安稳版别的集合,是进一步开发的基础。而 mPaaS 产品是根据支付宝的某个特定版别开发的,因而对于 mPaaS 而言,基线则是所根据版别的 SDK 的集合。随着 mPaaS 产品的不断晋级,会呈现多个版别的基线。

  1. IDE 组件装备

    • Android:首要是根据原生 AAR 方式运用 Android Studio mPaaS 插件

阐明:在以上的接入过程中,最重要的就是第 2 步,在接下来的装备插件过程中需求咱们运用装备文件中的信息。

四. 在 uni-app 中接入 mPaaS 插件

1. 下载封装好的 mPaas 原生扫码插件

下载地址:进入页面,点击下载

下载完结后,将 Zip 压缩包解压后,放入 uni-app 运用目录 nativeplugins

uni-app 扫码插件引荐:根据支付宝 mPaaS 扫码组件进行开发

2. 修正插件的 config 信息

Android

这一步需求将第三部分中“创建 mPaaS 运用”中第2步现已下载的好的config装备文件信息同步到插件的package.json中,如下图所示:

uni-app 扫码插件引荐:根据支付宝 mPaaS 扫码组件进行开发

iOS

和Android相同的,将下载好的的 config 文件,重命名为 meta.config,然后将这个文件放入到uni-app项目中,

具体途径为:/项目称号/nativeplugins/Mpaas-Scan/ios/meta.config

3. 在 manifest.json 中挑选本地插件

如下图所示,在 manifest.json 图形化装备菜单中点击 App 原生插件装备,挑选本地插件进行装备

uni-app 扫码插件引荐:根据支付宝 mPaaS 扫码组件进行开发

4. 在 manifest.json 中装备插件

uni-app 扫码插件引荐:根据支付宝 mPaaS 扫码组件进行开发

5. 增加权限

Android

这一步不要忘掉,因为要运用安卓手机正常调用起摄像头进行扫码,需求增加对应的权限,这是必不可少的。

Android 一般需求如下的权限:

  1. CAMERA 权限:允许运用程序访问设备的摄像头,用于摄影和录像功用。

  2. WRITE_EXTERNAL_STORAGE 权限:允许运用程序写入外部存储,用于保存文件和数据。

  3. android.hardware.camera 特性:表明设备具有相机功用,运用程序能够运用该功用进行摄影和录像等操作。

  4. android.hardware.camera.autofocus 特性:表明设备支持主动对焦功用,用于相机拍照时主动调整焦距。

  5. FLASHLIGHT 权限:允许运用程序控制设备闪光灯,用于手电筒功用和摄影时的补光。

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />
<uses-permission android:name="android.permission.FLASHLIGHT" />

iOS

相同的,iOS 也需求增加部分权限阐明,用于运用第一次运用涉及到用户隐私的功用是弹出授权确认框上显示的信息,提交App store审阅时此信息必须精确描绘获取此权限的原因。

如下图所示:

uni-app 扫码插件引荐:根据支付宝 mPaaS 扫码组件进行开发

五. 在 uni-app 项目中运用插件

1. 运用方式

在 uni-app 项目中,咱们能够进行如下运用:

  • 引进插件
  • 调用插件办法
  • 处理办法回来成果
// 引进原生插件
const mpaasScanModule = uni.requireNativePlugin("Mpaas-Scan-Module");
// 调用插件的 mpaasScan 办法
mpaasScanModule.mpaasScan(
  {
    // 扫码辨认类型,参数可多选,qrCode、barCode,
    // 如不设置,默认辨认一切扫码类型,或许有少许影响辨认功率
    scanType: ["qrCode", "barCode"],
    // 是否隐藏相册,默认false不隐藏
    hideAlbum: false,
  },
  (ret) => {
    console.log(ret);
    uni.showModal({
      title: "扫码成果",
      // 回来值中,有三个参数 resp_code、resp_message、resp_result
      // resp_code 表示回来成果值,10:用户撤销,11:其他错误,1000:成功
      // resp_message 表示回来成果信息
      // resp_result 表示扫码成果,只要成功才会有回来
      content: JSON.stringify(ret),
      showCancel: false,
      confirmText: "确定",
    });
  }
);

2. API 参数阐明

以下是 mPaaS 官方 API 调用时供给的办法入参、回来值和 code 错误码阐明

入参

称号 类型 必填 描绘
scanType String 扫码辨认类型,默认值为['qrCode','barCode']
hideAlbum Boolean 是否隐藏相册(不允许从相册挑选图片,只能从相机扫码),默认值为 false。
success Function 调用成功的回调函数
fail Function 调用失败的回调函数
complete Function 调用完毕的回调函数(调用成功、失败都会执行)

success 回来值

称号 类型 描绘
code String 扫码所得数据
qrCode String 扫描二维码时回来二维码数据
barCode String 扫描条形码时回来条形码数据

错误码

error 描绘 解决方案
10 用户撤销 为用户正常交互流程分支,不需求进行特别处理。
11 操作失败 具体原因需求检查客户端协助排查。

3. APP 演示

uni-app 扫码插件引荐:根据支付宝 mPaaS 扫码组件进行开发

如果你想要体会 APP 的扫码想过,请下载我的 APP 进行体会,体会途径为:主页 -> 工具类 -> mPaaS 扫码,下载链接如下:

下载 Anyup Demo 安卓版进行体会

参阅文档

mPaas 官方文档

uni-app 支付宝原生扫码插件