uni.scanCode识别度低?试试MpaasScan:支付宝扫码(保姆教程)

409 阅读6分钟

前言

开发过uniapp的选手肯定都有使用过uniapp官方的扫码 uni.scanCode(OBJECT), 正常情况下识别正常二维码都是能够正常使用的,随着业务拓展,慢慢的会发现uni.scanCode存在一些不足:

  1. =====二维码url信息=====, 10320174 --------- 偶现获取到的二维码url信息为一串数值
  2. 二维码不清晰,导致完全识别不到
  3. 识别不到条形码

怎么办?出现偶现问题让用户多次扫描?二维码不清晰让修改二维码像素?

老板:换一个前端,问题解决!

稍安勿躁,看下uniapp官方是如何解决的,

image.png > 很好,uniapp官方不作为,但至少指明了解决方向,改用其他官方扫码插件 > > 那到底哪个插件好些呢? > > A:再货比三家? > > B:免费的 `MpaasScan`支付宝扫码 > > BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB (仅代表个人选择)

dacd2633d04544dabaac13d20e4eb0ef\~tplv-73owjymdk6-jj-mark-v1\_0\_0\_0\_0\_5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5LiN54ix6K-06K-d6YOt5b6357qy\_q75.webp>

什么是 mPaaS

移动开发平台(Mobile PaaS,简称 mPaaS)是源于支付宝 App 的移动开发平台,为移动开发、测试、运营及运维提供云到端的一站式解决方案,能有效降低技术门槛、减少研发成本、提升开发效率,协助企业快速搭建稳定高质量的移动 App。

什么是MpaasScan

扫一扫(Scan)是 mPaaS 提供的扫码组件,源于支付宝的扫码能力。该组件秉承了支付宝精准、快速的扫码能力,能够迅速识别出条形码并准确地获得条码中的信息。

产品优势

mPaaS 的扫一扫功能,在同等条件下,和业界领先的同类产品相比,在扫码的识别速度、识别率等能力上均占有优势。

识别速度快

在同等距离、同等光源的情况下,mPaaS 扫一扫对二维码/条形码的识别速度快于同类产品。

识别能力强

依赖于特有的模糊处理和数据评估矫正,同类产品的相册调用其扫码组件 API 无法识别出的图片,mPaaS 扫一扫也能够识别出来。

使用教程

1.注册登录 阿里云 mPaaS

[点击直接访问阿里云 mPaaS登录页面↗](https://www.aliyun.com/product/mpaas)

image.png

2.在控制台创建 mPaaS 应用

进入mPaaS控制台↗

image.png

点击创建应用,按要求完善应用信息。

  1. (必选)输入应用名称。应用名称示例:mPaaS Demo。
  2. (可选)单击  +  上传应用图标。若不上传,则使用默认图标。应用图标大小应不超过 1 MB,尺寸在 50 PX - 200 PX,图片格式为 JPG 或 PNG

image.png

  1. 单击 创建,应用创建成功,并跳转到应用总览页面。

3.下载对应配置文件

1.选择对应的系统 iOS / Android / 鸿蒙

image.png

2.点击下载配置文件弹出侧边栏,完成代码配置

image.png

3.最后点击下载配置文件config,先保管好待会要用哦

4.在 uni-app 中接入 mPaaS 扫码插件

  1. 插件文件下载地址:进入插件市场,点击下载
  2. 下载完成后,将 Zip 压缩包解压后,放入 uni-app 应用目录 nativeplugins 下,如图

Snipaste\_2024-10-10\_14-46-41.png

nativeplugins存放原生插件,与 pages 同级,将下载好的 Mpaas-Scan 放进去

5.导入config信息

使用 UniApp mPaaS 扫码插件的时候,需要将 config 信息导入到 uni-app 里, 注意 Androidios 操作不同,只配置 Android 或者只配置 ios 都会导致另一方不兼容,即想做到兼容 Androidios ,就需要把下面的操作都配置一遍哦。

Android

  1. 将前面在阿里云mpaas官网下载好的 config 文件打开,同时打开 HBuilderX 中你uniapp项目的 manifst.json 文件。
  2. 点击 [选择本地插件]勾选 支付宝原生扫码插件,点击 确认

image.png

  1. config 文件中对应字段复制粘贴进去,如图 圈中 字段进行对应

image.png

iOS

将下载的 config 文件,重命名为 meta.config,然后将这个文件放入到项目中,例如: /XX project/nativeplugins/Mpaas-Scan/ios/meta.config,如图所示

image.png

如果使用本地插件需要将下载的依赖库放到和meta.config文件相同目录下; 如果使用云端插件只需要将meta.confg文件放到该目录下再进行云打包。

至此已经完成配置,接下来就是代码使用

封装扫码公共方法mpaasScan

uniapp 项目中,有很多地方需要用到扫码,而 uniapp 原生插件需要使用 uni.requireNativePlugin("") 进行引入,所以我们可以将引入的支付宝扫码插件封装为一个公共方法,统一引入原生插件,使用 Promise 在扫码成功时候 resolve 返回二维码url,在调用扫码后使用url来做一些操作, reject 时候统一提示扫码错误。当然,并不是固定的,可以根据自己项目来进行详细封装,例如调用公共接口,再返回需要用到的信息数据等等,下面仅为个人提取代码:

/** 
 * mpaasScan
 * 支付宝原生扫码插件公共方法
 * import mpaasScan from "@/utils/mpaasScan";
 * mpaasScan()
    .then((res) => {
      成功时处理结果
    })
 */

function mpaasScan () {
  return new Promise ((resolve,reject) => {
    // 引入原生插件
    const  mpaasScanModule = uni.requireNativePlugin("Mpaas-Scan-Module")
    
    // 调用插件的 mpaasScan 方法
    mpaasScanModule.mpaasScan(
      {
        // 扫码识别类型,参数可多选,qrCode、barCode,
        // 如不设置,默认识别所有扫码类型,可能有些许影响识别效率
        scanType: ["qrCode", "barCode"],
        // 是否隐藏相册,默认false不隐藏
        hideAlbum: false,
      },
      (ret) => {
        // 返回值中,有三个参数 resp_code、resp_message、resp_result
        // resp_code 表示返回结果值,10:用户取消,11:其他错误,1000:成功
        // resp_message 表示返回结果信息
        // resp_result 表示扫码结果,只有成功才会有返回
        if (ret.resp_code == 1000) {
          resolve(ret.resp_result)
        } else {
          uni.showToast({
            title: ret.resp_message || '扫码失败',
            icon: "none",
            duration: 3000,
          });
          reject(new Error(ret.resp_message))
        }
      }
    );
  })
}

export default mpaasScan

使用中可能遇到的坑🕳

  • 调用时提示 config 未配置,可能为下载 config 文件前填写的包名错误,请对应填写正确!
  • Android 正常使用而 ios 提示config 未配置,可能为没有正确命名 meta.config 文件名或者文件放置位置错误。
  • 本地基座运行,使用时候报错 mpaasScan' of undefined, 改用 自定义基座 运行,并安装自定义基座,再次运行到 Android App基座,选择自定义基座
image.png image.png

注意修改代码不需要再次制定自定义基座

  • 更多问题待补充,嘻嘻(●'◡'●)

PS:mpaas基线内部会依赖外部的三方库,会导致打包缓慢,介意勿用

至此,已经完成了支付宝扫码的配置和调用,快拿去愉快玩耍吧!

Snipaste_2024-09-27_15-57-25.png

参考文档

uniapp - 支付宝原生扫码插件↗

阿里云 - 移动开发平台 mPaaS官方文档↗