vue telegram
0.8.0
vue-tg - Vue のテレグラム統合Telegram Mini Apps と Telegram Widgets 機能をシームレスに統合するための軽量パッケージ。
< script lang = " ts " setup >
import { MainButton , useWebAppPopup } from ' vue-tg '
const { showAlert } = useWebAppPopup ()
</ script >
< template >
< MainButton text = " Open alert " @ click = " () => showAlert ( ' Hello! ' ) " />
</ template >パッケージをインストールします:
npm i vue-tgミニ アプリを Telegram クライアントに接続するには、次のコードを使用して、他のスクリプトの前にスクリプトtelegram-web-app.js <head>タグ内に配置します。
< script src =" https://telegram.org/js/telegram-web-app.js " > </ script > | 分野 | コンポーザブル |
|---|---|
| 初期データ | WebApp を使用する |
| initDataUnsafe | WebApp を使用する |
| バージョン | WebApp を使用する |
| プラットフォーム | WebApp を使用する |
| カラースキーム | WebAppテーマを使用する |
| テーマパラメータ | WebAppテーマを使用する |
| 拡張されました | useWebAppViewport |
| ビューポートの高さ | useWebAppViewport |
| ビューポートの安定した高さ | useWebAppViewport |
| ヘッダーの色 | WebAppテーマを使用する |
| 背景色 | WebAppテーマを使用する |
| isClosingconfirmationEnabled | useWebApp終了確認 |
| 垂直スワイプが有効です | useWebAppViewport |
| 戻るボタン | useWebAppBackButton |
| メインボタン | useWebAppMainButton |
| 触覚フィードバック | useWebApp触覚フィードバック |
| 生体認証マネージャー | useWebAppBiometricManager |
| 少なくともバージョンです | WebApp を使用する |
| setHeaderColor | useWebAppTheme |
| 背景色を設定 | WebAppテーマを使用する |
| 有効化終了確認 | useWebApp終了確認 |
| 無効にする終了確認 | useWebApp終了確認 |
| 垂直スワイプを有効にする | useWebAppViewport |
| 垂直スワイプを無効にする | useWebAppViewport |
| イベント時 | WebApp を使用する |
| オフイベント | 自動的に処理されますか? |
| データ送信 | WebApp を使用する |
| switchInlineQuery | useWebAppNavigation |
| オープンリンク | useWebAppNavigation |
| openTelegramLink | useWebAppNavigation |
| 請求書を開く | useWebAppNavigation |
| ストーリーへシェア | WebAppShareを使用する |
| ポップアップを表示 | WebAppPopup を使用する |
| アラートを表示 | WebAppPopup を使用する |
| 表示確認 | WebAppPopup を使用する |
| showScanQrPopup | useWebAppQrScanner |
| 閉じるScanQrポップアップ | useWebAppQrScanner |
| クリップボードからテキストを読む | WebAppクリップボードを使用する |
| requestWriteAccess | useWebAppRequests |
| リクエストお問い合わせ | useWebAppRequests |
| 準備ができて | WebApp を使用する |
| 拡大する | useWebAppViewport |
| 近い | WebApp を使用する |
