如何为MAUI iOS App与Angular网站实现通用导航链接（兼容Wildcard）

可以实现单一URL的跳转需求。由于你使用了通配符App ID，确实无法使用Apple官方的Universal Link（该功能要求绑定特定App ID与域名），但可以通过自定义URL Scheme + 网站Fallback逻辑的组合方案达成目标，以下是具体步骤：

一、MAUI iOS App端配置 #

1. 添加自定义URL Scheme #

编辑Platforms/iOS/Info.plist，添加URL Scheme配置，用于系统识别唤起你的App：

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>myuniquelink</string> <!-- 自定义唯一Scheme，建议结合品牌/域名命名，避免冲突 -->
    </array>
    <key>CFBundleURLName</key>
    <string>com.yourbrand.app</string> <!-- 填写你的Bundle ID前缀，即使是通配符ID也可填写标识性内容 -->
  </dict>
</array>

2. 处理App内跳转逻辑 #

在App.xaml.cs中重写OnAppLinkRequestReceived方法，解析跳转URL并导航到对应页面：

protected override void OnAppLinkRequestReceived(Uri uri)
{
    // 示例：解析URL路径，如myuniquelink://product/123，导航到商品详情页
    var pathSegments = uri.Segments;
    if (pathSegments.Length >= 2 && pathSegments[1] == "product/")
    {
        var productId = pathSegments[2].TrimEnd('/');
        // 导航到MAUI内的商品详情页
        MainPage?.Navigation.PushAsync(new ProductDetailPage(productId));
    }
    base.OnAppLinkRequestReceived(uri);
}

二、Angular网站端配置 #

1. 创建跳转处理组件 #

新建一个deep-link-redirect组件，核心逻辑是尝试唤起App，失败则跳转到网站对应页面：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-deep-link-redirect',
  template: '<p>正在跳转，请稍候...</p>'
})
export class DeepLinkRedirectComponent implements OnInit {
  constructor(private route: ActivatedRoute, private router: Router) {}

  ngOnInit(): void {
    // 获取当前URL的目标路径（比如从路由或查询参数中提取）
    const currentPath = this.router.url.replace('/redirect', '') || '/';
    const appSchemeUrl = `myuniquelink://${currentPath}`;

    // 尝试唤起App
    const link = document.createElement('a');
    link.href = appSchemeUrl;
    document.body.appendChild(link);
    link.click();

    // 设置超时，若App未唤起则跳转到网站对应页面
    setTimeout(() => {
      window.location.href = currentPath;
    }, 1500); // 超时时间可调整，1-2秒为合理区间
  }
}

2. 配置路由规则 #

在app-routing.module.ts中添加路由，将所有需要跳转的路径指向该组件：

const routes: Routes = [
  // 原有路由配置...
  { path: 'redirect', component: DeepLinkRedirectComponent },
  // 可选：用通配符路由处理所有深层链接请求
  { path: '**', component: DeepLinkRedirectComponent }
];

3. 优化用户体验（可选） #

在网站根页面index.html中添加iOS Smart Banner，补充跳转入口：

<meta name="apple-itunes-app" content="app-id=你的App Store应用ID, app-argument=myuniquelink://">

用户在Safari打开网站时，顶部会显示App下载/打开横幅，与跳转逻辑形成互补。

三、测试验证 #

• 未安装App：打开通用链接（如https://yourdomain.com/product/123），会触发跳转组件尝试唤起App，失败后自动跳转到网站的商品详情页。
• 已安装App：打开相同链接，系统会直接唤起MAUI App，并触发OnAppLinkRequestReceived方法处理页面跳转。

注意事项 #

• 自定义URL Scheme尽量使用独特名称，避免与其他App的Scheme冲突。
• 超时时间不要设置过短，给系统足够的唤起App时间；也不要过长，避免用户等待。

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