跳到主要内容
版本：v4

使用通用链接和应用链接实现深度跳转

支持平台：iOS、Android

通用链接（iOS）和应用链接（Android）能够直接将用户引导至原生应用内的特定内容（俗称深度链接）。

当用户点击深度链接时，会直接跳转至您的应用，无需先经过设备浏览器或网站中转。如果应用未安装，则会跳转至网站。这种机制使得深度链接成为跨平台应用（网页/iOS/Android）的理想特性：提供无缝移动体验，同时优雅回退到网页版本。

优势：

  • 安全性：使用您拥有域名的HTTPS链接，防止其他应用冒用
  • 无缝体验：同一链接同时适用于网站和应用
  • 提升参与度：可从邮件客户端、搜索引擎结果等场景直接打开

演示视频​

以下实际案例展示了用户已安装原生应用的情况。点击邮件中的链接后，直接进入应用内部：首先是根链接(https://beerswift.app)跳转至应用主页，然后是深度链接(https://beerswift.app/tabs/tab3)跳转至Tab3页面。

前提准备​

示例将使用https://beerswift.app作为网页应用链接。

使用Capacitor App API实现深度链接路由​

当通过深度链接打开应用时，移动操作系统不会自动处理路由跳转。您需要使用Capacitor的App API在应用启动时自行实现。

Angular方案​

在app.component.ts中实现路由逻辑：

import { Component, NgZone } from '@angular/core';
import { Router } from '@angular/router';
import { App, URLOpenListenerEvent } from '@capacitor/app';
constructor(private router: Router, private zone: NgZone) {
    this.initializeApp();
}
initializeApp() {
    App.addListener('appUrlOpen', (event: URLOpenListenerEvent) => {
        this.zone.run(() => {
            const slug = event.url.split(".app").pop();
            if (slug) {
                this.router.navigateByUrl(slug);
            }
        });
    });
}

React方案​

创建AppUrlListener.tsx组件：

import React, { useEffect } from 'react';
import { useHistory } from 'react-router-dom';
import { App, URLOpenListenerEvent } from '@capacitor/app';
const AppUrlListener: React.FC<any> = () => {
  let history = useHistory();
  useEffect(() => {
    App.addListener('appUrlOpen', (event: URLOpenListenerEvent) => {
      const slug = event.url.split('.app').pop();
      if (slug) {
        history.push(slug);
      }
    });
  }, []);

  return null;
};

在App.tsx中引入组件：

import AppUrlListener from './pages/AppUrlListener';
<IonReactRouter>
    <AppUrlListener></AppUrlListener>
    {/* 其他路由配置 */}
</IonReactRouter>

Vue方案​

在路由配置文件（如routes.js）中实现：

import { App, URLOpenListenerEvent } from '@capacitor/app';
import Vue from 'vue';
import VueRouter from 'vue-router';
const router = new VueRouter({
  routes: [],
  mode: 'history'
});
App.addListener('appUrlOpen', function (event: URLOpenListenerEvent) {
  const slug = event.url.split('.app').pop();
  if (slug) {
    router.push({
      path: slug,
    });
  }
});

创建网站关联文件​

需要在网站.well-known目录下放置验证文件，例如：https://beerswift.app/.well-known/

iOS配置​

创建关联文件​

  1. 登录Apple开发者网站
  2. 在应用标识符中启用"Associated Domains"
  3. 创建无扩展名的apple-app-site-association文件：
{
  "applinks": {
    "apps": [],
    "details": [
      {
        "appID": "TEAMID.BUNDLEID",
        "paths": ["*"]
      }
    ]
  }
}
  1. 使用验证工具检查配置

添加关联域名​

在Xcode的Signing & Capabilities中添加applinks:yourdomain.com格式的域名。

Android配置​

创建关联文件​

  1. 生成或获取Keystore证书
  2. 通过命令获取SHA256指纹：
keytool -list -v -keystore my-release-key.keystore
  1. 使用Google的Asset Links工具生成assetlinks.json：
[
  {
    "relation": ["delegate_permission/common.handle_all_urls"],
    "target": {
      "package_name": "com.netkosoft.beerswift",
      "sha256_cert_fingerprints": ["43:12:D4:27:D7:C4:14..."]
    }
  }
]

添加Intent Filter​

在AndroidManifest.xml的Activity中添加：

<intent-filter android:autoVerify="true">
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="https" android:host="beerswift.app" />
</intent-filter>

网站部署​

各框架配置建议​

  • Angular：将文件放入src/.well-known，在angular.json中添加资源配置
  • NuxtJS/React：直接将文件放入static/.well-known或public/.well-known
  • WordPress：参考专用配置指南

验证测试​

直接在已安装应用的设备上点击网站链接测试即可，无需发布到应用商店。

扩展阅读​

Contents

编辑此页