背景
前言
介绍
<https://github.com/Redth/ZXing.Net.Maui >，提供了一个XAML的控件 zxing:CameraBarcodeReaderView ，但是没有提供Blazor的组件，因此我们就在此基础上，在Blazor中使用XAML页面实现条形码扫描功能。
思路
https://learn.microsoft.com/en-us/dotnet/api/xamarin.forms.inavigation?view=xamarin-forms
开发步骤
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：识别到结果之后的回调方法
另外我们添加了一个按钮方便用户随时退出扫描页面。
{
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 可以识别多个条码
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);
}
}
}
使用
<string>This app uses barcode scanning to...</string>
builder
.UseMauiApp<App>()
.UseBarcodeReader() //初始化
....
@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();
}
}
注意：演示项目使用项目名称为QrCodeSample短名称，是为了避免iOS打包过程中报错，如果文件路径长度超过255，会报错某些文件无法找到的。
