Flutter Telegram Web App集成插件flutter_telegram_web_app的使用

发布于 1周前 作者 htzhanglong 来自 Flutter

Flutter Telegram Web App 集成插件 flutter_telegram_web_app 的使用

概述

该插件允许你在 Flutter 应用中集成 Telegram Web App。你可以通过此插件与 Telegram Bot 进行交互。

flutter_telegram_web_app 版本

开始使用

  1. 在 pubspec.yaml 中引入库

    在你的项目 pubspec.yaml 文件中添加以下依赖项：

    dependencies:
  flutter_telegram_web_app: ^版本号

  2. 在 web/index.html 中添加脚本

    在你的 web/index.html 文件中添加以下内容：

    <head>
    ....
    <script src="https://telegram.org/js/telegram-web-app.js" defer></script>
</head>

功能详情

你可以在 Telegram 官方文档 中查看可用的 telegram_web API 详细信息。

待办事项

目前还没有完整的文档，建议参考 \example 文件夹中的示例代码。

开发设置

  1. 启用调试模式

    在开发或调试时，可以启用 Telegram Web App 的调试模式。具体步骤可参考 这篇帖子。

  2. 运行示例

    导航到 \example 文件夹：

    cd example

    启动 web 服务器：

    flutter run -d web-server --web-port 8000 --web-hostname 0.0.0.0

  3. 暴露本地服务器

    使用 ngrok 或其他工具将你的本地服务器暴露到互联网上。例如：

    ngrok http 8000

    使用生成的 URL 加载 Telegram Web App。

显示用户打开 Web App 的按钮

有两种方法来显示用户打开 Web App 的按钮：

  1. 显示特殊菜单按钮（靠近消息输入框）

    1. 访问 Bot Father
    2. 选择你的机器人
    3. Bot Settings -> Menu Button -> Specify.. / Edit menu button URL
    4. 发送你的 Flutter Web App 的 URL

  2. 发送带有 web_app 字段的按钮

    {
    "text": "测试 Web App",
    "web_app": {
        "url": "FLUTTER_WEB_APP_URL"
    }
}

其他信息

这只是初始版本，欢迎贡献代码或报告任何问题！

示例代码

以下是一个简单的示例代码，展示了如何在 Flutter 应用中集成 Telegram Web App。

import 'package:flutter/material.dart';
import 'package:flutter_telegram_web_app/flutter_telegram_web_app.dart' as tg;
import 'package:flutter_telegram_web_app/flutter_telegram_web_app.dart';
import 'package:flutter_telegram_web_example/home_view.dart';

void main() {
  runApp(const MyApp());
}

// 用于更新主题模式的方法
void updateThemeMode() {
  _notifier.value = tg.isDarkMode ? ThemeMode.dark : ThemeMode.light;
}

// 主题模式的通知器
final ValueNotifier<ThemeMode> _notifier =
    ValueNotifier(tg.isDarkMode ? ThemeMode.dark : ThemeMode.light);

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ValueListenableBuilder<ThemeMode>(
      valueListenable: _notifier,
      builder: (_, mode, __) {
        return MaterialApp(
          title: "Telegram Web JS",
          debugShowCheckedModeBanner: false,
          theme: TelegramTheme.light,
          darkTheme: TelegramTheme.dark,
          themeMode: mode,
          home: const HomeView(),
        );
      },
    );
  }
}

更多关于Flutter Telegram Web App集成插件flutter_telegram_web_app的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter Telegram Web App集成插件flutter_telegram_web_app的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中集成并使用flutter_telegram_web_app插件的示例代码。这个插件允许你在Flutter应用中启动Telegram Web App。首先，你需要确保你的Flutter环境已经设置好，并且你有一个正在运行的Flutter项目。

1. 添加依赖

首先，在你的pubspec.yaml文件中添加flutter_telegram_web_app依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_telegram_web_app: ^最新版本号 # 请替换为最新的版本号

然后运行flutter pub get来安装依赖。

2. 导入插件

在你的Dart文件中导入插件：

import 'package:flutter_telegram_web_app/flutter_telegram_web_app.dart';

3. 使用插件

以下是一个简单的示例，展示如何在按钮点击时启动Telegram Web App：

import 'package:flutter/material.dart';
import 'package:flutter_telegram_web_app/flutter_telegram_web_app.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Telegram Web App Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Telegram Web App Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 启动Telegram Web App
            FlutterTelegramWebApp.launch(
              'https://web.telegram.org/#/im?p=@username', // 替换为你想打开的Telegram链接
              option: FlutterTelegramWebAppOption(
                // 可选的启动配置
              ),
            );
          },
          child: Text('Open Telegram Web App'),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个按钮。当按钮被点击时，FlutterTelegramWebApp.launch方法会被调用，并传入你想要打开的Telegram链接（例如，一个特定的聊天页面）。

注意事项

  1. URL格式：确保你传入的URL是有效的Telegram Web App链接。
  2. 权限：在某些平台上，启动外部应用可能需要额外的权限配置。
  3. 错误处理：在实际应用中，你可能需要添加错误处理逻辑来处理启动失败的情况。

这个示例提供了一个基本的框架，你可以根据自己的需求进行扩展和修改。希望这能帮助你在Flutter项目中成功集成并使用flutter_telegram_web_app插件！

回到顶部