首页 > 其他分享 >uni-app 扫码插件推荐:基于支付宝 mPaaS 扫码组件开发,支持 Android 和 iOS

uni-app 扫码插件推荐:基于支付宝 mPaaS 扫码组件开发,支持 Android 和 iOS

时间:2024-10-26 20:50:54浏览次数:3  
标签:扫码 app 插件 mPaaS uni Android

一. 前言

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

面对以上这个问题,我在当时的项目是使用了一个基于安卓原生 zxing 扫码插件实现的,虽然扫码效率可观,但是它也有一些弊端,比如:仅支持安卓设备不支持苹果设备样式不是特别好看反光二维码识别会有影响等等,详细了解请参考我之前写过的一篇文章:

uni-app 跳坑系列:谈谈我是如何提升安卓 App 扫码准确率的icon-default.png?t=O83Ahttps://blog.csdn.net/qq_24956515/article/details/141950635

今天这篇文章,我们继续探索一下是否还有其他更优秀的插件,可以给我们在 uni-app 的项目中提供流畅的扫码服务,之前在开发项目的过程中,确实发现一款相对更优秀的原生扫码插件,它拥有更优秀且强大的识别能力和识别速度,对弱光反光模糊二维码也具有优秀的识别能力,接下来我们来具体的看一下吧!

二. mPaaS 扫码组件

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

三. 创建 mPaaS 应用

1. 开通阿里云 mPaaS

登录阿里云控制台,找到移动开发平台 mPaaS进入,或直接访问以下平台进入移动开发平台 mPaaSicon-default.png?t=O83Ahttps://www.aliyun.com/product/mobilepaas/mpaas点击产品页面就可以直接进入。

之后点击 “管理控制台”,进入 “开通产品” 页面。点击 “立即开通”,就可以开通 mPaaS 产品。

以上我们就完成了第一步,开通阿里云 mPaaS,接下来我们需要进行创建应用了。

2. 创建 mPaaS 应用

开通后您需要先创建一个 mPaaS 应用,点击以下链接:创建一个 mPaaS 应用icon-default.png?t=O83Ahttps://mpaas.console.aliyun.com/#/mpaas/dashboard

简单维护好应用名称应用 LOGO就完成了开启 mPaaS 接入的第一步

将 mPaaS 接入到我的应用,1 分钟快速完成 App 代码配置

配置过程中主要包含以下四个步骤:

  1. 维护应用信息

    • 主要是应用的名称及 Logo,感觉没什么用,可以跳过省略。

  2. 下载配置文件

    • 填写配置信息,完成上传签名 APK,然后“下载配置文件”到本地,进行代码配置,需要上传签名后的 APK 文件,输入应用包名 Package Name

    • 这一步很重要,配置完成后,下载配置文件中有我们要用到的一些信息。

  • Android 代码配置:

 

  • iOS 代码配置: 

 

  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 原生扫码插件

下载地址:进入页面,点击下载icon-default.png?t=O83Ahttps://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 一般需要如下的权限:

  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 项目中使用插件

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 安卓版进行体验icon-default.png?t=O83Ahttps://www.pgyer.com/anyup-demo

参考文档

mPaas 官方文档icon-default.png?t=O83Ahttps://help.aliyun.com/document_detail/49549.html?spm=a2c4g.165212.0.0.66762a9dEzJcn7

uni-app 支付宝原生扫码插件icon-default.png?t=O83Ahttps://ext.dcloud.net.cn/plugin?id=2636

标签:扫码,app,插件,mPaaS,uni,Android
From: https://blog.csdn.net/qq_24956515/article/details/143143261

相关文章

  • vue3监听和不能使用this问题,uniapp封装请求
    http.js//格式化日期函数exportfunctionrequest(method,url,data){consturls="http://183.6.96.231:29101"; constusername=uni.getStorageSync('username'); consttoken=uni.getStorageSync('token'); uni.showLoading({......
  • 最新毕设-SpringBoot-健康体检系统-12791(免费领项目)可做计算机毕业设计JAVA、PHP、爬
    springboot健康体检系统摘要在如今IT技术快速发展和Internet广泛应用的时代,电子和网络技术给人们生活带来了便利,同时也会直接或间接损害人们的健康。所以,本次的毕业设计创作的意义就是通过信息化的统一管理,给用户尽心健康体检预约提供了方便。本设计主要实现集人性化、高效......
  • (2024最新毕设合集)基于Django的房价分析平台-65434|可做计算机毕业设计JAVA、PHP、爬虫
    摘要本论文主要论述了如何基于Django框架开发一个房价分析平台,本系统将严格按照软件开发流程进行各个阶段的工作,通过爬虫技术对贵州省的房价数据进行爬取,面向对象编程思想进行项目开发。在引言中,作者将论述房价分析平台的当前背景以及系统开发的目的,后续章节将严格按照软件......
  • EBIS4043 Big Data Analysis and Applications
    ThepurposeofthisassignmentistomakesurethatyouarepickinguptheRbasedanalyticsskills(Pleasedonotuseothertoolstogeneratetheanswers!)thathavebeenintroducedinthisclassandcheckyourability.(Total50marks)1.Usethedataset......
  • 利用samtools flagstat 对bam文件统计比对率的时候看的是哪个mapping rate
     001、在samtoolsflagstat对bam的统计结果中,一共有三个比对率的结果: 002、比对率结果应该以哪个为准?答案是:以3为准 003、以山羊、绵羊的fastq数据,绵羊的参考基因组进行比对测试a、如果以primarymapped对比,基本看不出两者的差异(其中S是sheep,G是goat) b、如果以......
  • zlibrary网址是哪个及zlibrary电脑客户端/app下载
    Z-Library是一家电子图书馆,同时也是全球科学图书和学术文献最大的免费资源之一。以下是对Z-Library的详细介绍及使用步骤:一、Z-Library介绍资源规模:Z-Library的数字档案库包含超过1400万本书籍,涵盖了广泛的学科领域,使其成为互联网上最为庞大的图书馆之一。实体书籍交流:Z-Librar......
  • Vue2 - 完美解决html2canvas截图不全问题,截屏导出的图片显示不全只有一部分或缺一块,vu
    前言该解决方案任意前端技术栈通用,不仅限Vue。在vue2(手机H5移动端/微信公众号H5页面)项目开发中,使用html2canvas截屏时发现有一部分未截取到少了一块截图不完整,导出保存图片时发现截图只有一半显示不全,另外还有一个问题就是截图时截取当前可视区域的问题(出现滚动条只保......
  • Win11系统appdata文件夹位置详解
    Win11系统appdata文件夹位置详解在我们的日常电脑使用中,C盘作为系统盘,承载着大量的系统文件和应用程序数据。其中,Appdata文件夹是一个非常重要的目录,它包含了软件的配置信息、临时文件等,这些文件对于软件的正常运行至关重要。然而,由于Appdata文件夹默认是隐藏的,很多使用Win......
  • uniapp精仿支付宝UI界面,首页/理财/消息/生活/口碑/我的,还有模拟支付宝扫码支付/收付款
    uniapp精仿支付宝UI界面,首页/理财/消息/生活/口碑/我的,还有模拟支付宝扫码支付/收付款等功能,界面漂亮颜值高,视频商城小工具等,蚂蚁森林种树养鸡农场偷菜样样齐用于视频,商城,直播,聊天等sumer-alipay介绍uniapp精仿支付宝UI界面,首页/理财/消息/生活/口碑/我的,还有模拟支付宝......
  • uniapp精仿微信源码,基于SumerUI和Uniapp前端框架的一款仿微信APP应用,界面漂亮颜值高,视
    uniapp精仿微信源码,基于SumerUI和Uniapp前端框架的一款仿微信APP应用,界面漂亮颜值高,视频商城小工具等,朋友圈视频号即时聊天用于视频,商城,直播,聊天,等等场景,源码分享sumer-weixin介绍uniapp精仿微信,基于SumerUI3.0和Uniapp前端框架的一款仿微信APP应用,界面漂亮颜值高,视频......