JS连接TP钱包实战教程，Web3前端开发入门指南

随着Web3生态的爆发式增长，钱包连接已经成为去中心化应用（DApp）前端开发的核心基础操作之一，TokenPocket（简称TP钱包）作为国内用户基数最大的多链去中心化钱包之一，覆盖EVM、Solana、TRON等数十条公链，本文将详细讲解基于EVM链的JavaScript连接TP钱包的两种主流实现方式，适配纯静态页面与现代前端工程化项目,适合前端开发者快速上手落地。

前置准备

在开始编码前,需要完成以下准备工作：

1. 安装TP钱包：可以从TP钱包官网下载移动端APP或Chrome/Edge浏览器插件版本,建议使用最新版本以获得最佳兼容性。
2. 了解运行环境适配规则：
   • PC端：在TP钱包内置浏览器打开项目可直接获取注入对象，无需额外配置；若使用外部浏览器，需通过WalletConnect协议实现跨端扫码连接,部分浏览器需提前安装TP钱包插件才能识别钱包注入对象。
   • 移动端：直接在手机自带浏览器打开项目页面，会自动唤起TP钱包完成授权；微信内置浏览器存在协议跳转限制，需引导用户点击右上角选择「在外部浏览器打开」后再进行连接。
3. 引入依赖工具：
   • 纯静态HTML项目：通过CDN引入对应库
   • 工程化项目（Vue/React等）：通过npm安装依赖：npm install ethers @walletconnect/qrcode-modal @walletconnect/client
   • 如需简化链上交互，推荐引入ethers.js封装底层Web3操作

TP内置浏览器注入连接（极简开发方案）

TP钱包内置浏览器会自动注入标准的window.ethereum对象，API与MetaMask完全兼容，是开发效率最高的连接方式,仅适用于TP钱包生态内的场景。

完整代码实现

<!-- 引入ethers.js用于链上交互 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ethers.umd.min.js"></script>
<button id="connectBtn" disabled>连接TP钱包</button>
<div id="accountDisplay" style="margin-top:10px;"></div>
<script>
  const connectBtn = document.getElementById('connectBtn');
  const accountDisplay = document.getElementById('accountDisplay');
  // 优化版环境检测：兼容新旧版本TP钱包与多钱包共存场景
  function checkTpWalletEnv() {
    const { ethereum } = window;
    if (!ethereum) return false;
    // 兼容多钱包注入场景
    const hasTpProvider = ethereum.providers?.some(provider => provider.label === 'TokenPocket') 
      || ethereum.provider?.label === 'TokenPocket' 
      || ethereum.isTpWallet;
    return hasTpProvider;
  }
  async function connectTpWallet() {
    connectBtn.textContent = "正在连接中...";
    connectBtn.disabled = true;
    if (!checkTpWalletEnv()) {
      alert('请在TP钱包内置浏览器中打开此页面，或安装TP钱包浏览器插件');
      connectBtn.textContent = "连接TP钱包";
      connectBtn.disabled = false;
      return;
    }
    try {
      // 请求用户授权连接钱包
      const accounts = await window.ethereum.request({ method: "eth_requestAccounts" });
      const currentAccount = accounts[0];
      accountDisplay.textContent = `当前连接账户：${currentAccount.slice(0,6)}...${currentAccount.slice(-4)}`;
      console.log("连接成功，当前账户：", currentAccount);
      // 初始化ethers提供商
      const provider = new ethers.providers.Web3Provider(window.ethereum);
      const signer = provider.getSigner();
      // 获取当前连接的链ID
      const chainId = await window.ethereum.request({ method: "eth_chainId" });
      console.log("当前链ID：", chainId);
      // 监听账户变更，自动更新前端页面
      window.ethereum.on("accountsChanged", (newAccounts) => {
        const newAccount = newAccounts[0] || '';
        accountDisplay.textContent = newAccount ? `当前连接账户：${newAccount.slice(0,6)}...${newAccount.slice(-4)}` : '未连接钱包';
        // 自动更新余额展示
        if(newAccount) getWalletBalance(newAccount, provider);
      });
      // 监听链网络变更
      window.ethereum.on("chainChanged", (newChainId) => {
        console.log("链网络已切换为：", newChainId);
        alert(`检测到链网络切换，当前链ID：${newChainId}`);
        // 可在此处重新加载链上数据
      });
      connectBtn.textContent = "已连接钱包";
    } catch (error) {
      console.error("连接TP钱包失败：", error.message);
      alert(`连接失败：${error.message}`);
      connectBtn.textContent = "连接TP钱包";
      connectBtn.disabled = false;
    }
  }
  // 绑定按钮点击事件
  connectBtn.addEventListener('click', connectTpWallet);
  // 页面加载完成后检测环境，启用按钮
  window.addEventListener('load', () => {
    if(checkTpWalletEnv()) connectBtn.disabled = false;
  })
  // 示例：获取钱包余额（可复用至进阶操作）
  async function getWalletBalance(address, provider) {
    if(!provider) provider = new ethers.providers.Web3Provider(window.ethereum);
    const balance = await provider.getBalance(address);
    const formatBalance = ethers.utils.formatEther(balance);
    console.log("当前账户余额：", formatBalance);
    return formatBalance;
  }
</script>

代码说明

• eth_requestAccounts：遵循EIP-1193标准的授权方法，会唤起钱包授权弹窗获取用户授权的钱包地址,是当前Web3钱包连接的通用标准方法。
• 内置的账户与链网络监听可以自动同步钱包状态,避免前端页面与钱包实际状态不一致的问题。
• 优化了按钮的加载状态与环境自动检测逻辑,适配实际开发中的用户体验需求。

跨浏览器WalletConnect连接（通用兼容方案）

如果在Chrome、Edge等外部浏览器中使用TP钱包，无法直接获取注入对象，可以通过WalletConnect协议实现扫码连接,适配所有支持Web3的浏览器与钱包。

💡 注意：WalletConnect V1已于2023年12月停止服务，以下为适配最新V2版本的代码示例,如需兼容旧版本可参考官方迁移文档。

完整代码实现

<!-- WalletConnect V2依赖 -->
<script src="https://unpkg.com/@walletconnect/[email protected]/dist/index.umd.min.js"></script>
<script src="https://unpkg.com/@walletconnect/[email protected]/dist/index.umd.min.js"></script>
<!-- 引入ethers.js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ethers.umd.min.js"></script>
<button id="wcConnectBtn">扫码连接TP钱包</button>
<div id="wcAccountDisplay" style="margin-top:10px;"></div>
<script>
  const wcConnectBtn = document.getElementById('wcConnectBtn');
  const wcAccountDisplay = document.getElementById('wcAccountDisplay');
  let client;
  async function initWalletConnect() {
    // 初始化WalletConnect客户端
    client = await window.signClient.init({
      projectId: "YOUR_WALLETCONNECT_PROJECT_ID", // 需要在WalletConnect官网申请免费项目ID
      relayUrl: "wss://relay.walletconnect.com",
      metadata: {
        name: "我的测试DApp",
        description: "演示JS连接TP钱包",
        url: window.location.origin,
        icons: ["https://your-dapp-icon-url.png"]
      }
    });
    // 监听连接成功事件
    client.on("session_proposal", async (proposal) => {
      const { uri } = await client.connect({
        pairingTopic: proposal.pairingTopic,
        requiredNamespaces