如何使用Expo配置HTTP/HTTPS域名深度链接？能否唤起应用？

Hey there! Great news—Expo fully supports using your own HTTP/HTTPS domain to launch your app, via Universal Links (iOS) and App Links (Android). This is a more secure, standard-compliant alternative to custom schemes. Let’s walk through the implementation step by step:

1. 配置Expo项目（app.json） #

首先，更新项目的app.json文件，为两个平台启用链接处理：

{
  "expo": {
    "scheme": "yourapp", // 可选但推荐，作为旧设备的降级方案
    "associatedDomains": ["applinks:example.com"], // iOS通用链接配置
    "ios": {
      "bundleIdentifier": "com.yourteam.yourapp" // 替换为你的实际Bundle ID
    },
    "android": {
      "package": "com.yourteam.yourapp", // 替换为你的实际Android包名
      "intentFilters": [
        {
          "action": "VIEW",
          "data": [
            {
              "scheme": "https",
              "host": "example.com",
              "pathPrefix": "/" // 可按需限制路径，比如"/app/*"
            }
          ],
          "category": ["BROWSABLE", "DEFAULT"]
        }
      ]
    }
  }
}

2. 设置域名验证文件 #

两个平台都需要在你的域名上托管验证文件，以确认域名所有权和链接关联关系。

iOS（通用链接） #

创建名为apple-app-site-association的文件（无扩展名），放在域名根目录或.well-known子目录下，内容如下：

{
  "applinks": {
    "apps": [],
    "details": [
      {
        "appID": "YOUR_APPLE_TEAM_ID.com.yourteam.yourapp", // 替换为你的苹果团队ID + Bundle ID
        "paths": ["*"] // 可按需限制路径，比如["/app/*", "/profile/*"]
      }
    ]
  }
}

• 苹果团队ID可以在苹果开发者后台获取
• 确保文件通过HTTPS访问，且响应头为Content-Type: application/json

Android（应用链接） #

创建名为assetlinks.json的文件，放在域名的.well-known子目录下，内容包含应用包名和SHA-256指纹：

[
  {
    "relation": ["delegate_permission/common.handle_all_urls"],
    "target": {
      "namespace": "android_app",
      "package_name": "com.yourteam.yourapp", // 和app.json中的Android包名一致
      "sha256_cert_fingerprints": ["YOUR_SHA256_FINGERPRINT"]
    }
  }
]

• 获取SHA-256指纹：在项目中运行npx expo credentials:manager，选择Android查看证书详情即可
• 同样需要通过HTTPS访问，响应头为Content-Type: application/json

3. 在Expo应用中处理链接 #

使用expo-linking库监听并处理传入的链接。

首先安装库：

npx expo install expo-linking

然后在根组件（比如App.js）中添加链接处理逻辑：

import React, { useEffect } from 'react';
import * as Linking from 'expo-linking';
import { View, Text } from 'react-native';

export default function App() {
  useEffect(() => {
    const handleDeepLink = async (url) => {
      if (!url) return;
      
      // 解析URL提取路径和参数
      const parsedUrl = Linking.parse(url);
      console.log('收到深度链接:', parsedUrl);
      
      // 示例：根据路径跳转到对应页面
      // if (parsedUrl.path === '/profile') {
      //   navigation.navigate('Profile');
      // }
    };

    // 处理应用从链接启动时的初始URL
    Linking.getInitialURL().then(handleDeepLink);
    
    // 监听应用运行时收到的链接
    const subscription = Linking.addEventListener('url', (event) => {
      handleDeepLink(event.url);
    });

    // 组件卸载时清理监听器
    return () => subscription.remove();
  }, []);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>在浏览器中打开 https://example.com 即可唤起此应用！</Text>
    </View>
  );
}

4. 测试配置 #

• iOS：在模拟器/设备的Safari中输入你的域名链接（比如https://example.com），会弹出打开应用的提示；也可以用Xcode的"Open URL"调试工具测试。
• Android：在设备浏览器中输入链接，或者运行以下adb命令（替换为你的包名）：

  adb shell am start -W -a android.intent.action.VIEW -d "https://example.com" com.yourteam.yourapp
  

注意事项 #

• 确保你的域名使用HTTPS（iOS通用链接强制要求）
• 验证文件必须能公开访问，且响应头设置正确
• 如果用Expo Go测试，需确保项目已发布，且在Expo后台配置了关联域名

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