一.前言
在以太坊开发过程中,或多或少应该都使用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操作还是很简便的。