在NuxtJS+Capacitor+Vue应用中配置Firebase动态链接深度跳转

前置确认 #

你已经完成Xcode端的关联域名（Associated Domains）、URL Types配置，且点击动态链接可正常唤起应用，无需额外编写Swift原生代码，直接使用Capacitor官方API即可实现监听。

步骤1：安装Capacitor App插件 #

该插件封装了原生层的深度链接监听能力，无需手动修改iOS原生工程：

• 安装依赖：npm install @capacitor/app
• 同步配置到原生项目：npx cap sync

步骤2：在Nuxt中添加全局深度链接监听逻辑 #

在Nuxt项目的plugins目录下新建deep-link.client.ts文件，该插件仅在客户端运行，负责监听链接事件并处理路由跳转：

import { App } from '@capacitor/app'

export default defineNuxtPlugin(() => {
  const router = useRouter()

  // 监听应用处于后台/前台运行时触发的深度链接事件
  App.addListener('appUrlOpen', (event) => {
    handleDeepLink(event.url)
  })

  // 处理应用冷启动（完全关闭后通过链接打开）的初始链接
  App.getLaunchUrl().then((res) => {
    if (res?.url) {
      handleDeepLink(res.url)
    }
  })

  // 自定义链接解析与跳转逻辑
  function handleDeepLink(fullUrl: string) {
    // 解析Firebase动态链接携带的路径、参数
    const urlInstance = new URL(fullUrl)
    const targetPath = urlInstance.pathname
    // 可按需获取query参数，例如邀请码、商品ID等
    // const productId = urlInstance.searchParams.get('product_id')

    // 执行Nuxt路由跳转
    if (targetPath) {
      router.push(targetPath)
    }
  }
})

验证方式 #

1. 重新编译运行iOS应用
2. 在系统备忘录中点击你的Firebase动态链接，确认可正常唤起应用并跳转到对应页面

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