MASA MAUI Plugin (四)条形码、二维码扫描功能

本文介绍了如何在MAUI应用中实现条形码和二维码扫描功能,通过ZXing.Net.Maui库,结合Blazor在XAML页面上创建扫描界面,利用INavigation接口进行模态导航。文章详细阐述了开发步骤,包括创建MAUI类库项目、配置权限、使用ZXing.Net.Maui包,并展示了在iOS和Android上的实际效果。
摘要由CSDN通过智能技术生成

背景

MAUI的出现,赋予了广大.Net开发者开发多平台应用的能力,MAUI 是Xamarin.Forms演变而来,但是相比Xamarin性能更好,可扩展性更强,结构更简单。但是MAUI对于平台相关的实现并不完整。所以MASA团队开展了一个实验性项目,意在对微软MAUI的补充和扩展

项目地址https://github.com/BlazorComponent/MASA.Blazor/tree/main/src/Masa.Blazor.Maui.Plugin

每个功能都有单独的demo演示项目,考虑到app安装文件体积(虽然MAUI已经集成裁剪功能,但是该功能对于代码本身有影响),届时每一个功能都会以单独的nuget包的形式提供,方便测试,现在项目才刚刚开始,但是相信很快就会有可以交付的内容啦。

前言

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

介绍

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

其实早在 Xamarin开发的时候就已经有前辈实现了扫码功能,例如 ZXing.Net.Mobile ,该包目前依旧可以在MAUI的Android平台正常工作,但是在iOS平台经过测试无法正常工作。

那iOS有办法实现扫描条形码功能吗?

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

https://github.com/Redth/ZXing.Net.Maui

提供了一个XAML的控件 zxing:CameraBarcodeReaderView 但是没有提供Blazor的组件,因此我们就在此基础上,在Blazor中使用XAML页面实现条形码扫描功能。

思路

这里我们的思路是在Blazor 页面通过一个模态弹窗弹出一个新的XAML页面,然后在新页面扫码结束后关闭当前页面将扫码结果带回到Blazor页面。但是怎么实现呢,我们在 Xamarin.Forms 找到了 INavigation接口,该接口提供了特定与接口抽象的平台导航,具体参考

https://learn.microsoft.com/en-us/dotnet/api/xamarin.forms.inavigation?view=xamarin-forms

我们可以使用该接口的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="tr
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值