如何使用JS构建通用URL？弃用Firebase后自行实现Deep Link

Deep Link的实现需要覆盖Web端和移动端的配置，以下是分平台的具体步骤：

Web端配置 #

• 服务器路由映射：在你的服务器（Nginx、Node.js等）中配置路由，将Deep Link路径（如yourdomain.com/deep-link/*）指向对应的前端页面。比如用Node.js Express的示例：

app.get('/deep-link/*', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html')); // 单页应用返回入口文件
});

• 页面内解析参数：前端页面加载后，通过window.location对象提取路径和查询参数，执行对应的业务逻辑：

// 提取路径部分
const pathSegments = window.location.pathname.split('/').filter(seg => seg);
const targetPage = pathSegments[1]; // 比如/deep-link/product -> "product"
const itemId = pathSegments[2]; // -> "123"

// 提取查询参数
const urlParams = new URLSearchParams(window.location.search);
const utmSource = urlParams.get('utm_source');

• 平台关联配置：如果需要实现App跳转（Universal Links/iOS、App Links/Android），需在服务器根目录放置配置文件：
  • iOS：创建apple-app-site-association文件，指定App的Team ID和Bundle ID，无需后缀
  • Android：创建assetlinks.json文件，指定App的包名和SHA-256指纹

移动端配置 #

Android #

在AndroidManifest.xml中为目标Activity添加intent-filter，声明支持的Deep Link scheme和路径：

<activity android:name=".DeepLinkActivity">
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <!-- 支持HTTP/HTTPS链接 -->
        <data
            android:scheme="https"
            android:host="yourdomain.com"
            android:pathPrefix="/deep-link" />
        <!-- 支持自定义scheme -->
        <data
            android:scheme="yourapp"
            android:host="product" />
    </intent-filter>
</activity>

然后在Activity中解析Intent数据：

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    intent.data?.let { uri ->
        val path = uri.path
        val params = uri.queryParameterNames.associateWith { uri.getQueryParameter(it) }
        // 根据路径和参数跳转对应页面
    }
}

iOS #

在Info.plist中配置URL Types，支持自定义scheme：

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>yourapp</string>
        </array>
    </dict>
</array>

如果使用Universal Links，需开启Associated Domains能力，并添加applinks:yourdomain.com，然后在SceneDelegate中处理链接：

func scene(_ scene: UIScene, continue userActivity: NSUserActivity) {
    guard userActivity.activityType == NSUserActivityTypeBrowsingWeb,
          let url = userActivity.webpageURL else { return }
    // 解析URL并跳转对应页面
}

推荐使用原生URL API构建URL，它会自动处理字符编码和格式问题，比手动拼接更可靠：

构建HTTP/HTTPS Deep Link #

// 初始化基础URL
const baseUrl = new URL('https://yourdomain.com/deep-link');

// 添加路径片段
baseUrl.pathname += '/product/123';

// 添加查询参数
baseUrl.searchParams.set('utm_source', 'web');
baseUrl.searchParams.set('utm_campaign', 'summer_sale');
baseUrl.searchParams.append('tag', 'electronics'); // 支持添加多个同键参数

// 转换为字符串
const finalUrl = baseUrl.toString();
console.log(finalUrl); 
// 输出: https://yourdomain.com/deep-link/product/123?utm_source=web&utm_campaign=summer_sale&tag=electronics

构建自定义Scheme的App Deep Link #

const appDeepLink = new URL('yourapp://product/detail');

// 添加参数
appDeepLink.searchParams.set('id', '456');
appDeepLink.searchParams.set('name', '无线耳机'); // 自动编码中文

console.log(appDeepLink.toString());
// 输出: yourapp://product/detail?id=456&name=%E6%97%A0%E7%BA%BF%E8%80%B3%E6%9C%BA

手动编码特殊字符（可选） #

如果需要单独编码参数值，可以使用encodeURIComponent()：

const productName = '无线耳机';
const encodedName = encodeURIComponent(productName);
const url = `yourapp://product/detail?name=${encodedName}`;

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