1.創(chuàng)建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 = Web3

new Vue({
  render: h => h(App),
}).$mount('#app')

項目結(jié)構(gòu)

頁面代碼中引用web3,倒入ERC20代幣的abi

<template>
  <div>
    <p>{{msg}}</p>
    <button @click="get">連接錢包</button>
    <button @click="getETH">獲取賬戶信息</button>
    <button @click="getTransfer">ETH轉(zhuǎn)帳</button>
    <button @click="getTokenBalance">代幣余額</button>
    <button @click="getTokenTransfer">轉(zhuǎn)賬代幣</button>
    <button @click="getAllowance">查詢授權(quán)金額</button>
    <button @click="getApprove">授權(quán)</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轉(zhuǎn)賬
    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("轉(zhuǎn)賬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)

      }
    },
    //直接轉(zhuǎn)賬充幣地址
    async getTokenTransfer(){
      if(window.web3) {
        let web3 = new Web3(window.web3.currentProvider)
         let ethContract = new web3.eth.Contract(abi.abi,"0x3d2dd604866d0ec1ddd5e8ef27848a6fc0962018") //所有代幣的abi可以通用（abi,合約地址）
        //轉(zhuǎn)賬數(shù)量
        let amount = 100*Math.pow(10,18);//轉(zhuǎn)賬100個
        //小狐貍賬戶
        let fromAddress = await web3.eth.getAccounts()
        //接收地址
        let toAddress = "0xcaD75EADAf24F41d6274E129d7aE54764d7cd8E7";
        ethContract.methods.transfer(toAddress,amount+'').send({ from: fromAddress[0] })
    }

  },
  //查詢授權(quán)金額
    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";//被授權(quán)地址
        let balance = await ethContract.methods.allowance(fromAddress,toAddress).call()
        alert("授權(quán)金額"+balance/Math.pow(10,18))

      }
    },

    //授權(quán)
    async getApprove(){
      if(window.web3) {
        let web3 = new Web3(window.web3.currentProvider)
        let ethContract = new web3.eth.Contract(abi.abi,"0x3d2dd604866d0ec1ddd5e8ef27848a6fc0962018") //所有代幣的abi可以通用（abi,合約地址）
        //授權(quán)數(shù)量
        let amount = 100*Math.pow(10,18);//轉(zhuǎn)賬100個
        let toAddress = "0xcaD75EADAf24F41d6274E129d7aE54764d7cd8E7";//被授權(quán)地址
        //小狐貍賬戶
        let fromAddress = await web3.eth.getAccounts()
        ethContract.methods.approve(toAddress,amount+'').send({ from: fromAddress[0] })
      }
    }
}
}
</script>

<style>

</style>

項目頁面

?

調(diào)用小狐貍metamask演示

?

項目任何難題，可以加入qq群：981921011

?文章來源地址http://www.zghlxwxcb.cn/news/detail-613293.html

?

?

到了這里，關(guān)于前端VUE使用web3調(diào)用小狐貍（metamask）和合約（ERC20）交互的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！