前端VUE使用web3调用小狐狸（metamask）和合约（ERC20）交互

1.创建vue项目

2.安装web3

npm install web3

3.项目web3

main.js

import Vue from 'vue'
import App from './App.vue'
import Web3 from 'web3'
Vue.config.productionTip = false
Vue.prototype.Web3 = Web3new Vue({render: h => h(App),
}).$mount('#app')

项目结构

页面代码中引用web3,倒入ERC20代币的abi

<template><div><p>{{msg}}</p><button @click="get">连接钱包</button><button @click="getETH">获取账户信息</button><button @click="getTransfer">ETH转帐</button><button @click="getTokenBalance">代币余额</button><button @click="getTokenTransfer">转账代币</button><button @click="getAllowance">查询授权金额</button><button @click="getApprove">授权</button></div></template><script>
import Web3 from 'web3'
import abi from '../abi/ERC20.json'
export default {name: 'Connect',props: {msg: String},data() {return {};},mounted() {},methods: {getData(){console.log('first')},get() {  // 唤起钱包if (window.ethereum) {window.ethereum.enable().then((res) => {alert("当前钱包地址:" + res[0]);});} else {alert("请安装MetaMask钱包");}},async getETH() {let web3 = new Web3(window.web3.currentProvider)console.log(web3)// console.log(web3.eth.getAccounts())let fromAddress = await web3.eth.getAccounts()console.log(web3.eth.getBalance(fromAddress[0]))console.log(fromAddress)web3.eth.getBalance(fromAddress[0],(err, res) => {if (!err) {alert("ETH余额=="+res/Math.pow(10,18));//console.log(res)}})},//ETH转账async getTransfer(){let web3 = new Web3(window.web3.currentProvider)let fromAddress = await web3.eth.getAccounts()let amount = 0.01*Math.pow(10,18);let toAddress = "0x17D98A1c1D4814B03d71a08a07AF4C8CCABb7E2E";web3.eth.sendTransaction({gas: 21000,gasPrice: 5000000000,from: fromAddress[0],to: toAddress,value: amount}, (err, result) => {console.log("转账Hash=",result)})},//查询代币余额async getTokenBalance(){if(window.web3) {var web3 = web3 = new Web3(window.web3.currentProvider);let fromAddress = "0x394A64e586FC05bD28783351F14dfcc426EFD230";//查询用户地址let ethContract = new web3.eth.Contract(abi.abi,"0x3d2dd604866d0ec1ddd5e8ef27848a6fc0962018") //所有代币的abi可以通用（abi,合约地址）let balance = await ethContract.methods.balanceOf(fromAddress).call()alert(balance)}},//直接转账充币地址async getTokenTransfer(){if(window.web3) {let web3 = new Web3(window.web3.currentProvider)let ethContract = new web3.eth.Contract(abi.abi,"0x3d2dd604866d0ec1ddd5e8ef27848a6fc0962018") //所有代币的abi可以通用（abi,合约地址）//转账数量let amount = 100*Math.pow(10,18);//转账100个//小狐狸账户let fromAddress = await web3.eth.getAccounts()//接收地址let toAddress = "0xcaD75EADAf24F41d6274E129d7aE54764d7cd8E7";ethContract.methods.transfer(toAddress,amount+'').send({ from: fromAddress[0] })}},//查询授权金额async getAllowance(){if(window.web3) {let web3 = new Web3(window.web3.currentProvider)let fromAddress = "0x394A64e586FC05bD28783351F14dfcc426EFD230";//查询地址let ethContract = new web3.eth.Contract(abi.abi,"0x3d2dd604866d0ec1ddd5e8ef27848a6fc0962018") //所有代币的abi可以通用（abi,合约地址）let toAddress = "0xcaD75EADAf24F41d6274E129d7aE54764d7cd8E7";//被授权地址let balance = await ethContract.methods.allowance(fromAddress,toAddress).call()alert("授权金额"+balance/Math.pow(10,18))}},//授权async getApprove(){if(window.web3) {let web3 = new Web3(window.web3.currentProvider)let ethContract = new web3.eth.Contract(abi.abi,"0x3d2dd604866d0ec1ddd5e8ef27848a6fc0962018") //所有代币的abi可以通用（abi,合约地址）//授权数量let amount = 100*Math.pow(10,18);//转账100个let toAddress = "0xcaD75EADAf24F41d6274E129d7aE54764d7cd8E7";//被授权地址//小狐狸账户let fromAddress = await web3.eth.getAccounts()ethContract.methods.approve(toAddress,amount+'').send({ from: fromAddress[0] })}}
}
}
</script><style></style>

项目页面

调用小狐狸metamask演示

项目任何难题，可以加入qq群：981921011

前端VUE使用web3调用小狐狸（metamask）和合约（ERC20）交互相关推荐

前端Vue项目调用页面web3.js:连接metaMask钱包,(查询钱包ETH余额,查询代币余额,ETH转账,代币转账,代币授权,查询授权数量,计算价格)等功能
这里分享下相关文档 1.web3.js中文文档 https://learnblockchain.cn/docs/web3.js/getting-started.html 2.metamask官方文档: ...
从前端Vue/Axios到后端交互--浅谈Vue生命周期、Ajax调用
一.基本需求介绍: 此项目实现了对数据库数据的增删查改,后端使用Spring+MyBatis+SpringMVC,前端使用了Vue+JavaScript+AJAX,前后端实现了异步交互,前端页面可以 ...
EMP微前端-Vue和React项目互相调用
团队原文:https://github.com/efoxTeam/emp/wiki/%E3%80%8AVue%E5%92%8CReact%E9%A1%B9%E7%9B%AE%E5%A6%82%E4%B ...
Web前端笔记-浏览器控制台调用js函数及vue函数
界面是这样的源码如下: index.html <html> <head> </head><body> <h1>Hello World< ...
vue+海康威视web3.2无插件版本使用
vue+海康威视web3.2无插件版本使用: 由于项目要求需要vue结合海康威视云台,于是就开始不停的踩坑之路海康威视的web3.0有插件版本不兼容高版本的浏览器只兼容ie11,巧的是自己的项目不兼 ...
常见的前端vue面试题
常见的前端vue面试题 1.请讲述下VUE的MVVM的理解? MVVM 是 Model-View-ViewModel的缩写,即将数据模型与数据表现层通过数据驱动进行分离,从而只需要关系数据模型的开发, ...
一步步教你前端vue项目开发中如何解决跨域问题
文章目录开发环境中跨域名词解释 1.同源策略: 2.同源: 3.跨域: 4.代理服务器: 解决方式项目背景跨域配置 1.配置说明: A.参数proxy详解: B.pathRewrite详解: ...
html5 轮询自动刷新数据,后台调用exe，前端定时轮询调用结果
前提使用asp.net core 2.1 前端使用vue ui使用element-ui 前端发送请求用Axios 新建asp.net core程序 1.jpg 修改Index.html @{ Lay ...
vue 外部方法调用内部_vue 的进阶之路
当我们使用 Vue 在愉快的开发项目的时候,突然报了一个错误: this is undefined 别担心,不只有你一个人,我也经常遇到这个问题很多次,接下我们一起来看看如何解决这个问题. 一个可能的 ...

前端VUE使用web3调用小狐狸（metamask）和合约（ERC20）交互

前端VUE使用web3调用小狐狸（metamask）和合约（ERC20）交互相关推荐

最新文章

热门文章