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/

二.步骤

1. 先确认自己的浏览器安装了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)
   			})

   

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

   

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

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