ToB企服应用市场:ToB评测及商务社交产业平台

标题: uni-app 扫码插件保举：基于支付宝 mPaaS 扫码组件开发，支持 Android 和 i [打印本页]

作者: 泉缘泉 时间: 2024-11-13 15:31
标题: uni-app 扫码插件保举：基于支付宝 mPaaS 扫码组件开发，支持 Android 和 i

一. 前言

之前说到，我的一个 uni-app 项目遭到用户吐槽：“你们这个 App 扫码的精确率太低了，尤其是安卓的装备。经常性的扫码扫不出来，就算是扫出来了，也是错误的效果！”
面对以上这个问题，我在当时的项目是利用了一个基于安卓原生 zxing 扫码插件实现的，虽然扫码效率可观，但是它也有一些毛病，好比：仅支持安卓装备，不支持苹果装备，样式不是特别悦目，反光二维码识别会有影响等等，具体了解请参考我之前写过的一篇文章：
uni-app 跳坑系列：谈谈我是如何提升安卓 App 扫码精确率的

https://blog.csdn.net/qq_24956515/article/details/141950635
本日这篇文章，我们继续探索一下是否另有其他更优秀的插件，可以给我们在 uni-app 的项目中提供流畅的扫码服务，之前在开发项目的过程中，确实发现一款相对更优秀的原生扫码插件，它拥有更优秀且强大的识别本领和识别速度，对弱光、反光、含糊的二维码也具有优秀的识别本领，接下来我们来具体的看一下吧！
二. mPaaS 扫码组件

mPaaS 扫码组件是支付宝的扫码组件，目的是可以让我们的 APP 拥有像支付宝一样的扫码体验，识别速度、识别率远超开源扫码。扫码组件完全免费提供利用，但是接入时需要在阿里云上举行注册开通并将 mPaaS 扫码添加到项目工程即可
三. 创建 mPaaS 应用

1. 开通阿里云 mPaaS

登录阿里云控制台，找到移动开发平台 mPaaS进入，或直接访问以下平台进入移动开发平台 mPaaS

https://www.aliyun.com/product/mobilepaas/mpaas点击产物页面就可以直接进入。
之后点击 “管理控制台”，进入 “开通产物” 页面。点击 “立即开通”，就可以开通 mPaaS 产物。
以上我们就完成了第一步，开通阿里云 mPaaS，接下来我们需要举行创建应用了。
2. 创建 mPaaS 应用

开通后您需要先创建一个 mPaaS 应用，点击以下链接：创建一个 mPaaS 应用

https://mpaas.console.aliyun.com/#/mpaas/dashboard
简单维护好应用名称和应用 LOGO就完成了开启 mPaaS 接入的第一步
将 mPaaS 接入到我的应用，1 分钟快速完成 App 代码配置
配置过程中主要包含以下四个步骤：

维护应用信息
- 主要是应用的名称及 Logo，感觉没什么用，可以跳过省略。
下载配置文件
- 填写配置信息，完成上传署名 APK，然后“下载配置文件”到本地，举行代码配置，需要上传署名后的 APK 文件，输入应用包名 Package Name
- 这一步很紧张，配置完成后，下载配置文件中有我们要用到的一些信息。

Android 代码配置：

iOS 代码配置：

mPaaS 基线选择：
- 如果你是 Android 或 iOS 原生开发人员，可能你更倾向于自己开发 uni-app 原生插件，可以选择 mPaaS 某些基线功能，但如果我们仅是作为 uni-app 开发人员，不熟悉原生开发，这一步也可以举行忽略。

简单说一下 mPaaS 基线的含义，基线是指一系列功能的稳固版本的集合，是进一步开发的底子。而 mPaaS 产物是基于支付宝的某个特定版本开发的，因此对于 mPaaS 而言，基线则是所基于版本的 SDK 的集合。随着 mPaaS 产物的不停升级，会出现多个版本的基线

IDE 组件配置
- Android：主要是基于原生 AAR 方式利用 Android Studio mPaaS 插件

阐明：在以上的接入步骤中，最紧张的就是第 2 步，在接下来的配置插件步骤中需要我们利用配置文件中的信息。
四. 在 uni-app 中接入 mPaaS 插件

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

下载地址：进入页面，点击下载

https://gitee.com/anyup/juejin-up/blob/master/plugins/Mpaas-Scan_1.2.3.zip
下载完成后，将 Zip 压缩包解压后，放入 uni-app 应用目次 nativeplugins 下

2. 修改插件的 config 信息

Android

这一步需要将第三部分中“创建 mPaaS 应用”中第2步已经下载的好的config配置文件信息同步到插件的package.json中，如下图所示：

iOS

和Android同样的，将下载好的的 config 文件，重命名为 meta.config，然后将这个文件放入到uni-app项目中，
具体路径为：/项目名称/nativeplugins/Mpaas-Scan/ios/meta.config
3. 在 manifest.json 中选择本地插件

如下图所示，在 manifest.json 图形化配置菜单中点击 App 原生插件配置，选择本地插件举行配置

4. 在 manifest.json 中配置插件

5. 添加权限

Android

这一步不要忘记，由于要利用安卓手机正常调用起摄像头举行扫码，需要添加对应的权限，这是必不可少的。
Android 一样平常需要如下的权限：

CAMERA 权限：允许应用程序访问装备的摄像头，用于拍照和录像功能。
WRITE_EXTERNAL_STORAGE 权限：允许应用程序写入外部存储，用于生存文件和数据。
android.hardware.camera 特性：表明装备拥有相机功能，应用程序可以利用该功能举行拍照和录像等操作。
android.hardware.camera.autofocus 特性：表明装备支持自动对焦功能，用于相机拍摄时自动调整焦距。
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 项目中利用插件

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 错误码阐明
入参

名称类型必填描述scanTypeString否扫码识别类型，默认值为 ['qrCode','barCode']。hideAlbumBoolean否是否隐藏相册（不允许从相册选择图片，只能从相机扫码），默认值为 false。successFunction否调用成功的回调函数failFunction否调用失败的回调函数completeFunction否调用结束的回调函数（调用成功、失败都会执行） success 返回值

名称类型描述codeString扫码所得数据qrCodeString扫描二维码时返回二维码数据barCodeString扫描条形码时返回条形码数据错误码

error描述解决方案10用户取消为用户正常交互流程分支，不需要举行特殊处理。11操作失败具体原因需要查看客户端协助排查。 3. APP 演示

如果你想要体验 APP 的扫码想过，请下载我的 APP 举行体验，体验路径为：首页 -> 工具类 -> mPaaS 扫码，下载链接如下：
如需体验，可以下载 Anyup Demo 安卓版举行体验

https://www.pgyer.com/anyup-demo
参考文档

mPaas 官方文档

https://help.aliyun.com/document_detail/49549.html?spm=a2c4g.165212.0.0.66762a9dEzJcn7
uni-app 支付宝原生扫码插件

https://ext.dcloud.net.cn/plugin?id=2636

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)