如何将MAUI Blazor Hybrid的Admob功能封装为可复用Blazor组件？

先做好AdMob在MAUI里的基础配置：

• 安装适配MAUI的AdMob相关NuGet包（比如Google.MobileAds）
• 给Android项目的AndroidManifest.xml添加AdMob应用ID和必要权限；iOS项目的Info.plist配置对应的GADApplicationIdentifier项

下面两种方法都能把AdMob封装成Blazor可复用组件：

方法一：直接用Blazor组件包装原生AdView #

创建一个名为AdMobBanner.razor的Blazor组件，代码如下：

@inherits ComponentBase
@using Google.MobileAds

[Parameter]
public string AdUnitId { get; set; } = string.Empty;

[Parameter]
public AdSize AdSize { get; set; } = AdSize.Banner;

protected override void BuildRenderTree(RenderTreeBuilder builder)
{
    base.BuildRenderTree(builder);
    // 构建MAUI原生的AdView控件
    builder.OpenComponent<AdView>(0);
    builder.AddAttribute(1, nameof(AdView.AdUnitId), AdUnitId);
    builder.AddAttribute(2, nameof(AdView.AdSize), AdSize);
    builder.CloseComponent();
}

protected override void OnAfterRender(bool firstRender)
{
    base.OnAfterRender(firstRender);
    if (firstRender)
    {
        // 首次渲染后加载广告
        var adView = FindComponent<AdView>()?.Instance;
        adView?.LoadAd(new AdRequest.Builder().Build());
    }
}

之后在任意Blazor页面里直接用：

<AdMobBanner AdUnitId="你的横幅广告单元ID" />

方法二：先做MAUI ContentView封装，再在Blazor里引用 #

1. 先创建MAUI的ContentView（AdMobBannerView.xaml）：

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:ads="clr-namespace:Google.MobileAds;assembly=Google.MobileAds"
             x:Class="你的项目命名空间.Views.AdMobBannerView">
    <ads:AdView x:Name="BannerAd" 
                AdSize="Banner"
                VerticalOptions="End" />
</ContentView>

对应的后台代码AdMobBannerView.xaml.cs：

using Google.MobileAds;

namespace 你的项目命名空间.Views;

public partial class AdMobBannerView : ContentView
{
    public static readonly BindableProperty AdUnitIdProperty =
        BindableProperty.Create(nameof(AdUnitId), typeof(string), typeof(AdMobBannerView), string.Empty, propertyChanged: OnAdUnitIdChanged);

    public string AdUnitId
    {
        get => (string)GetValue(AdUnitIdProperty);
        set => SetValue(AdUnitIdProperty, value);
    }

    private static void OnAdUnitIdChanged(BindableObject bindable, object oldValue, object newValue)
    {
        if (bindable is AdMobBannerView view && newValue is string adUnitId)
        {
            view.BannerAd.AdUnitId = adUnitId;
            view.LoadAd();
        }
    }

    private void LoadAd()
    {
        var request = new AdRequest.Builder().Build();
        BannerAd.LoadAd(request);
    }
}

2. 再创建Blazor组件AdMobBanner.razor来引用这个ContentView：

@using 你的项目命名空间.Views

[Parameter]
public string AdUnitId { get; set; } = string.Empty;

<MauiComponent ComponentType="typeof(AdMobBannerView)" Parameters="new Dictionary<string, object> { { nameof(AdMobBannerView.AdUnitId), AdUnitId } }" />

这样同样可以在Blazor页面里直接复用这个组件。

注意点 #

• 一定要在Android和iOS项目里正确配置AdMob应用ID，不然广告加载不出来
• 测试的时候用AdMob官方的测试广告单元ID，别用正式的，避免违反政策
• 要是需要处理广告加载状态（比如成功/失败），可以给组件加EventCallback参数，把状态回调给父页面

内容的提问来源于stack exchange，提问作者Kebechet