web3.js连接metaMask钱包转账

时间:2021-05-25作者:klpeng分类:IT综合浏览:26583评论:0

一.前言

在以太坊开发过程中,或多或少应该都使用web3框架,他是是一个库集合,你可以使用HTTP或IPC连接本地或远程以太它节点进行交互。 web3的JavaScript库能够与以太坊区块链交互。 它可以检索用户帐户,发送交易,与智能合约交互等。

这里分享下相关文档

1.web3.js中文文档 https://learnblockchain.cn/docs/web3.js/getting-started.html

2.rospten测试网络的区块链浏览器 https://ropsten.etherscan.io/

二.步骤

  1. 先确认自己的浏览器安装了metaMask插件,建议谷歌浏览器web3.js连接metaMask钱包转账

  2. 编写前端代码测试,先引入需要的库,通过npm install web3 引入

  3. import Web3 from "web3";
    const getWeb3 = () =>
      new Promise((resolve, reject) => {
        // Wait for loading completion to avoid race conditions with web3 injection timing.
        window.addEventListener("load", async () => {
          // Modern dapp browsers...
          if (window.ethereum) {
            const web3 = new Web3(window.ethereum);
            try {
              // Request account access if needed
              await window.ethereum.enable();
              // Acccounts now exposed
              resolve(web3);
            } catch (error) {
              reject(error);
            }
          }
          // Legacy dapp browsers...
          else if (window.web3) {
            // Use Mist/MetaMask's provider.
            const web3 = window.web3;
            console.log("Injected web3 detected.");
            resolve(web3);
          }
          // Fallback to localhost; use dev console port by default...
          else {
            const provider = new Web3.providers.HttpProvider(
              "http://127.0.0.1:9545"
            );
            const web3 = new Web3(provider);
            console.log("No web3 instance injected, using Local web3.");
            resolve(web3);
          }
        });
      });
    export default {
    	getWeb3
    };

    上面是一个js方法,根据当前页面来初始化web3对象,在对应页面 通过  const Web3= require('../../common/getWeb3.js') 引入,然后通过下面方法使用

    Web3.default.getWeb3().then(res=>{
    				web3=res
    				console.log('getWeb3',res)
    			})

    web3.js连接metaMask钱包转账web3.js连接metaMask钱包转账web3.js连接metaMask钱包转账

  4. 接着页面会出现如图所示,点击下一步连接就行,最后看到已连接表示成功了。接着我们可以在界面进行转账交易了,这个发送和转出的地址必须是你当前连接的钱包内的账户。转账方法如下

    	transfer(){
    				let value= web3.utils.toWei('1', 'ether')
    				 var message = {from: this.fromAddress, to:this.toAddress, value:value};
    				
    				    web3.eth.sendTransaction(message, (err, res) => {
    				        var output = "";
    				        if (!err) {
    				            output += res;
    							this.txHash=res
    				        } else {
    				            output = "Error"+err;
    				        }
    						
    						console.log('转账:',output)
    				    })
    			},

    web3.js连接metaMask钱包转账web3.js连接metaMask钱包转账

  5. 输入相应地址点击转账后,界面如上图点击确认,就可发送交易了。

  6. 到这里基本就结束了,连接metaMask操作还是很简便的。

打赏
文章版权声明:除非注明,否则均为彭超的博客原创文章,转载或复制请以超链接形式并注明出处。
相关推荐

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

猜你喜欢