TRON Developer Hub CN

TRON开发者中心

欢迎来到TRON开发者中心。您将找到全面的指南和文档,以帮助您尽快开始使用TRON Developer Hub,并在遇到困难时提供支持。让我们跳进去吧!

Get Started    

Tronlink集成

介绍

TronLink,类似于 MetaMask,允许 TRON DApp 在浏览器中运行而不必部署TRON Full Node 。 如果用户已经在 Chrome 扩展程序中安装了TronLink,则 TronLink 会将TronWeb 对象注入每个浏览器页面。 这将允许 web DApp 与 TRON 网络交互。
我们通过一个简单的示例来了解它:

📘

注:

本文demo需要依托开发软件或者http server来通过访问方可以运行。以开发软件WebStorm为例,点击浏览器访问demo页面:

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    </head>
    <body>
    <button onclick="gettronweb()">Can you get tronweb from tronlink?</button>
    <script>
        function gettronweb(){
            if(window.tronWeb && window.tronWeb.defaultAddress.base58){
                document.write("Yes, catch it:",window.tronWeb.defaultAddress.base58)
            }
        }
    </script>
    </body>
</html>

当然,TronWeb还有很多函数等待着你去使用。

签名

在完成交易过程当中,TronWeb需要让TronLink来进行签名,这里TronLink重写了签名,签名过程在TronLink中完成,然后把签名后的transaction返还给TronWeb进行广播。我们通过一个示例来了解它:

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    </head>
    <body>
    <script>
        var obj = setInterval(async ()=>{
            if (window.tronWeb && window.tronWeb.defaultAddress.base58) {
                clearInterval(obj)
                var tronweb = window.tronWeb
                var tx = await tronweb.transactionBuilder.sendTrx('TN9RRaXkCFtTXRso2GdTZxSxxwufzxLQPP', 10, 'TTSFjEG3Lu9WkHdp4JrWYhbGP6K1REqnGQ')
                var signedTx = await tronweb.trx.sign(tx)
                var broastTx = await tronweb.trx.sendRawTransaction(signedTx)
                console.log(broastTx)
            }
        }, 10)
    </script>
    </body>
</html>

当执行代码到 tronweb.trx.sign(tx) 时,TronLink会弹出窗口,来确认签名。

至此,相信您已经能够结合TronLink完成TronWeb的函数调用了。

TronLink事件

TronLink目前支持侧链和主链,开发者可以通过在DAPP中监听TronLink发出的message事件来感知到TronLink当前选择的侧链还是主链, 以及当前选择的是哪个账户。我们通过一个示例来了解它:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<script>
    window.addEventListener('message', function (e) {
        if (e.data.message && e.data.message.action == "tabReply") {
            console.log("tabReply event", e.data.message)
            if (e.data.message.data.data.node.chain == '_'){
                console.log("tronLink currently selects the main chain")
            }else{
                console.log("tronLink currently selects the side chain")
            }
        }

        if (e.data.message && e.data.message.action == "setAccount") {
            console.log("setAccount event", e.data.message)
            console.log("current address:", e.data.message.data.address)

        }
        if (e.data.message && e.data.message.action == "setNode") {
            console.log("setNode event", e.data.message)
            if (e.data.message.data.node.chain == '_'){
                console.log("tronLink currently selects the main chain")
            }else{
                console.log("tronLink currently selects the side chain")
            }

        }
    })
    var obj = setInterval(async ()=>{
        if (window.tronWeb && window.tronWeb.defaultAddress.base58) {
            clearInterval(obj)
            let tronweb = window.tronWeb

        }
    }, 10)

</script>

</body>
</html>

上面代码涉及3个事件分别是tabReply、setAccount 、setNode,下面是这些事件的触发场景如下:

TronLink初始化完成(页面加载后)

tabReply

TronLink中主链和侧链切换:

setAccount、setNode

TronLink中设置节点

setAccount、setNode

  • DAPP页面加载之前,可以通过判断tabReply事件的data.message.data.data.node.chain字段来判断页面加载时,TronLink选择的是侧链还是主链,如果是'_' 表示的是主链,否则就是侧链,同时chain表示的侧链的编号,每一条侧链的编号是唯一的。

  • DAPP页面加载之后,可以通过判断setNode事件的data.message.data.data.node.chain字段来判断用户在TronLink中手动选择的是侧链还是主链,如果是'_' 表示的是主链,否则就是侧链,同时chain表示的侧链的编号,每一条侧链的编号是唯一的。

当选择 MainChain(主链)的时候,返回的消息事件中的node即是所选择的网络。

当选择 DAppChain 的时候,返回的消息事件中的node即是所选择的网络。

📘

实际上在调用过程中,对于主链和侧链而言,按照方法调用即可,因为SunWeb继承Tronweb

当选择 Shasta 测试网的时候,返回的消息事件中的node即是所选择的网络。

Updated 10 months ago

Tronlink集成


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.