使用JavaScript开发TronLink钱包功能的完整指南

使用JavaScript开发TronLink钱包功能的完整指南

前言

TronLink是波场(TRON)区块链上最受欢迎的钱包扩展程序之一，它允许用户在浏览器中与TRON区块链交互。本文将详细介绍如何使用JavaScript开发与TronLink钱包交互的功能，包括连接钱包、查询余额、发送交易等核心功能。

TronLink钱包简介

TronLink钱包是一个浏览器扩展钱包，类似于以太坊的MetaMask，但专门为TRON区块链设计。它为用户提供了安全存储TRX和TRC代币、与dApp交互以及签署交易的能力。

开发前的准备工作

在开始编码前，请确保：

1.用户已安装TronLink钱包扩展
2.你的网站使用HTTPS协议（TronLink要求安全连接）
3.了解基本的JavaScript和区块链概念

检测TronLink是否安装

首先，我们需要检查用户浏览器是否安装了TronLink扩展：

//检测TronLink是否可用
asyncfunctioncheckTronLinkAvailability(){
//等待一段时间确保TronLink注入完成
awaitnewPromise(resolve=>setTimeout(resolve,1000));

if(window.tronWeb&&window.tronWeb.ready){
returntrue;
}else{
console.warn('TronLink未检测到或未准备好');
returnfalse;
}
}

//使用示例
checkTronLinkAvailability().then(available=>{
if(available){
console.log('TronLink已安装并准备好');
}else{
alert('请安装TronLink钱包扩展以继续');
}
});

连接TronLink钱包

与用户的钱包建立连接是dApp的第一步：

//连接TronLink钱包
asyncfunctionconnectTronLink(){
try{
if(!awaitcheckTronLinkAvailability()){
thrownewError('TronLink不可用');
}

//请求账户访问权限
constaccounts=awaitwindow.tronWeb.request({method:'tron_requestAccounts'});

if(accounts&&accounts.length>0){
constaddress=window.tronWeb.address.fromHex(accounts[0]);
console.log('已连接钱包地址:',address);
returnaddress;
}else{
thrownewError('用户拒绝了连接请求');
}
}catch(error){
console.error('连接TronLink失败:',error);
throwerror;
}
}

//使用示例
document.getElementById('connect-btn').addEventListener('click',async()=>{
try{
constaddress=awaitconnectTronLink();
document.getElementById('wallet-address').textContent=address;
}catch(error){
alert(error.message);
}
});

查询账户余额

获取用户的TRX和代币余额：

//获取TRX余额
asyncfunctiongetTRXBalance(address){
try{
if(!address)thrownewError('地址无效');

constbalance=awaitwindow.tronWeb.trx.getBalance(address);
consttrxBalance=window.tronWeb.fromSun(balance);

returntrxBalance;
}catch(error){
console.error('获取TRX余额失败:',error);
throwerror;
}
}

//获取TRC20代币余额
asyncfunctiongetTRC20Balance(tokenContractAddress,address){
try{
if(!tokenContractAddress||!address){
thrownewError('参数无效');
}

constcontract=awaitwindow.tronWeb.contract().at(tokenContractAddress);
constbalance=awaitcontract.balanceOf(address).call();
constdecimals=awaitcontract.decimals().call();

//根据代币的小数位数调整余额显示
constformattedBalance=balance/(10decimals);

returnformattedBalance;
}catch(error){
console.error('获取TRC20余额失败:',error);
throwerror;
}
}

//使用示例
asyncfunctiondisplayBalances(){
try{
constaddress=window.tronWeb.defaultAddress.base58;
consttrxBalance=awaitgetTRXBalance(address);
constusdtBalance=awaitgetTRC20Balance('TR7NHqjeKQxGTCi8q8ZY4pL8otSzgjLj6t',address);

document.getElementById('trx-balance').textContent=trxBalance;
document.getElementById('usdt-balance').textContent=usdtBalance;
}catch(error){
console.error('显示余额失败:',error);
}
}

发送TRX交易

发送TRX到另一个地址：

//发送TRX
asyncfunctionsendTRX(toAddress,amount){
try{
if(!toAddress||!amount||amount<=0){
thrownewError('参数无效');
}

constamountInSun=window.tronWeb.toSun(amount);
consttransaction=awaitwindow.tronWeb.transactionBuilder.sendTrx(
toAddress,
amountInSun,
window.tronWeb.defaultAddress.hex
);

constsignedTx=awaitwindow.tronWeb.trx.sign(transaction);
constresult=awaitwindow.tronWeb.trx.sendRawTransaction(signedTx);

returnresult;
}catch(error){
console.error('发送TRX失败:',error);
throwerror;
}
}

//使用示例
document.getElementById('send-trx-btn').addEventListener('click',async()=>{
consttoAddress=document.getElementById('recipient-address').value;
constamount=parseFloat(document.getElementById('send-amount').value);

try{
constresult=awaitsendTRX(toAddress,amount);
alert(`交易成功!交易ID:${result.txid}`);
}catch(error){
alert(`交易失败:${error.message}`);
}
});

发送TRC20代币交易

发送TRC20代币（如USDT）到另一个地址：

//发送TRC20代币
asyncfunctionsendTRC20(tokenContractAddress,toAddress,amount){
try{
if(!tokenContractAddress||!toAddress||!amount||amount<=0){
thrownewError('参数无效');
}

constcontract=awaitwindow.tronWeb.contract().at(tokenContractAddress);
constdecimals=awaitcontract.decimals().call();
constamountInSmallestUnit=amount(10decimals);

consttransaction=awaitcontract.transfer(
toAddress,
amountInSmallestUnit
).send();

returntransaction;
}catch(error){
console.error('发送TRC20代币失败:',error);
throwerror;
}
}

//使用示例
document.getElementById('send-trc20-btn').addEventListener('click',async()=>{
consttokenContractAddress='TR7NHqjeKQxGTCi8q8ZY4pL8otSzgjLj6t';//USDT合约地址
consttoAddress=document.getElementById('recipient-address').value;
constamount=parseFloat(document.getElementById('send-amount').value);

try{
constresult=awaitsendTRC20(tokenContractAddress,toAddress,amount);
alert(`交易成功!交易ID:${result}`);
}catch(error){
alert(`交易失败:${error.message}`);
}
});

监听账户变化

当用户切换账户时，我们需要更新UI：

//监听账户变化
functionsetupAccountChangeListener(){
window.addEventListener('message',async(event)=>{
//确保消息来自TronLink
if(event.data.message&&event.data.message.action==='accountsChanged'){
constnewAddress=window.tronWeb.defaultAddress.base58;
console.log('账户已变更:',newAddress);

//更新UI显示新地址和余额
document.getElementById('wallet-address').textContent=newAddress;
awaitdisplayBalances();
}
});
}

//初始化时调用
setupAccountChangeListener();

完整的HTML示例

<!DOCTYPEhtml>
<htmllang="zh-CN">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>TronLink钱包交互示例</title>
<metaname="description"content="使用JavaScript与TronLink钱包交互的完整示例">
<style>
body{
font-family:Arial,sans-serif;
max-width:800px;
margin:0auto;
padding:20px;
line-height:1.6;
}
.wallet-info,.transaction-section{
background:f5f5f5;
padding:20px;
border-radius:8px;
margin-bottom:20px;
}
button{
background:1e88e5;
color:white;
border:none;
padding:10px15px;
border-radius:4px;
cursor:pointer;
margin-top:10px;
}
button:hover{
background:1565c0;
}
input{
padding:8px;
width:100%;
margin:5px015px;
border:1pxsolidddd;
border-radius:4px;
}
.balance{
font-size:18px;
font-weight:bold;
margin:10px0;
}
</style>
</head>
<body>
<h1>TronLink钱包交互示例</h1>

<divclass="wallet-info">
<h2>钱包信息</h2>
<buttonid="connect-btn">连接TronLink钱包</button>
<p>钱包地址:<spanid="wallet-address">未连接</span></p>

<h3>余额</h3>
<p>TRX:<spanid="trx-balance"class="balance">0</span></p>
<p>USDT:<spanid="usdt-balance"class="balance">0</span></p>
<buttonid="refresh-balance-btn">刷新余额</button>
</div>

<divclass="transaction-section">
<h2>发送TRX</h2>
<labelfor="recipient-address">接收地址:</label>
<inputtype="text"id="recipient-address"placeholder="输入TRON地址">

<labelfor="send-amount">金额(TRX):</label>
<inputtype="number"id="send-amount"placeholder="输入金额">

<buttonid="send-trx-btn">发送TRX</button>
</div>

<divclass="transaction-section">
<h2>发送USDT(TRC20)</h2>
<labelfor="recipient-address-trc20">接收地址:</label>
<inputtype="text"id="recipient-address-trc20"placeholder="输入TRON地址">

<labelfor="send-amount-trc20">金额(USDT):</label>
<inputtype="number"id="send-amount-trc20"placeholder="输入金额">

<buttonid="send-trc20-btn">发送USDT</button>
</div>

<script>
//这里放置前面所有的JavaScript代码
document.addEventListener('DOMContentLoaded',async()=>{
//检测TronLink是否可用
asyncfunctioncheckTronLinkAvailability(){
awaitnewPromise(resolve=>setTimeout(resolve,1000));
if(window.tronWeb&&window.tronWeb.ready){
returntrue;
}else{
console.warn('TronLink未检测到或未准备好');
returnfalse;
}
}

//连接TronLink钱包
asyncfunctionconnectTronLink(){
try{
if(!awaitcheckTronLinkAvailability()){
thrownewError('TronLink不可用');
}

constaccounts=awaitwindow.tronWeb.request({method:'tron_requestAccounts'});

if(accounts&&accounts.length>0){
constaddress=window.tronWeb.address.fromHex(accounts[0]);
console.log('已连接钱包地址:',address);
returnaddress;
}else{
thrownewError('用户拒绝了连接请求');
}
}catch(error){
console.error('连接TronLink失败:',error);
throwerror;
}
}

//获取TRX余额
asyncfunctiongetTRXBalance(address){
try{
if(!address)thrownewError('地址无效');

constbalance=awaitwindow.tronWeb.trx.getBalance(address);
consttrxBalance=window.tronWeb.fromSun(balance);

returntrxBalance;
}catch(error){
console.error('获取TRX余额失败:',error);
throwerror;
}
}

//获取TRC20代币余额
asyncfunctiongetTRC20Balance(tokenContractAddress,address){
try{
if(!tokenContractAddress||!address){
thrownewError('参数无效');
}

constcontract=awaitwindow.tronWeb.contract().at(tokenContractAddress);
constbalance=awaitcontract.balanceOf(address).call();
constdecimals=awaitcontract.decimals().call();

constformattedBalance=balance/(10decimals);

returnformattedBalance;
}catch(error){
console.error('获取TRC20余额失败:',error);
throwerror;
}
}

//显示余额
asyncfunctiondisplayBalances(){
try{
constaddress=window.tronWeb.defaultAddress.base58;
consttrxBalance=awaitgetTRXBalance(address);
constusdtBalance=awaitgetTRC20Balance('TR7NHqjeKQxGTCi8q8ZY4pL8otSzgjLj6t',address);

document.getElementById('trx-balance').textContent=trxBalance;
document.getElementById('usdt-balance').textContent=usdtBalance;
}catch(error){
console.error('显示余额失败:',error);
}
}

//发送TRX
asyncfunctionsendTRX(toAddress,amount){
try{
if(!toAddress||!amount||amount<=0){
thrownewError('参数无效');
}

constamountInSun=window.tronWeb.toSun(amount);
consttransaction=awaitwindow.tronWeb.transactionBuilder.sendTrx(
toAddress,
amountInSun,
window.tronWeb.defaultAddress.hex
);

constsignedTx=awaitwindow.tronWeb.trx.sign(transaction);
constresult=awaitwindow.tronWeb.trx.sendRawTransaction(signedTx);

returnresult;
}catch(error){
console.error('发送TRX失败:',error);
throwerror;
}
}

//发送TRC20代币
asyncfunctionsendTRC20(tokenContractAddress,toAddress,amount){
try{
if(!tokenContractAddress||!toAddress||!amount||amount<=0){
thrownewError('参数无效');
}

constcontract=awaitwindow.tronWeb.contract().at(tokenContractAddress);
constdecimals=awaitcontract.decimals().call();
constamountInSmallestUnit=amount(10decimals);

consttransaction=awaitcontract.transfer(
toAddress,
amountInSmallestUnit
).send();

returntransaction;
}catch(error){
console.error('发送TRC20代币失败:',error);
throwerror;
}
}

//监听账户变化
functionsetupAccountChangeListener(){
window.addEventListener('message',async(event)=>{
if(event.data.message&&event.data.message.action==='accountsChanged'){
constnewAddress=window.tronWeb.defaultAddress.base58;
console.log('账户已变更:',newAddress);

document.getElementById('wallet-address').textContent=newAddress;
awaitdisplayBalances();
}
});
}

//初始化事件监听
document.getElementById('connect-btn').addEventListener('click',async()=>{
try{
constaddress=awaitconnectTronLink();
document.getElementById('wallet-address').textContent=address;
awaitdisplayBalances();
setupAccountChangeListener();
}catch(error){
alert(error.message);
}
});

document.getElementById('refresh-balance-btn').addEventListener('click',async()=>{
try{
if(window.tronWeb&&window.tronWeb.defaultAddress.base58){
awaitdisplayBalances();
alert('余额已刷新');
}else{
alert('请先连接钱包');
}
}catch(error){
console.error('刷新余额失败:',error);
}
});

document.getElementById('send-trx-btn').addEventListener('click',async()=>{
consttoAddress=document.getElementById('recipient-address').value;
constamount=parseFloat(document.getElementById('send-amount').value);

try{
constresult=awaitsendTRX(toAddress,amount);
alert(`交易成功!交易ID:${result.txid}`);
awaitdisplayBalances();
}catch(error){
alert(`交易失败:${error.message}`);
}
});

document.getElementById('send-trc20-btn').addEventListener('click',async()=>{
consttokenContractAddress='TR7NHqjeKQxGTCi8q8ZY4pL8otSzgjLj6t';
consttoAddress=document.getElementById('recipient-address-trc20').value;
constamount=parseFloat(document.getElementById('send-amount-trc20').value);

try{
constresult=awaitsendTRC20(tokenContractAddress,toAddress,amount);
alert(`交易成功!交易ID:${result}`);
awaitdisplayBalances();
}catch(error){
alert(`交易失败:${error.message}`);
}
});

//页面加载时自动检查TronLink状态
if(awaitcheckTronLinkAvailability()){
constaddress=window.tronWeb.defaultAddress.base58;
if(address){
document.getElementById('wallet-address').textContent=address;
awaitdisplayBalances();
setupAccountChangeListener();
}
}
});
</script>
</body>
</html>

SEO优化建议

1.关键词优化：在标题、描述和内容中包含"TronLink"、"TR