背景

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>

参数阐明如下:

WidthRequestHeightRequest:扫描窗口的长宽
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.DispatchIDispatcher提供外围事件音讯调度程序,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