1.当MetaMask还有web3

这里我们直接在浏览器的console控制台里面输入window,web3就可以看到。

相当于MetaMask在当前环境中定义了web3,在当前的环境也就是window环境,在console控制台中this指针指向的window,window.web3是一个类。

原来我们本可以不需要在前端中引入web3就可以直接用,MetaMask帮我们都考虑好了,但是现在不行了,大人时代变了,哈哈,MetaMask不再提供web3这个变量了,需要我们自己引入。

2.在vue中引入web3

安装web3包
npm install web3 --save

(一)在main.js引入

import Web3 from 'web3'
Vue.prototype.Web3 = Web3
这样我们就可以在任何地方通过this.Web3来引用了

(二)实例化web3,初始化MetaMask
      const _this = this
      this.GLOBAL.web3 = window.web3 = new this.Web3(window.ethereum)
     
      window.ethereum.autoRefreshOnNetworkChange = false
      window.ethereum.on('accountsChanged', () => {
        // console.log('accountsChanged')
        switch (_this.$route.path) {
          case '/':
            this.connectMetaMask()
            break
          default:
        }
      })
      window.ethereum.on('networkChanged', () => {
        // console.log('networkChanged')
        switch (_this.$route.path) {
          case '/':
            this.connectMetaMask()
            break
          default:
        }
      })

MetaMask虽然没有提供web3,但是window.ethereum还是有滴,要不然我们实例化只能在私有链上实例化了,第一行代码就是实例化web3,然后把这个实例赋值给window.web3,就和原来的MeatMask一样一样的了,我还把它在全局变量中保存了一下,不知道为什么就是想保存,谁叫是我写的代码呢。

下面代码就是当账号和网络发生变化时候应该怎么操作,原来MetaMask在网络变化的时候都会自动刷新,现在它会报个warning,说不行不行,自己的事情自己做,鬼知道你想不想让我刷新呢,然后告诉你要用window.ethereum.on()这个方法,后面跟个回调函数。下面就是我写的当账户和网络变化的时候都需要重新连接,但是这个重新连接是在特定页面上的,就是是授权页面上需要重新连接,要是其他二点页面就不用了。

Logo

前往低代码交流专区

更多推荐