在vue中使用波场tronWeb调用智能合约开发DAPP

这篇主要讲前端与波场智能合约交互

开发前的准备工作

开发中需要用的的资料及开发文档可查看下方的链接

开发中主要用到的文档：官方文档api函数

用于查询交易状态：波场浏览器

编译合约网址：TRON-IDE

安装波宝钱包

前往官网，下载波宝：www.tronlink.org 波宝是在谷歌商店下载的，所以需要电脑翻墙或者安装谷歌助手插件 下载完成后，进入波宝钱包。点击创建钱包，设置钱包名称及钱包密码 注意：波宝为去中心化钱包，密码请务必牢记。密码忘记，官方将无法帮助用户找回。 钱包弄好之后就可以进行开发了

一，获取钱包地址

可通过window.tronWeb.defaultAddress.base58获取到钱包地址，不过要注意的一点是初始化的时候defaultAddress对象为空，所以需要过一会获取加个定时器获取地址

this.Inval = setInterval(() => {
     this.defaultAddress = window.tronWeb.defaultAddress.base58?window.tronWeb.defaultAddress.base58 : ''
     //当获取到地址的时候就关掉定时器
     if(this.defaultAddress){
     	window.clearInterval(this.Inval);
     }
  }, 1000);

二，部署智能合约吗，初始化

创建web3.js文件

const contractAddress = '.....'//智能合约地址
const contractABI = []//智能合约abi
var contract = null;
function init(callback) {
	contract = window.tronWeb.contract(contractABI, contractAddress);
	return callback(contract)
}
//导出相对应的方法
export default {
	init,
};

然后在需要用到的页面引入

import NCWeb3 from "@/web3";
NCWeb3.init(res => {
	conlose.log(res)
});

三，调用智能合约方法

智能合约方法有两种，一种用来获取数据；另一种需要调起钱包签名窗口，存在交易

先来看简单的，获取数据 contract.methods.合约方法(参数).call()

// 获取基本信息
function getPlayerBaseInfo(playId, callback) {
	contract.methods.get_player_base_info(playId)
		.call()
		.then((res) => {
			//返回数据
			callback(res);
		})
		.catch((err) => {
			// alert('用户是否出局状态信息，稍后再试：', err)
		});
}
//导出相对应的方法
export default {
	init,
	getPlayerBaseInfo，
};

然后在需要用到的页面引入

import NCWeb3 from "@/web3";
NCWeb3.init(res => {
	NCWeb3.getPlayerBaseInfo（playId,res=>{
		console.log('获取基本信息',res);
	}）
});

另外一种就相对麻烦一点

// 玩家激活参与支付750 USDT
async function join(Ref_address, callback, errorCallBack) {
	const tronWeb = window.tronWeb;
	//查询智能合约是否存在
	let instance = await tronWeb.contract().at(contractAddress);
	//instance["合约方法"](‘参数’)
	let res = await instance["join"](Ref_address);
	//使用send来执行智能合约方法，消耗资源并且还广播到网络。
	//feeLimit	调用合约方法消耗最大数量的SUN。上限是 1000 TRX。(1TRX = 1,000,000SUN)	Integer
    //callValue	本次调用往合约转账的SUN。	Integer
    //shouldPollResponse 如果设置为 TRUE，则会等到在 Solidity 节点上确认事务之后再返回结果。 Boolean
    //tokenId	本次调用往合约中转账TRC10的tokenId。如果没有，不需要设置	String
    //tokenValue	本次调用往合约中转账TRC10的数量，如果不设置tokenId，这项不设置。	Integer
	res.send({
		feeLimit: 100000000,
		callValue: 0,
		shouldPollResponse: true
	}).then( 
		res => { callback(res) },
		err => { errorCallBack(err) }
	);
}
//导出相对应的方法
export default {
	init,
	join，
};

然后在需要用到的页面引入

import NCWeb3 from "@/web3";
NCWeb3.init(res => {
	NCWeb3.join(Ref_address,res=>{
		if(res.status){
			console.log('交易成功',res);},
		}else{
			console.log('交易失败',res);},
		}
	},err=>{console.log('交易失败',err);})
});

如果将shouldPollResponse的值设为false，可以通过tronWeb.trx.getTransaction(‘交易id’)方法来判断交易是否存在，若存在再调用tronWeb.trx.getConfirmedTransaction(‘交易id’)方法获取交易状态。若返回res.ret[0].contractRet === "SUCCESS"。则成功，反之失败。

window.tronWeb.trx.getConfirmedTransaction('交易id').then(res => {
	if (res.ret[0].contractRet === "SUCCESS") {
		let Inva2 = setInterval(() => {
		    window.tronWeb.trx.getConfirmedTransaction('交易id').then(res => {
		        window.clearInterval(Inval2);
		            if (res.ret[0].contractRet === "SUCCESS") {
		              this.$toast('交易成功');
		            } else {
		                this.$toast('交易失败');
		            }
		       }).catch(err => {});
		}, 1000);
	}
})

最后附上波场合约部署

1.导入合约文件 配置文件信息 编译合约文件，生成对应的方法进行测试 生成相对应的方法，点击展开后就可以测试合约方法

如果看完对你有用，请点击收藏关注，谢谢支持，有问题可以评论留言哦