TP钱包连接钱包代码，DApp开发中两种场景的实操实现

qbadmin 2026年08月20日 07:00 1.2K 0

围绕TP钱包在DAPP开发中的钱包连接问题，聚焦实操层面，详解两种典型场景下的代码实现方案，梳理TP钱包连接钱包的核心技术逻辑，结合实际开发场景需求，提供可落地的实操指引，助力开发者快速掌握TP钱包与DApp的集成方法，解决开发中钱包连接环节的技术痛点，提升DApp的兼容性与用户接入效率。

TP 钱包作为国内头部去中心化数字钱包,是Web3生态中DApp与用户交互的核心入口。“连接钱包”是实现用户授权、签名交易、合约交互的第一步，掌握两种主流场景下的连接实现，是DApp开发者必备的基础技能，本文从原理到实操，结合最新API规范，帮你快速落地适配。

前置准备（优化版）

开发环境：Node.js（v16+，用于依赖管理）、Chrome/Edge等现代浏览器（开启CORS，本地开发推荐用VS Code Live Server插件）；
工具：最新版TP钱包APP（iOS/Android）、测试链（优先选TP测试链或Sepolia，避免主网Gas费）；
依赖：
- ethers.js v6（简化以太坊交互）；
- @walletconnect/ethereum-provider v2（官方最新WalletConnect协议实现，替代旧版web3-provider）；
核心协议：TP钱包兼容EIP-1193标准（内置浏览器自动注入window.ethereum），外部场景支持WalletConnect v2协议。

TP内置浏览器内连接（原生注入，无扫码）

当用户直接在TP内置浏览器访问DApp时,TP会自动注入符合EIP-1193的window.ethereum对象，无需额外生成二维码，直接调用API即可连接。

完整可运行代码（HTML+JS）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">TP钱包内置浏览器连接示例</title>
  <style>
    .container { max-width: 600px; margin: 50px auto; text-align: center; }
    button { padding: 10px 20px; font-size: 16px; cursor: pointer; }
    .info { margin-top: 20px; line-height: 2; }
  </style>
</head>
<body>
  <div class="container">
    <button id="connectBtn">连接TP钱包</button>
    <div class="info">
      <div id="accountInfo">未连接钱包</div>
      <div id="chainInfo">链ID：未获取</div>
    </div>
  </div>
  <script>
    // 1. 校验TP钱包注入（新增isTokenPocket属性区分其他钱包）
    if (typeof window.ethereum !== 'undefined' && window.ethereum.isTokenPocket) {
      console.log("TP钱包已成功注入");
    } else {
      alert("请使用TP钱包内置浏览器打开此页面，或尝试外部浏览器扫码连接");
      document.getElementById('connectBtn').disabled = true;
    }
    // 2. 连接核心逻辑
    document.getElementById('connectBtn').addEventListener('click', async () => {
      const btn = document.getElementById('connectBtn');
      btn.innerText = "连接中...";
      btn.disabled = true;
      try {
        // 请求用户授权（触发TP钱包弹框）
        const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
        const currentAccount = accounts[0];
        // 获取当前链ID
        const chainId = await window.ethereum.request({ method: 'eth_chainId' });
        // 更新页面状态（地址缩写优化显示）
        document.getElementById('accountInfo').innerText = `已连接账户：${currentAccount.slice(0,6)}...${currentAccount.slice(-4)}`;
        document.getElementById('chainInfo').innerText = `当前链ID：${chainId}`;
        console.log("连接成功：", { account: currentAccount, chainId });
      } catch (error) {
        // 错误码处理（补充常见场景）
        switch(error.code) {
          case 4001: alert("用户拒绝连接钱包"); break;
          case -32002: alert("钱包请求已发起，请在TP钱包中确认"); break;
          default: alert(`连接失败：${error.message}`);
        }
      } finally {
        btn.innerText = "连接TP钱包";
        btn.disabled = false;
      }
    });
    // 3. 监听链/账户切换（无需刷新，直接更新）
    window.ethereum.on('accountsChanged', (accounts) => {
      if (accounts.length === 0) {
        document.getElementById('accountInfo').innerText = "未连接钱包";
      } else {
        const acc = accounts[0];
        document.getElementById('accountInfo').innerText = `已连接账户：${acc.slice(0,6)}...${acc.slice(-4)}`;
      }
    });
    window.ethereum.on('chainChanged', (chainId) => {
      document.getElementById('chainInfo').innerText = `当前链ID：${chainId}`;
      // 可同步更新链相关数据，无需刷新页面
    });
  </script>
</body>
</html>

外部浏览器（Chrome等）连接（扫码适配）

当用户在普通浏览器访问DApp时,无法直接获取TP的window.ethereum对象，需通过WalletConnect v2生成二维码，引导用户用TP钱包扫码连接。

核心代码示例（最新WalletConnect v2）

import { EthereumProvider } from '@walletconnect/ethereum-provider';
import { ethers } from 'ethers';
import QRCode from 'qrcode'; // 用于生成二维码，需安装：npm install qrcode
async function connectTPWalletExternal() {
  // 1. 初始化WalletConnect Provider（v2最新配置）
  const provider = await EthereumProvider.init({
    projectId: '你的WalletConnect项目ID', // 去https://cloud.walletconnect.com/免费申请
    chains: [11155111], // Sepolia测试链，可添加多链
    showQrModal: false, // 自定义二维码展示，如需官方弹窗可设为true
    rpc: {
      11155111: 'https://sepolia.infura.io/v3/你的INFURA项目ID',
      1: 'https://mainnet.infura.io/v3/你的INFURA项目ID'
    }
  });
  try {
    // 2. 启用连接，获取二维码URI
    await provider.connect();
    const uri = provider.uri;
    console.log("扫码连接URI：", uri);
    // 3. 生成二维码展示给用户（示例）
    const qrImg = document.getElementById('qrcode');
    QRCode.toDataURL(uri, (err, url) => {
      if (err) return alert("二维码生成失败");
      qrImg.src = url;
      qrImg.style.display = 'block';
    });
    // 4. 监听连接成功事件
    provider.on('connect', async () => {
      const accounts = await provider.request({ method: 'eth_accounts' });
      const chainId = await provider.request({ method: 'eth_chainId' });
      const ethersProvider = new ethers.BrowserProvider(provider);
      console.log("外部连接成功：", { account: accounts[0], chainId });
      return { account: accounts[0], provider: ethersProvider };
    });
  } catch (error) {
    alert(`外部连接失败：${error.message}`);
  }
}

关键注意事项（实战优化）

安全优先：TP钱包仅授权签名，DApp永远无法获取用户私钥，所有交易必须由钱包处理，禁止硬编码私钥或存储敏感信息；
链兼容性：主动处理链切换，若用户不在目标链，可调用wallet_addEthereumChain添加TP支持的公链（如BSC、Polygon），或提示用户切换；
用户体验：连接按钮需有状态（连接中/已连接），地址显示缩写提升可读性，连接失败需明确提示原因（如未安装TP、网络异常）；
版本适配：TP钱包API随版本更新，需参考官方文档（https://developer.tokenpocket.com/），优先使用最新的EIP-6963多钱包注入规范；
依赖版本：务必使用最新的@walletconnect/ethereum-provider和ethers.js，旧版本会出现连接失败、事件不触发等问题。