如何使用Web3在浏览器中与智能合约进行交互

最新推荐文章于 2025-07-17 10:48:57 发布

P叔

最新推荐文章于 2025-07-17 10:48:57 发布

阅读量4.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：区块链概念以太坊

本文链接：https://blog.youkuaiyun.com/qq_42204339/article/details/80506735

本文介绍了如何利用Web3.js与本地Ganache测试链进行交互，通过Remix IDE创建智能合约，并在浏览器端通过jQuery实现与智能合约的读写操作。详细步骤包括搭建测试链、创建智能合约、安装Web3.js库以及编写前端代码进行交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2018-4-20 技术文章

Web3.js是以太坊官方的Javascript API，可以帮助智能合约开发者使用HTTP或者IPC与本地的或者远程的以太坊节点交互。实际上就是一个库的集合，主要包括下面几个库：

web3-eth用来与以太坊区块链和智能合约交互
web3-shh用来控制whisper协议与p2p通信以及广播
web3-bzz用来与swarm协议交互
web3-utils包含了一些Dapp开发有用的功能

搭建测试链

在开发初期，我们并没有必要使用真实的公链，为了开发效率，一般选择在本地搭建测试链。在本文我们选择的Ganache（在此之前使用的是testrpc，Ganache属于它的升级版），一个图形化测试软件（也有命令行版本），可以一键在本地搭建以太坊区块链测试环境，并且将区块链的状态通过图形界面显示出来，Ganache的运行界面如下图所示。

Ganache

从图中可以看到Ganache会默认创建10个账户，监听地址是http://127.0.0.1:7545，可以实时看到Current Block、Gas Price、Gas Limit等信息。

创建智能合约

目前以太坊官方全力支持的智能合约开发环境是Remix IDE，我们在合约编辑页面编写如下代码：

pragma solidity ^0.4.21;

contract InfoContract {

   string fName;
   uint age;

   function setInfo(string _fName, uint _age) public {
       fName = _fName;
       age = _age;
   }

   function getInfo() public constant returns (string, uint) {
       return (fName, age);
   }   
}