TRON波场DAPP对接(tronWeb+vue)

注：谷歌浏览器需要安装tronlink钱包 https://www.tronlink.org/

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>

    <button @click="linkWallet">
      连接钱包
    </button>
    <button @click="getBalance">
      获取钱包余额
    </button>
    <button @click="transaction">
      TRX转账交易
    </button>
    <button @click="transactionToken">
      TRX-ERC20转账交易
    </button>
    <button @click="transactionContract">
      合约方法调用
    </button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'tron-web-dapp',
      tronWeb:null,
      walletAddress:null
    }

  },
  mounted () {
      if(window.tronWeb){
        this.tronWeb =  window.tronWeb;
        console.log(this.tronWeb)
        this.walletAddress = this.tronWeb.defaultAddress.base58;
      }
  },
  methods: {
    linkWallet(){
      if(window.tronWeb){
        this.tronWeb =  window.tronWeb;
        console.log(window.tronWeb)
        this.walletAddress = this.tronWeb.defaultAddress.base58;
        console.log(this.tronWeb.defaultAddress.base58)
      }
    },
    //查询钱包余额
    async getBalance()  {
        //当前连接的钱包地址获取 window.tronWeb.defaultAddress.base58
        var balance = await this.tronWeb.trx.getBalance(this.walletAddress);
        console.log("balance=",balance)
    },
    //trx转账交易
    async transaction() {
      var tx = await this.tronWeb.transactionBuilder.sendTrx(
        "TN9RRaXkCFtTXRso2GdTZxSxxwufzxLQPP",10 * Math.pow(10,6),this.walletAddress
      );
      var signedTx = await this.tronWeb.trx.sign(tx);
      var broastTx = await this.tronWeb.trx.sendRawTransaction(signedTx);
      console.log(broastTx)
    },
    //trx-token转账交易
    async transactionToken() {

      //转账方式1

     let contract = await this.tronWeb.contract().at("TURwoLuFy7maq1Vea7wVwRNz3HgmcAsJzb");
     let result = await contract.transfer(
        "TN9RRaXkCFtTXRso2GdTZxSxxwufzxLQPP",
        this.tronWeb.toHex(55 * Math.pow(10,18))
      ).send({
        feeLimit: 10000000
      }).then(output => {console.log('- Output:', output, '\n');});
      console.log('result: ', result);

      //转账方式2
      /*const parameter = [{type:'address',value:'TN9RRaXkCFtTXRso2GdTZxSxxwufzxLQPP'},{type:'uint256',value:this.tronWeb.toHex(25 * Math.pow(10,18))}]
      var tx  = await this.tronWeb.transactionBuilder.triggerSmartContract("TURwoLuFy7maq1Vea7wVwRNz3HgmcAsJzb", "transfer(address,uint256)", {},parameter,this.walletAddress);
      var signedTx = await this.tronWeb.trx.sign(tx.transaction);
      var broastTx = await this.tronWeb.trx.sendRawTransaction(signedTx);
      console.log(broastTx)*/

      /*let contract = await this.tronWeb.contract().at("TURwoLuFy7maq1Vea7wVwRNz3HgmcAsJzb");
     let result1 = await contract.decimals().call();
     console.log('result: ', result1);*/
    },
    //调用合约中的方法
    async transactionContract(){

      //调用方式1
      /*let contract = await this.tronWeb.contract().at("TSbJGFA8UyYGTuXBRbYB2GJeh2CY1X5F4d");
      console.log("contract=",contract)
      let result = await contract.registrationExt(
        "TN9RRaXkCFtTXRso2GdTZxSxxwufzxLQPP"
      ).send({
        callValue: this.tronWeb.toHex(25 * Math.pow(10,6)),//发送TRX余额
        feeLimit: 10000000
      }).then(output => {console.log('- Output:', output, '\n');});
      console.log('result: ', result)*/

      //调用方式2
      const parameter = [{type:'address',value:'TN9RRaXkCFtTXRso2GdTZxSxxwufzxLQPP'}];
      var tx  = await this.tronWeb.transactionBuilder.triggerSmartContract(
        "TSbJGFA8UyYGTuXBRbYB2GJeh2CY1X5F4d",
        "registrationExt(address)",
        {},
        parameter,
        this.walletAddress
      );
      var signedTx = await this.tronWeb.trx.sign(tx.transaction);
      var broastTx = await this.tronWeb.trx.sendRawTransaction(signedTx);
      console.log(broastTx)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

唤醒tronlink钱包支付确认

学如逆水行舟，不进则退。心似平原跑马，易放难收。【区块链】【系统/网络/运维】【云计算/大数据】【数据库】【移动开发】【后端开发】【游戏开发】【UI设计】【微服务】【爬虫】【Java】【Go】【C++】【PHP】【Python】【Android/IOS】【HTML/CSS】【JavaScript】【Node】【VUE】【ReactNaive】。。。

欢迎各位大神萌新一起专研分享各行各业技术!

IT全栈工程师技术交流群：593674370

标签：vue,console,log,await,tronWeb,contract,var,TRON
来源： https://blog.csdn.net/qq_16137795/article/details/115214999