前端如何使用以太坊智能合约方法
这里讲的是前端与MetaMask之间的交互
文中涉及到的官方文档
web3.js 1.0中文手册
MetaMask官方文档
web3.js文件
链接：https://pan.baidu.com/s/1_mPT-ZcQ9GU_U1CVhBKpLA
提取码：cbey
#### 一、唤起MetaMask钱包进行登录
创建web3.js文件
```javascript
//web3.js
// 智能合约地址
const contractAddress = '.....'
// 智能合约ABI
const contractABI=[]
var contract=null;
/**
* 初始化
* @param {Object} callback 返回账户地址
*/
function Init(callback){
//判断用户是否安装MetaMask钱包插件
if (typeof window.ethereum === "undefined") {
//没安装MetaMask钱包进行弹框提示
alert("Looks like you need a Dapp browser to get started.");
alert("Consider installing MetaMask!");
} else {
//如果用户安装了MetaMask，你可以要求他们授权应用登录并获取其账号
ethereum.enable()
.catch(function (reason) {
//如果用户拒绝了登录请求
if (reason === "User rejected provider access") {
// 用户拒绝登录后执行语句；
} else {
// 本不该执行到这里，但是真到这里了，说明发生了意外
alert("There was an issue signing you in.");
}
}).then(function (accounts) {
//如果用户同意了登录请求，你就可以拿到用户的账号
var currentProvider = web3.currentProvider;
var Web3 = web3js.getWeb3();
web3 = new Web3();
web3.setProvider(currentProvider);
contract = new web3.eth.Contract(contractABI, contractAddress);
// console.log('地址列表', accounts)
//这里返回用户钱包地址
callback(accounts[0]);
});
}
}
//导出相应的方法
export default {
Init,
}
然后在需要用到的页面引入
import NCWeb3 from "@/web3";
NCWeb3.Init(addr=>{
//得到相应的钱包地址
console.log(addr)
})
二、调用智能合约里面的方法（分为两种，需要油费和不需要的）
不需要油费的比较简单，通过contract.methods.智能合约方法(所需的参数).call()直接调用
// 投资授权
function Approve(addr,value, callback) {
contract.methods
//智能合约方法(所需的参数)
.approve(addr,value)
.call()
.then((res) => {
console.log('投资授权成功', res)
callback(res);
})
.catch((err) => {
alert('投资授权失败，稍后再试：', err)
});
}
//导出相应的方法
export default {
Init,
Approve，
}
需要油费比较麻烦一点,先调用web3.eth.estimateGas()方法估算交易的gas用量。再用web3.eth.getGasPrice()方法获取当前gas价格，最后使用ethereum.sendAsync方法发送以太币、调用智能合约：
// 投资
function join(account, addr,val, callback) {
//要支付的ETH，十六进制
let value = "0x0";
//智能合约的参数也需要进行转换
//web3.utils.padLeft左侧补0补齐到指定长度的字符串
//参数数字转换
val = web3.utils.toHex(val).substring(2);
val = web3.utils.padLeft(val, 64);
//参数地址转换
addr=web3.utils.padLeft(addr, 64).substring(2)
//智能合约方法，获取方式看下面
let fun="0x095ea7b3"
let data = fun + addr + val;
sendTransfer(account, data, value, callback, errorCallBack);
}
/**
* 发送交易
* @param {Object} account 用户地址
* @param {Object} data 数据
* @param {Object} value 转账金额
* @param {Object} callback 返回hash
* @param {Object} errorCallBack 返回的错误
*/
function sendTransfer(account, data, value, callback, errorCallBack) {
// estimateGas获取交易的 gas 用量
const params = {
from: account,
to: contractAddress,
data: data,
value: value,
};
web3.eth.estimateGas(params, function (error1, gaslimit) {
if (error1) {
errorCallBack(error1);
} else {
// gasprice获取当前gas价格
web3.eth.getGasPrice(function (error2, gasPrice) {
if (error2) {
errorCallBack(error2);
} else {
gaslimit -= -10000;
let params = [
{
gasPrice: gasPrice,
gasLimit: gaslimit,
from: account,
to: contractAddress,
data: data,
value: value,
},
];
//ethereum.sendAsync方法发送以太币、调用智能合约：
ethereum.sendAsync(
{
method: "eth_sendTransaction",
params: params,
from: account,
},
function (error, hash) {
if (error) {
// alert(error.message);
errorCallBack(error.message);
} else {
callback(hash);
}
}
);
//监听MetaMask的事件
ethereum.on('accountsChanged', function (accounts) {
console.log(accounts[0])
})
}
});
}
});
}
//导出相应的方法
export default {
Init,
Approve，
join，
}
获取智能合约方法十六进制方式
然后在需要用到的页面引入使用，但需要注意的一点是要等初始化完之后才能调用合约方法
import NCWeb3 from "@/web3";
NCWeb3.Init(addr=>{
//得到相应的钱包地址
console.log(addr)
NCWeb3.Approve(addr,value, res=>{
console.log('Approve方法返回的数据'，res)
})
NCWeb3.join(account, addr,val, res=>{
//由于join方法存在交易，所以这里会返回交易哈希值
console.log('join方法返回的数据'，res)
})
})
需要邮费的方法存在交易，需要链上打包确认，可以通过web3.eth.getTransactionReceipt(‘交易哈希值’)方法进行监听该方法的执行情况。如果交易处于pending状态，则返回null，反之返回一个对象，status属性为true则成功，反之失败。
最后如果看完对你有用，请点击收藏关注，谢谢支持，有问题可以评论留言