MAUI条形码，二维码扫描功能

Posted 2023-01-11 厦门德仔

前言

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

介绍

移动端的扫描条形码、二维码的功能已经随处可见，已经很难找到一个不支持扫描的App了，但是微软的MAUI竟然没有提供，那么我们应该如何实现呢？

其实早在 Xamarin开发的时候就已经有前辈实现了扫码功能，例如 ZXing.Net.Mobile ,该包目前依旧可以在MAUI的android平台正常工作，但是
前辈已经提供了基于MAUI的更新包 ZXing.Net.Maui

https://github.com/Redth/ZXin…
提供了一个XAML的控件 zxing:CameraBarcodeReaderView

思路

这里我们的思路是在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文件，并添加如下代码

<?xml version="1.0" encoding="utf-8" ?>
<mauiPopup:BasePopupPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:mauiPopup="clr-namespace:MauiPopup.Views;assembly=MauiPopup"
             xmlns:zxing="clr-namespace:ZXing.Net.Maui.Controls;assembly=ZXing.Net.MAUI.Controls"
             x:Class="ZxingBarcodeDemo.PopupPage"
                         ForegroundColor="Yellow"
                         VerticalOptions="Center"
                         HorizontalOptions="Fill"
                         Margin="10,0,10,0"
             Title="PopupPage">
    <VerticalStackLayout Padding="20">

        <zxing:CameraBarcodeReaderView IsDetecting="True"
                                       IsTorchOn="False" BarcodesDetected="CameraBarcodeReaderView_BarcodesDetected"></zxing:CameraBarcodeReaderView>

        <Label x:Name="barcodeResult"
            Text="二维码"
            VerticalOptions="Center" 
            HorizontalOptions="Center" />
        <Button
                x:Name="CloseBtn"
                Text="关闭"
                SemanticProperties.Hint="Counts the number of times you click"
                Clicked="OnCloseClicked"
                HorizontalOptions="Center" />
    </VerticalStackLayout>
</mauiPopup:BasePopupPage>

参数说明如下：

• WidthRequest和HeightRequest：扫描窗口的长宽
• IsTorchOn：是否显示手电桶
• IsDetecting：是否显示正在检测的界面效果
• BarcodesDetected：识别到结果之后的回调方法
  在代码文件PopupPage.xaml.cs中添加代码，实现扫描到结果之后关闭当前模态窗口。
  另外我们添加了一个按钮方便用户随时退出扫描页面。

using MauiPopup.Views;
using MauiPopup;
using ZXing.Net.Maui;

namespace ZxingBarcodeDemo;

public partial class PopupPage : BasePopupPage

	public string result;
	public PopupPage()
	
		InitializeComponent();
	
	/// <summary>
	/// 关闭页面
	/// </summary>
	/// <param name="sender"></param>
	/// <param name="e"></param>
	private async void OnCloseClicked(object sender, EventArgs e)
	    
        await PopupAction.ClosePopup();
	
	/// <summary>
	/// 扫码
	/// </summary>
	/// <param name="sender"></param>
	/// <param name="e"></param>
	private void CameraBarcodeReaderView_BarcodesDetected(object sender, ZXing.Net.Maui.BarcodeDetectionEventArgs e)
	
        //主线程不会卡死
        Dispatcher.Dispatch(() => 
            barcodeResult.Text = $"e.Results[0].Value";// $"e.Results[0].Valuee.Results[0].Format";
            result = $"e.Results[0].Value";
            //如何传入子页面
        );
    

CameraBarcodeReaderView_BarcodesDetected回调方法的BarcodeDetectionEventArgs 参数为扫描之后的结果，我们可以通过e.Results，获取扫描到的结果集（因为之前指定了Multiple = True）

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

这部分使用了MAUI提供的IDispatcher.Dispatch，IDispatcher提供核心事件消息调度程序，Dispatch方法的参数是一个Action，该方法将提供的Action从一个工作线程安排到 UI 线程运行，如果允许成功就返回true。

扫描成功后，需要自动关闭当前页面。用户也可以随时通过按钮点击关闭页面。关闭使用Application.Current.MainPage.Navigation.PopModalAsync(true) 该方法异步关闭最近以模态方式呈现的页面，并带有可选动画。唯一的参数就是是否显示动画效果。

使用

Android 需要在AndroidManifest.xml添加摄像头权限，并在使用是动态获取用户授权（本文以ios举例，Android不做具体实现）

在MauiProgram.cs添加UseBarcodeReader初始化方法（这个扩展方法是ZXing.Net.Maui提供的）

var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp()
.UseBarcodeReader() //初始化
…

效果测试：