Solidity学习之应用前端和Web3.js

最新推荐文章于 2026-06-22 09:25:32 发布

原创最新推荐文章于 2026-06-22 09:25:32 发布 · 1k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

区块链专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何在以太坊网络中与智能合约进行交互，包括使用Web3.js设置Provider连接Infura服务，通过Metamask管理以太坊账户，以及调用合约的view和pure函数。在智能合约部署后，通过其地址和ABI，Web3.js能够进行函数调用，同时强调了send方法在涉及区块链数据变更时的角色。

以太坊网络是由节点组成的，每一个节点都包含了区块链的一份拷贝。当你想要调用一份智能合约的一个方法，你需要从其中一个节点中查找并告诉它:

智能合约的地址
你想调用的方法
你想传入那个方法的参数

以太坊节点只能识别一种叫做 JSON-RPC 的语言。

在 Web3.js 里设置 Web3 的 Provider（提供者）告诉我们的代码应该和哪个节点交互来处理我们的读写。

引入web3.js：
可以从 github 直接下载压缩后的 .js 文件然后包含到你的项目文件中：

<script language="javascript" type="text/javascript" src="web3.min.js"></script>

Infura是一个服务，它维护了很多以太坊节点并提供了一个缓存层来实现高速读取。你可以用他们的 API 来免费访问这个服务。用 Infura 作为节点提供者，你可以不用自己运营节点就能很可靠地向以太坊发送、接收信息。

var web3= new Web3(new Web3.providers.WebsocketProvider("wss://mainnet.infura.io/ws"));

Metamask：
是 Chrome 和 Firefox 的浏览器扩展，它能让用户安全地维护他们的以太坊账户和私钥，并用他们的账户和使用 Web3.js 的网站互动。

Web3.js 需要两个东西来和合约对话: 它的地址和它的 ABI。
在部署智能合约以后，它将获得一个以太坊上的永久地址。
ABI 意为应用二进制接口（Application Binary Interface）。基本上，它是以 JSON 格式表示合约的方法，告诉 Web3.js 如何以合同理解的方式格式化函数调用。

web3.js调用合约函数
call调用view和pure：

myContract.methods.myMethod(123).call()

send 将创建一个事务并改变区块链上的数据。你需要用 send 来调用任何非 view 或者 pure 的函数。（send 一个事务将要求用户支付gas，并会要求弹出对话框请求用户使用 Metamask 对事务签名。在我们使用 Metamask 作为我们的 web3 提供者的时候，所有这一切都会在我们调用 send() 的时候自动发生。而我们自己无需在代码中操心这一切）

myContract.methods.myMethod(123).send()

可以通过这样来获取 web3 变量中激活的当前账户：

var userAccount = web3.eth.accounts[0]

检查当前账户是否更换：

var accountInterval = setInterval(function() {
  // 检查账户是否切换
  if (web3.eth.accounts[0] !== userAccount) {
    userAccount = web3.eth.accounts[0];
    // 调用一些方法来更新界面
    updateInterface();
  }
}, 100); //每100毫秒检查一次