web3.js连接metaMask钱包转账

一.前言

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

这里分享下相关文档

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

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

二.步骤 先确认自己的浏览器安装了metaMask插件，建议谷歌浏览器编写前端代码测试，先引入需要的库,通过npm install web3 引入

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)
			})

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

	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)
				    })
			},

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

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