使用JavaScript开发TRONLink钱包集成指南

使用JavaScript开发TRONLink钱包集成指南

TRONLink是波场(TRON)区块链上最受欢迎的钱包扩展之一，类似于以太坊的MetaMask。本文将详细介绍如何使用JavaScript集成TRONLink钱包到你的Web应用中，包括检测、连接、交易签名等核心功能。

什么是TRONLink钱包？

TRONLink是一个浏览器扩展钱包，允许用户与TRON区块链交互。它提供了安全的密钥存储、交易签名和DApp浏览功能。开发者可以通过简单的JavaScriptAPI与TRONLink交互，为用户提供无缝的区块链体验。

检测TRONLink是否安装

在开始集成前，我们需要检查用户是否安装了TRONLink扩展：

//检测TRONLink是否安装
asyncfunctioncheckTronLinkInstalled(){
//现代方法-直接检查window.tronLink或window.tronWeb
if(window.tronLink||window.tronWeb){
returntrue;
}

//传统方法-检查注入时间
returnnewPromise((resolve)=>{
consttimer=setInterval(()=>{
if(window.tronLink||window.tronWeb){
clearInterval(timer);
resolve(true);
}
},100);

//3秒后超时
setTimeout(()=>{
clearInterval(timer);
resolve(false);
},3000);
});
}

//使用示例
checkTronLinkInstalled().then((installed)=>{
if(installed){
console.log('TRONLink已安装');
}else{
console.log('未检测到TRONLink，请先安装');
//可以在这里显示安装引导
}
});

连接TRONLink钱包

检测到TRONLink后，我们需要请求用户授权连接：

//连接TRONLink钱包
asyncfunctionconnectTronLink(){
try{
//确保TRONLink可用
if(!window.tronWeb){
thrownewError('TRONLink未检测到');
}

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

if(accounts&&accounts.length>0){
console.log('连接成功，当前地址:',accounts[0]);
returnaccounts[0];
}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);
}
});

获取账户信息

连接成功后，我们可以获取更多账户信息：

//获取账户信息
asyncfunctiongetAccountInfo(address){
try{
if(!window.tronWeb){
thrownewError('TRONLink未初始化');
}

//获取账户详细信息
constaccountInfo=awaitwindow.tronWeb.trx.getAccount(address);

//获取账户余额（TRX）
constbalance=awaitwindow.tronWeb.trx.getBalance(address);
consttrxBalance=window.tronWeb.fromSun(balance);

//获取账户资源信息
constaccountResources=awaitwindow.tronWeb.trx.getAccountResources(address);

return{
address,
balance:trxBalance,
...accountInfo,
resources:accountResources
};
}catch(error){
console.error('获取账户信息失败:',error);
throwerror;
}
}

发送TRX交易

发送TRX是最基本的操作：

//发送TRX交易
asyncfunctionsendTrx(toAddress,amount){
try{
if(!window.tronWeb){
thrownewError('TRONLink未初始化');
}

//将TRX转换为Sun（1TRX=1,000,000Sun）
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);

console.log('交易已发送，交易ID:',result.txid);
returnresult;
}catch(error){
console.error('发送TRX失败:',error);
throwerror;
}
}

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

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

与智能合约交互

TRONLink也支持与智能合约交互：

//调用智能合约
asyncfunctioncallContract(contractAddress,functionSelector,parameters=[],options={}){
try{
if(!window.tronWeb){
thrownewError('TRONLink未初始化');
}

//构建合约调用交易
consttransaction=awaitwindow.tronWeb.transactionBuilder.triggerSmartContract(
contractAddress,
functionSelector,
options,
parameters,
window.tronWeb.defaultAddress.hex
);

//签名交易
constsignedTx=awaitwindow.tronWeb.trx.sign(transaction.transaction);

//广播交易
constresult=awaitwindow.tronWeb.trx.sendRawTransaction(signedTx);

console.log('合约调用成功，交易ID:',result.txid);
returnresult;
}catch(error){
console.error('调用合约失败:',error);
throwerror;
}
}

//使用示例-调用一个简单的transfer函数
asyncfunctioncallTokenTransfer(contractAddress,toAddress,amount){
//函数选择器为'transfer(address,uint256)'
constfunctionSelector='transfer(address,uint256)';

//参数编码
constparameters=[
{type:'address',value:toAddress},
{type:'uint256',value:amount}
];

try{
constresult=awaitcallContract(contractAddress,functionSelector,parameters);
returnresult;
}catch(error){
throwerror;
}
}

处理TRONLink事件

TRONLink提供了事件监听功能，可以响应账户变化等事件：

//设置TRONLink事件监听器
functionsetupTronLinkListeners(){
//账户变化事件
window.addEventListener('message',(event)=>{
if(event.data.message&&event.data.message.action==='accountsChanged'){
console.log('检测到账户变更:',event.data.message.data);
//更新UI显示新账户
updateAccountDisplay(event.data.message.data[0]);
}
});

//网络变化事件
window.addEventListener('message',(event)=>{
if(event.data.message&&event.data.message.action==='setNode'){
console.log('检测到网络变更:',event.data.message.data);
//处理网络变更逻辑
handleNetworkChange(event.data.message.data);
}
});
}

//更新账户显示
functionupdateAccountDisplay(address){
document.getElementById('wallet-address').textContent=`已连接:${address}`;
//可以在这里获取并显示新账户的余额等信息
}

//处理网络变更
functionhandleNetworkChange(network){
console.log('当前网络:',network);
//可以根据网络变化更新UI或执行其他逻辑
}

//初始化时设置监听器
window.addEventListener('load',()=>{
setupTronLinkListeners();
});

完整的TRONLink集成示例

下面是一个完整的HTML页面示例，集成了上述所有功能：

<!DOCTYPEhtml>
<htmllang="zh-CN">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<metaname="description"content="TRONLink钱包集成示例-学习如何在你的网站中集成TRON区块链钱包功能">
<metaname="keywords"content="TRONLink,波场钱包,区块链开发,JavaScript,TRON,加密货币">
<title>TRONLink钱包集成示例</title>
<style>
body{
font-family:Arial,sans-serif;
max-width:800px;
margin:0auto;
padding:20px;
line-height:1.6;
}
.container{
background:f9f9f9;
padding:20px;
border-radius:8px;
box-shadow:02px4pxrgba(0,0,0,0.1);
}
button{
background:2b60de;
color:white;
border:none;
padding:10px15px;
border-radius:4px;
cursor:pointer;
margin:5px0;
}
button:hover{
background:1a4fb5;
}
input{
padding:8px;
width:100%;
box-sizing:border-box;
margin:5px015px;
}
.section{
margin-bottom:20px;
padding-bottom:20px;
border-bottom:1pxsolideee;
}
wallet-status{
font-weight:bold;
color:2b60de;
}
</style>
</head>
<body>
<divclass="container">
<h1>TRONLink钱包集成示例</h1>

<divclass="section">
<h2>钱包状态</h2>
<pid="wallet-status">未连接</p>
<buttonid="connect-btn">连接TRONLink钱包</button>
</div>

<divclass="section"id="account-info-section"style="display:none;">
<h2>账户信息</h2>
<pid="account-address"></p>
<pid="account-balance"></p>
<buttonid="refresh-btn">刷新信息</button>
</div>

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

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

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

<divclass="section">
<h2>调用智能合约</h2>
<labelfor="contract-address">合约地址:</label>
<inputtype="text"id="contract-address"placeholder="输入合约地址">

<labelfor="contract-function">函数选择器:</label>
<inputtype="text"id="contract-function"placeholder="例如:transfer(address,uint256)">

<buttonid="call-contract-btn">调用合约</button>
<pid="contract-result"></p>
</div>
</div>

<script>
//检测TRONLink是否安装
asyncfunctioncheckTronLinkInstalled(){
if(window.tronLink||window.tronWeb){
returntrue;
}

returnnewPromise((resolve)=>{
consttimer=setInterval(()=>{
if(window.tronLink||window.tronWeb){
clearInterval(timer);
resolve(true);
}
},100);

setTimeout(()=>{
clearInterval(timer);
resolve(false);
},3000);
});
}

//连接TRONLink钱包
asyncfunctionconnectTronLink(){
try{
if(!window.tronWeb){
thrownewError('TRONLink未检测到');
}

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

if(accounts&&accounts.length>0){
returnaccounts[0];
}else{
thrownewError('用户拒绝了连接请求');
}
}catch(error){
console.error('连接TRONLink失败:',error);
throwerror;
}
}

//获取账户信息
asyncfunctiongetAccountInfo(address){
try{
if(!window.tronWeb){
thrownewError('TRONLink未初始化');
}

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

return{
address,
balance:trxBalance,
...accountInfo
};
}catch(error){
console.error('获取账户信息失败:',error);
throwerror;
}
}

//发送TRX交易
asyncfunctionsendTrx(toAddress,amount){
try{
if(!window.tronWeb){
thrownewError('TRONLink未初始化');
}

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;
}
}

//调用智能合约
asyncfunctioncallContract(contractAddress,functionSelector,parameters=[],options={}){
try{
if(!window.tronWeb){
thrownewError('TRONLink未初始化');
}

consttransaction=awaitwindow.tronWeb.transactionBuilder.triggerSmartContract(
contractAddress,
functionSelector,
options,
parameters,
window.tronWeb.defaultAddress.hex
);

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

returnresult;
}catch(error){
console.error('调用合约失败:',error);
throwerror;
}
}

//更新账户显示
asyncfunctionupdateAccountDisplay(address){
document.getElementById('wallet-status').textContent=`已连接:${address}`;
document.getElementById('account-info-section').style.display='block';

try{
constaccountInfo=awaitgetAccountInfo(address);
document.getElementById('account-address').textContent=`地址:${accountInfo.address}`;
document.getElementById('account-balance').textContent=`余额:${accountInfo.balance}TRX`;
}catch(error){
console.error('更新账户显示失败:',error);
}
}

//设置事件监听器
functionsetupTronLinkListeners(){
window.addEventListener('message',(event)=>{
if(event.data.message&&event.data.message.action==='accountsChanged'){
console.log('检测到账户变更:',event.data.message.data);
updateAccountDisplay(event.data.message.data[0]);
}
});
}

//页面加载时初始化
window.addEventListener('load',async()=>{
setupTronLinkListeners();

constisInstalled=awaitcheckTronLinkInstalled();
if(!isInstalled){
document.getElementById('wallet-status').textContent='未检测到TRONLink，请先安装';
}else{
document.getElementById('wallet-status').textContent='TRONLink已检测到，请点击连接';
}

//连接按钮事件
document.getElementById('connect-btn').addEventListener('click',async()=>{
try{
constaddress=awaitconnectTronLink();
awaitupdateAccountDisplay(address);
}catch(error){
alert(error.message);
}
});

//刷新按钮事件
document.getElementById('refresh-btn').addEventListener('click',async()=>{
if(window.tronWeb&&window.tronWeb.defaultAddress){
awaitupdateAccountDisplay(window.tronWeb.defaultAddress.base58);
}
});

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

if(!toAddress||!amount){
alert('请输入接收地址和金额');
return;
}

try{
constresult=awaitsendTrx(toAddress,amount);
document.getElementById('send-result').textContent=`交易成功!交易ID:${result.txid}`;
}catch(error){
document.getElementById('send-result').textContent=`交易失败:${error.message}`;
}
});

//调用合约按钮事件
document.getElementById('call-contract-btn').addEventListener('click',async()=>{
constcontractAddress=document.getElementById('contract-address').value;
constfunctionSelector=document.getElementById('contract-function').value;

if(!contractAddress||!functionSelector){
alert('请输入合约地址和函数选择器');
return;
}

try{
//这是一个简单示例，实际使用时需要根据具体合约函数调整参数
constresult=awaitcallContract(contractAddress,functionSelector);
document.getElementById('contract-result').textContent=`合约调用成功!交易ID:${result.txid}`;
}catch(error){
document.getElementById('contract-result').textContent=`合约调用失败:${error.message}`;
}
});
});
</script>
</body>
</