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

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

本文将详细介绍如何使用JavaScript与TronLink钱包进行交互，包括连接钱包、查询余额、发送交易等核心功能。所有代码均为原创实现，适合开发者学习集成TronLink到Web应用中。

TronLink钱包简介

TronLink是波场(TRON)区块链上最受欢迎的钱包扩展程序之一，类似于以太坊的MetaMask。它允许用户在浏览器中安全地存储、发送和接收TRX及TRC代币，并与去中心化应用(DApp)交互。

准备工作

在开始编码前，确保：
1.用户已安装TronLink浏览器扩展
2.你的网站使用HTTPS协议(本地开发可以使用localhost)
3.了解基本的JavaScript和异步编程

检测TronLink是否安装

/
检测TronLink是否安装并可用
@returns{Promise<boolean>}返回是否安装的Promise
/
asyncfunctioncheckTronLinkInstalled(){
//检查window.tronWeb对象是否存在
if(window.tronWeb){
returntrue;
}

//如果不存在，等待一段时间再次检查(适用于某些加载延迟情况)
awaitnewPromise(resolve=>setTimeout(resolve,300));

if(window.tronWeb){
returntrue;
}

returnfalse;
}

//使用示例
checkTronLinkInstalled().then(installed=>{
if(installed){
console.log('TronLink已安装');
}else{
console.log('请先安装TronLink钱包扩展');
//可以在这里显示安装引导
}
});

连接TronLink钱包

/
连接TronLink钱包
@returns{Promise<object>}返回连接结果和账户信息
/
asyncfunctionconnectTronLink(){
try{
//检查是否安装
constinstalled=awaitcheckTronLinkInstalled();
if(!installed){
thrownewError('TronLinknotinstalled');
}

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

if(!accounts||accounts.length===0){
thrownewError('Noaccountsfound');
}

//获取当前选择的账户
constcurrentAccount=window.tronWeb.defaultAddress.base58;

return{
success:true,
address:currentAccount,
accounts:accounts
};
}catch(error){
console.error('连接TronLink失败:',error);
return{
success:false,
error:error.message
};
}
}

//使用示例
document.getElementById('connect-btn').addEventListener('click',async()=>{
constresult=awaitconnectTronLink();
if(result.success){
console.log('连接成功，当前地址:',result.address);
//更新UI显示已连接状态
}else{
alert('连接失败:'+result.error);
}
});

查询TRX余额

/
查询当前账户的TRX余额
@param{string}address可选，指定查询的地址，默认使用当前连接地址
@returns{Promise<string>}返回余额字符串(单位:TRX)
/
asyncfunctiongetTRXBalance(address){
try{
if(!window.tronWeb){
thrownewError('TronLinknotconnected');
}

consttargetAddress=address||window.tronWeb.defaultAddress.base58;
constbalance=awaitwindow.tronWeb.trx.getBalance(targetAddress);

//将sun单位转换为TRX
consttrxBalance=window.tronWeb.fromSun(balance);

returntrxBalance;
}catch(error){
console.error('查询余额失败:',error);
throwerror;
}
}

//使用示例
asyncfunctiondisplayBalance(){
try{
constbalance=awaitgetTRXBalance();
document.getElementById('balance-display').textContent=`${balance}TRX`;
}catch(error){
document.getElementById('balance-display').textContent='获取余额失败';
}
}

发送TRX交易

/
发送TRX到指定地址
@param{string}toAddress接收地址
@param{number}amount发送数量(TRX单位)
@param{string}memo可选，交易备注
@returns{Promise<object>}返回交易结果
/
asyncfunctionsendTRX(toAddress,amount,memo=''){
try{
if(!window.tronWeb){
thrownewError('TronLinknotconnected');
}

//验证地址格式
if(!window.tronWeb.isAddress(toAddress)){
thrownewError('Invalidrecipientaddress');
}

//将TRX转换为sun单位
constamountInSun=window.tronWeb.toSun(amount);

//构建交易
consttransaction=awaitwindow.tronWeb.transactionBuilder.sendTrx(
toAddress,
amountInSun,
window.tronWeb.defaultAddress.base58
);

//添加备注(如果有)
if(memo){
transaction.raw_data.data=Buffer.from(memo,'utf8').toString('hex');
}

//签名并广播交易
constsignedTx=awaitwindow.tronWeb.trx.sign(transaction);
constresult=awaitwindow.tronWeb.trx.sendRawTransaction(signedTx);

return{
success:true,
transactionId:result.transaction.txID,
result:result
};
}catch(error){
console.error('发送TRX失败:',error);
return{
success:false,
error:error.message
};
}
}

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

if(!toAddress||isNaN(amount)||amount<=0){
alert('请输入有效的地址和金额');
return;
}

constresult=awaitsendTRX(toAddress,amount,memo);
if(result.success){
alert(`交易成功!TXID:${result.transactionId}`);
//可以在这里更新余额显示
}else{
alert('交易失败:'+result.error);
}
});

查询TRC20代币余额

/
查询TRC20代币余额
@param{string}contractAddress代币合约地址
@param{string}address可选，查询的地址，默认当前连接地址
@returns{Promise<string>}返回代币余额
/
asyncfunctiongetTRC20Balance(contractAddress,address){
try{
if(!window.tronWeb){
thrownewError('TronLinknotconnected');
}

consttargetAddress=address||window.tronWeb.defaultAddress.base58;

//创建合约实例
constcontract=awaitwindow.tronWeb.contract().at(contractAddress);

//调用balanceOf方法
constbalance=awaitcontract.balanceOf(targetAddress).call();

//获取代币精度
constdecimals=awaitcontract.decimals().call();

//计算实际余额
constadjustedBalance=balance/Math.pow(10,decimals);

returnadjustedBalance.toString();
}catch(error){
console.error('查询TRC20余额失败:',error);
throwerror;
}
}

//使用示例:查询USDT(TRC20)余额
asyncfunctiondisplayUSDTBalance(){
try{
//USDT(TRC20)合约地址
constusdtContract='TR7NHqjeKQxGTCi8q8ZY4pL8otSzgjLj6t';
constbalance=awaitgetTRC20Balance(usdtContract);
document.getElementById('usdt-balance').textContent=`${balance}USDT`;
}catch(error){
document.getElementById('usdt-balance').textContent='获取USDT余额失败';
}
}

发送TRC20代币

/
发送TRC20代币
@param{string}contractAddress代币合约地址
@param{string}toAddress接收地址
@param{number}amount发送数量
@returns{Promise<object>}返回交易结果
/
asyncfunctionsendTRC20(contractAddress,toAddress,amount){
try{
if(!window.tronWeb){
thrownewError('TronLinknotconnected');
}

//验证地址格式
if(!window.tronWeb.isAddress(toAddress)){
thrownewError('Invalidrecipientaddress');
}

//创建合约实例
constcontract=awaitwindow.tronWeb.contract().at(contractAddress);

//获取代币精度
constdecimals=awaitcontract.decimals().call();

//计算实际要发送的数量(考虑精度)
constamountInWei=amountMath.pow(10,decimals);

//发送交易
constresult=awaitcontract.transfer(
toAddress,
amountInWei
).send();

return{
success:true,
transactionId:result,
result:result
};
}catch(error){
console.error('发送TRC20代币失败:',error);
return{
success:false,
error:error.message
};
}
}

//使用示例:发送USDT
document.getElementById('send-usdt-btn').addEventListener('click',async()=>{
consttoAddress=document.getElementById('recipient-address').value;
constamount=parseFloat(document.getElementById('send-amount').value);
constusdtContract='TR7NHqjeKQxGTCi8q8ZY4pL8otSzgjLj6t';

if(!toAddress||isNaN(amount)||amount<=0){
alert('请输入有效的地址和金额');
return;
}

constresult=awaitsendTRC20(usdtContract,toAddress,amount);
if(result.success){
alert(`USDT发送成功!TXID:${result.transactionId}`);
}else{
alert('USDT发送失败:'+result.error);
}
});

监听账户变化

/
监听账户变化事件
@param{function}callback当账户变化时调用的回调函数
/
functionwatchAccountChange(callback){
if(!window.tronWeb){
console.warn('TronLinknotavailableforaccountchangewatching');
return;
}

//监听TronLink账户变化
window.addEventListener('message',(event)=>{
if(event.data.message&&event.data.message.action==='accountsChanged'){
constnewAddress=event.data.message.data.address;
callback(newAddress);
}
});
}

//使用示例
watchAccountChange((newAddress)=>{
console.log('账户已切换至:',newAddress);
//更新UI显示新地址
document.getElementById('current-address').textContent=newAddress;
//刷新余额显示
displayBalance();
displayUSDTBalance();
});

完整的HTML集成示例

<!DOCTYPEhtml>
<htmllang="zh-CN">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<metaname="description"content="TronLink钱包交互示例-学习如何使用JavaScript与TronLink钱包集成">
<title>TronLink钱包交互示例</title>
<style>
body{
font-family:Arial,sans-serif;
max-width:800px;
margin:0auto;
padding:20px;
line-height:1.6;
}
.card{
border:1pxsolidddd;
border-radius:8px;
padding:20px;
margin-bottom:20px;
box-shadow:02px4pxrgba(0,0,0,0.1);
}
button{
background-color:2d8cf0;
color:white;
border:none;
padding:10px15px;
border-radius:4px;
cursor:pointer;
font-size:16px;
}
button:hover{
background-color:1e7ae6;
}
input,select{
width:100%;
padding:10px;
margin:8px0;
display:inline-block;
border:1pxsolidccc;
border-radius:4px;
box-sizing:border-box;
}
.balance{
font-size:24px;
font-weight:bold;
margin:15px0;
}
.address{
word-break:break-all;
font-family:monospace;
background-color:f5f5f5;
padding:5px;
border-radius:3px;
}
</style>
</head>
<body>
<h1>TronLink钱包交互示例</h1>

<divclass="card">
<h2>钱包连接</h2>
<buttonid="connect-btn">连接TronLink钱包</button>
<divid="connection-status"style="margin-top:15px;">
未连接
</div>
<divid="current-address"class="address"style="margin-top:10px;display:none;"></div>
</div>

<divclass="card">
<h2>余额查询</h2>
<buttonid="refresh-balance">刷新余额</button>
<divclass="balance">
TRX余额:<spanid="trx-balance">0</span>TRX
</div>
<divclass="balance">
USDT余额:<spanid="usdt-balance">0</span>USDT
</div>
</div>

<divclass="card">
<h2>发送TRX</h2>
<div>
<labelfor="recipient-address">接收地址:</label>
<inputtype="text"id="recipient-address"placeholder="T...">
</div>
<div>
<labelfor="send-amount">金额(TRX):</label>
<inputtype="number"id="send-amount"placeholder="0.0">
</div>
<div>
<labelfor="memo">备注(可选):</label>
<inputtype="text"id="memo"placeholder="备注信息">
</div>
<buttonid="send-btn">发送TRX</button>
</div>

<divclass="card">
<h2>发送USDT(TRC20)</h2>
<div>
<labelfor="usdt-recipient">接收地址:</label>
<inputtype="text"id="usdt-recipient"placeholder="T...">
</div>
<div>
<labelfor="usdt-amount">金额(USDT):</label>
<inputtype="number"id="usdt-amount"placeholder="0.0">
</div>
<buttonid="send-usdt-btn">发送USDT</button>
</div>

<scriptsrc="tronlink-interaction.js"></script>
<script>
//初始化UI交互
document.addEventListener('DOMContentLoaded',()=>{
//连接钱包按钮
document.getElementById('connect-btn').addEventListener('click',async()=>{
constresult=awaitconnectTronLink();
if(result.success){
document.getElementById('connection-status').textContent='已连接';
document.getElementById('current-address').textContent=result.address;
document.getElementById('current-address').style.display='block';
//刷新余额显示
refreshAllBalances();
}else{
alert('连接失败:'+result.error);
}
});

//刷新余额按钮
document.getElementById('refresh-balance').addEventListener('click',refreshAllBalances);

//发送TRX按钮
document.getElementById('send-btn').addEventListener('click',async()=>{
consttoAddress=document.getElementById('recipient-address').value;
constamount=parseFloat(document.getElementById('send-amount').value);
constmemo=document.getElementById('memo').value;

if(!toAddress||isNaN(amount)||amount<=0){
alert('请输入有效的地址和金额');
return;
}

constresult=awaitsendTRX(toAddress,amount,memo);
if(result.success){
alert(`交易成功!TXID:${result.transactionId}`);
//刷新余额
refreshAllBalances();
}else{
alert('交易失败:'+result.error);
}
});

//发送USDT按钮
document.getElementById('send-usdt-btn').addEventListener('click',async()=>{
consttoAddress=document.getElementById('usdt-recipient').value;
constamount=parseFloat(document.getElementById('usdt-amount').value);
constusdtContract='TR7NHqjeKQxGTCi8q8ZY4pL8otSzgjLj6t';

if(!toAddress||isNaN(amount)||amount<=0){
alert('请输入有效的地址和金额');
return;
}

constresult=awaitsendTRC20(usdtContract,toAddress,amount);
if(result.success){
alert(`USDT发送成功!TXID:${result.transactionId}`);
//刷新余额
refreshAllBalances();
}else{
alert('USDT发送失败:'+result.error);
}
});

//监听账户变化
watchAccountChange((newAddress)=>{
console.log('账户已切换至:',newAddress);
document.getElementById('current-address').textContent=newAddress;
refreshAllBalances();
});

//自动检查是否已连接
checkAutoConnect();
});

//刷新所有余额显示
asyncfunctionrefreshAllBalances(){