关于.net:MASA-MAUI-Plugin-四条形码二维码扫描功能

MAUI 的呈现，赋予了宽广.Net 开发者开发多平台利用的能力，MAUI 是 Xamarin.Forms 演变而来，然而相比 Xamarin 性能更好，可扩展性更强，构造更简略。然而 MAUI 对于平台相干的实现并不残缺。所以 MASA 团队发展了一个实验性我的项目，意在对微软 MAUI 的补充和扩大

我的项目地址https://github.com/BlazorComp…，

每个性能都有独自的 demo 演示我的项目，思考到 app 安装文件体积（尽管 MAUI 曾经集成裁剪性能，然而该性能对于代码自身有影响），届时每一个性能都会以独自的 nuget 包的模式提供，不便测试，当初我的项目才刚刚开始，然而置信很快就会有能够交付的内容啦。

本系列文章面向挪动开发小白，从零开始进行平台相干性能开发，演示如何参考平台的官网文档应用 MAUI 技术来开发相应性能。

挪动端的扫描条形码、二维码的性能曾经随处可见，曾经很难找到一个不反对扫描的 App 了，然而微软的 MAUI 居然没有提供，那么咱们应该如何实现呢？

其实早在 Xamarin 开发的时候就曾经有前辈实现了扫码性能，例如 ZXing.Net.Mobile , 该包目前仍旧能够在 MAUI 的 Android 平台失常工作，然而在 iOS 平台通过测试无奈失常工作。

那 iOS 有方法实现扫描条形码性能吗？

前辈曾经提供了基于 MAUI 的更新包 ZXing.Net.Maui

https://github.com/Redth/ZXin…

提供了一个 XAML 的控件 zxing:CameraBarcodeReaderView 然而没有提供 Blazor 的组件，因而咱们就在此基础上，在 Blazor 中应用 XAML 页面实现条形码扫描性能。

这里咱们的思路是在 Blazor 页面通过一个模态弹窗弹出一个新的 XAML 页面，而后在新页面扫码完结后敞开以后页面将扫码后果带回到 Blazor 页面。然而怎么实现呢，咱们在 Xamarin.Forms 找到了 INavigation 接口，该接口提供了特定与接口形象的平台导航，具体参考

https://learn.microsoft.com/e…

咱们能够应用该接口的 PopModalAsync 办法，用来异步弹出一个模态窗口。

1、咱们新建一个 MAUI 类库我的项目 Masa.Blazor.Maui.Plugin.QrCode
2、装置 ZXing.Net.MAUI NuGet 包
3、在我的项目中新建.Net MAUI ContentPage(XAML) BarcodeReader.xaml 文件，并增加如下代码

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:zxing="clr-namespace:ZXing.Net.Maui.Controls;assembly=ZXing.Net.MAUI"
             x:Class="MauiAppAgent.MasaBarcodeReader"
             Title="MasaBarcodeReader">
    <VerticalStackLayout>
        <zxing:CameraBarcodeReaderView 
            x:Name="BarcodeReader"
            WidthRequest="300"
            HeightRequest="300"
            IsDetecting="true" 
            IsTorchOn="false" 
            BarcodesDetected="CameraBarcodeReaderView_BarcodesDetected"   />
        <Button Padding="10" Clicked="ReturnToBlazor_Clicked" Text="返回"></Button>
    </VerticalStackLayout>
</ContentPage>

参数阐明如下：

WidthRequest和HeightRequest：扫描窗口的长宽
IsTorchOn：是否显示手电桶
IsDetecting：是否显示正在检测的界面成果
BarcodesDetected：辨认到后果之后的回调办法

在代码文件 BarcodeReader.xaml.cs 中增加代码，实现扫描到后果之后敞开以后模态窗口。
另外咱们增加了一个按钮不便用户随时退出扫描页面。

public partial class BarcodeReader : ContentPage
{public delegate void BarcodeDetected(string barcodeResult);
    public event BarcodeDetected OnBarcodeDetected;
    public MasaBarcodeReader()
    {InitializeComponent();
        BarcodeReader.Options = new BarcodeReaderOptions
        {
            Formats = BarcodeFormats.All,
            AutoRotate = true,
            Multiple = true
        };
    }
    private void CameraBarcodeReaderView_BarcodesDetected(object sender, BarcodeDetectionEventArgs e)
    {Dispatcher.Dispatch(() =>
        {if (OnBarcodeDetected != null)
            {OnBarcodeDetected(e.Results[0].Value);
                CloseReader();}
        });
    }

    private void CloseReader()
    {Application.Current.MainPage.Navigation.PopModalAsync(true);
    }
    private void ReturnToBlazor_Clicked(object sender, EventArgs e)
    {CloseReader();
    }
}

构造函数中咱们指定参数：

BarcodeFormats.OneDimensiona 条码类型，
能够是一维条形码（OneDimensiona，反对：Codabar、Code39、Code93、Code128、Ean8、Ean13、Itf、Rss14、RssExpanded、UpcA、UpcE）
二维码（TwoDimensional，反对：Aztec、DataMatrix、Itf、MaxiCode、Pdf417、QrCode、UpcEanExtension、Msi、Plessey、Imb）
全副（All，反对以上全副）
AutoRotate = True 主动旋转
Multiple = True 能够辨认多个条码

CameraBarcodeReaderView_BarcodesDetected回调办法的BarcodeDetectionEventArgs 参数为扫描之后的后果，咱们能够通过e.Results，获取扫描到的后果集（因为之前指定了Multiple = True）

这里为了演示咱们只取默认的第一个后果作为参数传递给 OnBarcodeDetected 事件，最终将后果传递给BarcodeDetected。

这部分应用了 MAUI 提供的 IDispatcher.Dispatch，IDispatcher 提供外围事件音讯调度程序，Dispatch办法的参数是一个 Action，该办法将提供的 Action 从一个工作线程安顿到 UI 线程运行，如果容许胜利就返回 true。

扫描胜利后，须要主动敞开以后页面。用户也能够随时通过按钮点击敞开页面。敞开应用Application.Current.MainPage.Navigation.PopModalAsync(true) 该办法异步敞开最近以模态形式出现的页面，并带有可选动画。惟一的参数就是是否显示动画成果。

4、咱们在根目录增加一个 MasaMauiBarcodeService.cs 动态类

using static Masa.Blazor.Maui.Plugin.QrCode.MasaBarcodeReader;

namespace Masa.Blazor.Maui.Plugin.QrCode
{
    // All the code in this file is included in all platforms.
    public static partial class MasaMauiBarcodeService
    {public static void ReadBarcode(BarcodeDetected actionBarcodeDetected)
        {MasaBarcodeReader barcodeReaderMauiComponent = new MasaBarcodeReader();
            barcodeReaderMauiComponent.OnBarcodeDetected += actionBarcodeDetected;
            Application.Current.MainPage.Navigation.PushModalAsync(barcodeReaderMauiComponent);
        }
    }
}

INavigation 接口提供了 Application.Current.MainPage.Navigation.PushModalAsync 办法，以模态形式弹出一个窗体 / 页面，参数就是咱们要弹出的窗体的对象也就是咱们新建的 MasaBarcodeReader.xaml 页面，咱们 new 一个 MasaBarcodeReader 对象，给他的OnBarcodeDetected 注册传递过去的 actionBarcodeDetected 办法，条形码的扫描后果作为惟一的参数，通过PushModalAsync 弹出咱们的窗口。

咱们新建一个 MAUI Blazor 的我的项目 QrCodeSample 作为演示，咱们这里以 iOS 举例，扫码须要摄像头，所以在 Info.plist 增加须要的摄像头权限

    <key>NSCameraUsageDescription</key>
    <string>This app uses barcode scanning to...</string>

Android 须要在 AndroidManifest.xml 增加摄像头权限，并在应用是动静获取用户受权（本文以 iOS 举例，Android 不做具体实现）

<uses-permission android:name="android.permission.CAMERA" />

在 MauiProgram.cs 增加 UseBarcodeReader 初始化办法（这个扩大办法是 ZXing.Net.Maui 提供的）

 var builder = MauiApp.CreateBuilder();
            builder
                .UseMauiApp<App>()
                .UseBarcodeReader() // 初始化
                ....

批改 Index.razor 页面进行测试

@page "/"
@using Masa.Blazor.Maui.Plugin.QrCode

<div class="text-center">
    <button class="btn btn-warning" @onclick="ReadBarcode">Scan barcodes</button>
</div>

<div class="mt-3">Barcode: @_barcodeJustRead</div>

@code {
    private string _barcodeJustRead;

    private void ReadBarcode()
    {MasaMauiBarcodeService.ReadBarcode(BarcodeReaderMauiComponent_OnBarcodeDetected);
    }
    private void BarcodeReaderMauiComponent_OnBarcodeDetected(string barcodeResult)
    {
        _barcodeJustRead = barcodeResult;
        StateHasChanged();}
}

间接调用 MasaMauiBarcodeService.ReadBarcode 并传递自定义的解决办法BarcodeReaderMauiComponent_OnBarcodeDetected

咱们看一下 iOS 的成果：

扫描成果还是很快很精确的，通过测试 Android 也能够失常应用。

留神：演示我的项目应用项目名称为 QrCodeSample 短名称，是为了防止 iOS 打包过程中报错，如果文件门路长度超过 255，会报错某些文件无奈找到的。

如果你对咱们 MASA 感兴趣，无论是代码奉献、应用、提 Issue，欢送分割咱们

WeChat：MasaStackTechOps
QQ：7424099

关于.net:MASA-MAUI-Plugin-四条形码二维码扫描功能

背景

前言

介绍

思路

开发步骤

应用