如何在Flutter中解析URL并提取纯变量数据？

步骤说明 #

这个URL的核心数据在哈希（#）后的查询参数中，其中tgWebAppData内部还嵌套了一层URL编码的参数，user和tgWebAppThemeParams是JSON字符串经过URL编码后的结果。我们可以分步骤解析：

1. 提取URL的哈希部分
   先把URL的哈希部分（#之后的内容）单独提取出来，这部分是类似查询参数的键值对集合。

2. 解析哈希中的顶级键值对
   将哈希内容解析为键值对，得到tgWebAppData、tgWebAppVersion、tgWebAppPlatform、tgWebAppThemeParams这些顶级变量。

3. 解析嵌套的tgWebAppData参数
   tgWebAppData本身是URL编码的查询字符串，需要再次解析为键值对，得到query_id、user、auth_date、hash。

4. 解码并解析JSON格式的字段
   user和tgWebAppThemeParams都是经过URL编码的JSON字符串，需要先解码，再转为Dart对象。

代码实现 #

import 'dart:convert';
import 'dart:core';

void parseTelegramWebAppUrl(String url) {
  // 1. 解析URL，提取哈希部分
  final uri = Uri.parse(url);
  final hashContent = uri.fragment;

  // 2. 解析哈希中的顶级键值对
  final topParams = Uri.splitQueryString(hashContent);

  // 提取顶级变量
  final tgWebAppVersion = topParams['tgWebAppVersion'];
  final tgWebAppPlatform = topParams['tgWebAppPlatform'];
  print('tgWebAppVersion: $tgWebAppVersion');
  print('tgWebAppPlatform: $tgWebAppPlatform');

  // 3. 解析tgWebAppData内部的参数
  final webAppData = topParams['tgWebAppData'];
  if (webAppData != null) {
    final dataParams = Uri.splitQueryString(webAppData);
    final queryId = dataParams['query_id'];
    final authDate = dataParams['auth_date'];
    final hash = dataParams['hash'];
    print('query_id: $queryId');
    print('auth_date: $authDate');
    print('hash: $hash');

    // 4. 解析user字段（URL编码的JSON）
    final userEncoded = dataParams['user'];
    if (userEncoded != null) {
      final userJson = Uri.decodeFull(userEncoded);
      final userMap = jsonDecode(userJson) as Map<String, dynamic>;
      print('User Info:');
      print('  id: ${userMap['id']}');
      print('  first_name: ${userMap['first_name']}');
      print('  username: ${userMap['username']}');
      print('  language_code: ${userMap['language_code']}');
    }
  }

  // 5. 解析tgWebAppThemeParams字段（URL编码的JSON）
  final themeParamsEncoded = topParams['tgWebAppThemeParams'];
  if (themeParamsEncoded != null) {
    final themeJson = Uri.decodeFull(themeParamsEncoded);
    final themeMap = jsonDecode(themeJson) as Map<String, dynamic>;
    print('Theme Params:');
    themeMap.forEach((key, value) {
      print('  $key: $value');
    });
  }
}

// 调用示例
void main() {
  const targetUrl = 'https://example.com/#tgWebAppData=query_id%3DAAGug8ssAAAAAK6DyyyZuqxK%26user%3D%257B%2522id%2522%253A751535022%252C%2522first_name%2522%253A%2522Sergei%2522%252C%2522last_name%2522%253A%2522%2522%252C%2522username%2522%253A%2522svlobachev%2522%252C%2522language_code%2522%253A%2522ru%2522%257D%26auth_date%3D1687500108%26hash%3Db0fc44025378ae5fc6e5b1529aa9265c3b15ee9902ac2cbad84ee651409cfee0&tgWebAppVersion=6.7&tgWebAppPlatform=android&tgWebAppThemeParams=%7B%22bg_color%22%3A%22%23181819%22%2C%22secondary_bg_color%22%3A%22%23000000%22%2C%22text_color%22%3A%22%23ffffff%22%2C%22hint_color%22%3A%22%237d7d7d%22%2C%22link_color%22%3A%22%2357a7e0%22%2C%22button_color%22%3A%22%2350a8eb%22%2C%22button_text_color%22%3A%22%23ffffff%22%7D';
  parseTelegramWebAppUrl(targetUrl);
}

关键说明 #

• 使用Uri.parse()解析URL，通过uri.fragment获取哈希部分内容。
• Uri.splitQueryString()可以直接将URL编码的查询字符串解析为键值对，自动处理%3D（=）、%26（&）这类编码字符。
• 对于嵌套的JSON字符串，先用Uri.decodeFull()解码，再用jsonDecode()转为Dart的Map对象，方便提取具体字段。

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