TON DApp 钱包接入全流程：一次配置启用 Lite / App / 扩展端

·

在开发 TON 生态 DApp 时，最简洁的方案是集成 TonConnect 协议。本文将通过 10 分钟上手示例，带你完成 Bitget Wallet、Bitget Wallet Lite（TG Bot 钱包） 与 Bitget Wallet Chrome Extension 的“一站式”整合，让 桌面端、移动端 用户无需切换即可一键连接钱包、签名交易。

关键词已自然融入：TonConnect、TON DApp、钱包连接、交易签名、Bitget Wallet、浏览器扩展、React 开发、TG 钱包、TON 网络、链接协议

1. TonConnect 协议是什么？

TonConnect 是在 TON 网络 中对接钱包与 DApps 的开放协议。它通过 JS Bridge 或 Http Bridge 在两个应用之间建立安全通道，从而完成授权、查询余额、签名交易等操作。

2. 快速上手：三步集成钱包

2.1 安装依赖

npm i @tonconnect/ui react

2.2 创建 TonConnectUI 实例

仅需一次配置，就能将 Bitget Wallet Lite、Bitget Wallet、Chrome 扩展 全部添加到弹窗列表：

import { TonConnectUI, THEME } from "@tonconnect/ui";

const tonConnectUI = new TonConnectUI({
  manifestUrl: "https://app.ston.fi/tonconnect-manifest.json",
  walletsListConfiguration: {
    includeWallets: [
      // TG Bot 钱包
      {
        appName: "bitgetWalletLite",
        name: "Bitget Wallet Lite",
        imageUrl: "https://raw.githubusercontent.com/bitgetwallet/download/main/logo/png/bitget_wallet_lite_logo.png",
        aboutUrl: "https://web3.bitget.com",
        universalLink: "https://t.me/BitgetWallet_TGBot?attach=wallet",
        bridgeUrl: "https://ton-connect-bridge.bgwapi.io/bridge",
        platforms: ["ios", "android", "macos", "windows", "linux"]
      },
      // App 及 Chrome 扩展
      {
        name: "Bitget Wallet",
        appName: "bitgetTonWallet",
        jsBridgeKey: "bitgetTonWallet",
        imageUrl: "https://raw.githubusercontent.com/bitgetwallet/download/main/logo/png/bitget%20wallet_logo_iOS.png",
        aboutUrl: "https://web3.bitget.com",
        bridgeUrl: "https://ton-connect-bridge.bgwapi.io/bridge",
        universalLink: "https://bkcode.vip/ton-connect",
        deepLink: "bitkeep://",
        platforms: ["ios", "android", "chrome"]
      }
    ]
  }
});

👉 立即体验一步到位的 TonConnect 集成示例，轻松上线新功能。

2.3 核心函数速查表

方法名作用
openModal()弹窗展示所有“已声明”的钱包
openSingleWalletModal("walletAppName")直接唤起指定钱包的授权页
sendTransaction(tx)提交交易并等待用户签名
tonConnectUI.account返回当前账户信息
disconnect()断开钱包连接
getWallets()获取当前列表（含 Lite & 扩展）

3. 实战：发交易 + 链上证明

示例：单笔交易 + 链行自定义 payload（用于后端验证）。

const sendTransaction = async () => {
  const tx = {
    validUntil: Math.floor(Date.now() / 1000) + 60,
    messages: [
      {
        address: "EQBBJBB3HagsujBqVfqeDUPJ0kXjgTPLWPFFffuNXNiJL0aA",
        amount: "20000000" // 0.02 TON
      }
    ]
  };
  const result = await tonConnectUI.sendTransaction(tx);
  console.log("交易签名", result);
};

若需要 链上证明，可附带 tonProof：

tonConnectUI.setConnectRequestParameters({
  state: "ready",
  value: { tonProof: "自定义 payload 的 hex" }
});

4. 场景案例

  1. 空投领取页：集成 TG Bot 钱包，确保手机端用户无需下载额外 App，即可一键领取 NFT。
  2. NFT 市场：一键切换 桌面 Chrome 插件 + 移动端 App，跨端无缝签名。
  3. DEX Swap：用户点击 Swap 按钮，自动断开旧钱包连接，再重连指定钱包，减少误操作。

👉 查看更多 TonConnect 真实落地场景与代码片段。

5. FAQ：开发者最常问的问题

Q1：为什么我切换 manifest.json 后，某些钱包不显示？
A：检查 manifestUrl 是否公网可访问，且声明的 platforms 包含用户当前设备。

Q2：如何调试 tonProof 校验失败？
A：先在浏览器控制台 console.log(wallet.connectItems.tonProof)，再用服务端官方 SDK 校验签名算法。

Q3：支持哪些前端框架？
A：Vue/React/原生 JavaScript 均可，核心库为 @tonconnect/ui，与框架无关。

Q4：可以强制只连接 TG Bot 钱包吗？
A：可只保留 bitgetWalletLite 的声明，其余钱包移出 includeWallets 列表即可。

Q5：钱包断开连接后，为何还能在前端看见缓存地址？
A：请手动清空 localStorage.removeItem('tonProof') 并调用 disconnect()，确保完全清除。

Q6：发送多笔交易时，有哪些注意事项？
A：所有 messages 需一次性构建；交易成功返回的 boc 字符串，应上传到链上或转发给对应节点确认。

6. 上线 checklist

全部勾选后，你的 TON DApp 就能面向全球用户开放钱包连接功能，日活提升轻松可见。