Web前端JS对接TP钱包完整教程，从连接到链上交互实战

导读： 本教程为Web前端JavaScript对接TP钱包的完整实操指南，覆盖从基础连接到链上交互的全流程，首先讲解前置准备环节，包括引入TP钱包官方SDK、配置目标区块链网络参数；随后详细拆解连接钱包的核心步骤，涵盖用户授权弹窗交互、账户与链信息获取；最后通过转账、合约调用等实战案例，演示链上数据交互逻辑...

本教程为Web前端JavaScript对接TP钱包的完整实操指南，覆盖从基础连接到链上交互的全流程，首先讲解前置准备环节，包括引入TP钱包官方SDK、配置目标区块链网络参数；随后详细拆解连接钱包的核心步骤，涵盖用户授权弹窗交互、账户与链信息获取；最后通过转账、合约调用等实战案例，演示链上数据交互逻辑，并附带异常处理、链切换适配等细节，帮助开发者快速掌握Web3前端钱包对接能力，落地DApp前端交互功能。

近年来,Web3.0生态快速崛起，去中心化应用（DApp）成为区块链落地的重要载体，对于前端开发者而言，对接加密钱包实现链上交互是开发DApp的基础技能之一，TP钱包（TokenPocket）作为全球用户量领先的多链加密钱包，支持通过Web端JavaScript快速完成对接，无需依赖额外的SDK即可实现钱包连接、地址获取、交易发起等核心功能，本文将从实战角度出发，详细讲解如何使用Web.js快速对接TP钱包。

---

前置准备

环境与工具要求

• 本地开发环境：Node.js + npm/yarn，用于安装Web3依赖包
• 测试链环境：建议使用Polygon Mumbai、BSC Testnet等公开测试链，避免主网操作产生真实资产损失
• 钱包环境：电脑端需安装TP钱包浏览器扩展，移动端用户可直接在TP钱包内置的DApp浏览器中访问项目页面，无需额外插件

依赖安装

本文基于Web3.js v4版本编写，该版本对API做了标准化升级，执行以下命令安装依赖：

npm install web3@4.x.x
# 或使用yarn
yarn add web3@4.x.x

---

核心对接流程

TP钱包兼容EIP-1193标准钱包接口，会在网页全局window对象中注入ethereum实例，我们可以通过标准API完成全流程对接。

步骤1：检测TP钱包是否已安装

通过检测全局对象判断用户是否安装TP钱包,同时兼容非TP钱包的EIP标准钱包：

// 检测是否安装了TP钱包
function checkTPWallet() {
  // 优先通过TP钱包专属标识判断，避免误判为其他钱包
  if (window.ethereum && window.ethereum.isTokenPocket) {
    console.log("已检测到TP钱包");
    return true;
  }
  alert("未检测到TP钱包，请先安装TP钱包扩展");
  window.open("https://www.tokenpocket.pro/");
  return false;
}

步骤2：请求钱包连接授权

调用EIP-1193标准的eth_requestAccounts方法，会唤起TP钱包的授权弹窗，用户确认后即可完成钱包连接：

import Web3 from 'web3';
async function connectWallet() {
  if (!checkTPWallet()) return;
  try {
    // 初始化Web3实例，绑定TP钱包注入的ethereum对象
    const web3 = new Web3(window.ethereum);
    // 请求用户授权连接钱包
    const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
    const userAddress = accounts[0];
    console.log("钱包连接成功，用户地址：", userAddress);
    return { web3, userAddress };
  } catch (error) {
    console.error("钱包连接失败：", error.message);
    if (error.code === 4001) {
      alert("用户拒绝了钱包授权");
    }
  }
}

步骤3：获取用户链上资产信息

连接成功后,可以通过Web3.js获取用户的钱包余额、当前链ID等链上信息：

async function getWalletInfo(web3, userAddress) {
  // 获取当前连接的链ID
  const chainId = await web3.eth.getChainId();
  console.log("当前链ID：", chainId);
  // 获取钱包余额（单位：wei），转换为可读格式
  const balanceWei = await web3.eth.getBalance(userAddress);
  const balanceEth = web3.utils.fromWei(balanceWei, 'ether');
  console.log("钱包余额：", balanceEth, "ETH");
  return { chainId, balanceEth };
}

步骤4：发起链上交易

以转账ETH为例,展示如何发起一笔链上交易，流程会自动唤起TP钱包的签名弹窗：

async function sendTransfer(web3, fromAddress, toAddress, amountEth) {
  try {
    // 将ETH金额转换为链上单位wei
    const amountWei = web3.utils.toWei(amountEth, 'ether');
    // 构建交易参数
    const txParams = {
      from: fromAddress,
      to: toAddress,