uni.scanCode识别度低？试试MpaasScan：支付宝扫码（保姆教程）

前言

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

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

怎么办？出现偶现问题让用户多次扫描？二维码不清晰让修改二维码像素？
老板：换一个前端，问题解决！
稍安勿躁，看下uniapp官方是如何解决的，

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

什么是 mPaaS
移动开发平台（Mobile PaaS，简称 mPaaS）是源于支付宝 App 的移动开发平台，为移动开发、测试、运营及运维提供云到端的一站式解决方案，能有效降低技术门槛、减少研发成本、提升开发效率，协助企业快速搭建稳定高质量的移动 App。
什么是MpaasScan
扫一扫（Scan）是 mPaaS 提供的扫码组件，源于支付宝的扫码能力。该组件秉承了支付宝精准、快速的扫码能力，能够迅速识别出条形码并准确地获得条码中的信息。
产品优势
mPaaS 的扫一扫功能，在同等条件下，和业界领先的同类产品相比，在扫码的识别速度、识别率等能力上均占有优势。
识别速度快
在同等距离、同等光源的情况下，mPaaS 扫一扫对二维码/条形码的识别速度快于同类产品。
识别能力强
依赖于特有的模糊处理和数据评估矫正，同类产品的相册调用其扫码组件 API 无法识别出的图片，mPaaS 扫一扫也能够识别出来。
使用教程
1.注册登录阿里云 mPaaS
点击直接访问阿里云 mPaaS登录页面↗

2.在控制台创建 mPaaS 应用
进入mPaaS控制台↗

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

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

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

3.下载对应配置文件
1.选择对应的系统 iOS / Android / 鸿蒙

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

Android 填写 Package Name
iOS 填写 Bundle ID
注意均为APP的包名，可在App云打包处查看，或者登录dcloud官网查看

3.最后点击下载配置文件config，先保管好待会要用哦
4.在 uni-app 中接入 mPaaS 扫码插件

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

nativeplugins存放原生插件，与 pages 同级，将下载好的 Mpaas-Scan 放进去
5.导入config信息
使用 UniApp mPaaS 扫码插件的时候，需要将 config 信息导入到 uni-app 里, 注意 Android 和 ios 操作不同，只配置 Android 或者只配置 ios 都会导致另一方不兼容，即想做到兼容 Android 和 ios ，就需要把下面的操作都配置一遍哦。
Android

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

将 config 文件中对应字段复制粘贴进去，如图圈中字段进行对应

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

如果使用本地插件需要将下载的依赖库放到和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基座，选择自定义基座