在vue中使用web3.js开发以太坊dapp

前端如何使用以太坊智能合约方法

这里讲的是前端与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则成功，反之失败。

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