如何使用.NET MAUI与Blazor开发Wear OS手表混合应用？

一、先搭好开发环境 #

• 安装最新版Visual Studio，必须勾选**.NET MAUI开发 workload和Android SDK**
• 配置Wear OS模拟器：打开Android SDK Manager，下载Wear OS系统镜像，创建模拟器时选择圆形或方形表盘的设备（比如Wear OS 3的Pixel Watch镜像）
• 确保电脑已安装.NET 7及以上SDK，.NET MAUI对Wear OS的支持从.NET 7开始才比较完善

二、创建基础项目 #

• 打开Visual Studio，新建NET MAUI Blazor App项目，使用默认模板即可
• 先运行一遍Android平台，确认基础项目能正常编译运行，再进行后续配置

三、配置Wear OS专属设置 #

1. 修改Android清单文件 #

• 打开Platforms/Android/AndroidManifest.xml，添加以下配置：

  <!-- 声明为手表应用 -->
  <uses-feature android:name="android.hardware.type.watch" android:required="true" />
  <!-- 申请通知权限（Wear OS常用） -->
  <uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
  <!-- 配置启动器 -->
  <application ...>
    <activity ...>
      <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
        <!-- 标记为手表应用启动项 -->
        <category android:name="android.intent.category.WATCH_APP" />
      </intent-filter>
    </activity>
  </application>
  

• 调整SDK版本：在项目属性中把最小Android版本设为26（Wear OS 2.0最低要求），目标Android版本设为33及以上

2. 适配手表屏幕 #

• 打开Platforms/Android/Resources/values/styles.xml，添加适配手表的主题：

  <style name="WatchAppTheme" parent="Maui.SplashTheme">
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowFullscreen">true</item>
    <!-- 适配圆形表盘的屏幕切口 -->
    <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
  </style>
  

• 回到AndroidManifest.xml，在application标签中指定该主题：android:theme="@style/WatchAppTheme"

四、把Blazor适配到手表上 #

1. 精简Blazor布局 #

• 打开Shared/MainLayout.razor，删除多余的导航栏、侧边栏，针对手表小屏幕做精简：

  @inherits LayoutComponentBase
  
  <div class="watch-page">
    <main>
      @Body
    </main>
  </div>
  
  <style>
    .watch-page {
      width: 100vw;
      height: 100vh;
      padding: 12px;
      box-sizing: border-box;
    }
    main {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
    }
  </style>
  

• 编写简单测试组件WatchCounter.razor，验证交互逻辑：

  <h3>手表计数器</h3>
  <p>当前数: @count</p>
  <button @onclick="IncrementCount">点我+1</button>
  
  @code {
    private int count;
  
    private void IncrementCount()
    {
        count++;
    }
  }
  

2. 处理手表专属交互 #

• 针对手表的后退键，实现Blazor页面的返回逻辑，在Platforms/Android/MainActivity.cs中重写方法：

  public override void OnBackPressed()
  {
      var blazorView = FindViewById<BlazorWebView>(Resource.Id.blazorWebView);
      if (blazorView != null && blazorView.CanGoBack())
      {
          blazorView.GoBack();
      }
      else
      {
          base.OnBackPressed();
      }
  }
  

五、测试调试 #

• 选择Wear OS模拟器作为运行目标，启动项目
• 注意模拟器的网络配置，确保能加载Blazor静态资源，若连接异常可手动设置代理
• 分别测试圆形和方形表盘，调整布局样式，避免内容被裁切

六、进阶优化 #

• 集成Wear OS传感器：比如心率、步数统计，可使用.NET MAUI传感器API，或编写Android平台特定代码调用原生API
• 优化续航：减少Blazor页面不必要的渲染，关闭后台闲置的网络请求
• 添加手表通知：使用.NET MAUI的NotificationManager创建适配Wear OS的通知，支持抬手显示等特性

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