Web3.js在以太坊上部署和调用智能合约_web3调用我们在区块链上部署的合约

作者：Gausst松鼠会 | 2024-05-05 04:55:26

踩

web3调用我们在区块链上部署的合约

Web3.js在以太坊上部署和调用智能合约

介绍如何使用Web3.js在以太坊上部署和调用智能合约；Web3.js是以太坊JavaScript API的实现，它可以与以太坊区块链进行交互

智能合约编写

使用Solidity编写一个简单的智能合约，然后使用Web3.js将其部署到以太坊区块链，通过JavaScript调用该智能合约
solidityCopy codepragma solidity ^0.8.0;

contract SimpleStorage {
    uint256 private _value;

    function getValue() public view returns (uint256) {
        return _value;
    }

    function setValue(uint256 value) public {
        _value = value;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
这个智能合约非常简单。它有两个函数：getValue和setValue。getValue函数返回私有变量_value的值，setValue函数将_value设置为传入的值

接下来，我们将使用Truffle框架来编译、测试和部署智能合约。如果您没有安装Truffle，请在命令行中输入以下命令安装：
Copy code
npm install -g truffle
1
2
命令行中创建一个新目录，并在该目录中运行以下命令，创建一个Truffle项目：
csharpCopy code
truffle init
1
2
将上面的Solidity代码复制到contracts/SimpleStorage.sol文件中。接下来，我们需要在migrations目录中创建一个JavaScript文件，用于将合约部署到以太坊网络中：
javascriptCopy codeconst SimpleStorage = artifacts.require("SimpleStorage");

module.exports = function(deployer) {
  deployer.deploy(SimpleStorage);
};
1
2
3
4
5
可以在命令行中使用以下命令来编译和部署合约：
pythonCopy codetruffle compile
truffle migrate
1
2
已经将智能合约部署到以太坊网络中。接下来，我们将使用Web3.js来与该合约进行交互。我们将在HTML文件中使用Web3.js，因此需要在HTML文件中引入Web3.js库：
htmlCopy code<!DOCTYPE html>
<html>
<head>
  <title>Web3.js Demo</title>
  <script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js/dist/web3.min.js"></script>
</head>
<body>
  <h1>Web3.js Demo</h1>
  <div>
    <label for="value-input">Enter a value:</label>
    <input type="number" id="value-input">
    <button onclick="setValue()">Set Value</button>
  </div>
  <div>
    <label for="value-output">Current value:</label>
    <span id="value-output"></span>
    <button onclick="getValue()">Get Value</button>
  </div>
  <script src="app.js"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
JavaScript代码来与智能合约交互。在项目的根目录中创建一个名为app.js的文件，并将以下代码复制到文件中：
javascriptCopy codeconst contractAddress = "0x1234567890123456789012345678901234567890"; // 智能合约地址
const abi = [
  {
    "inputs": [],
    "name": "getValue",
    "outputs": [
      {
        "internalType": "uint256",
        "name": "",
        "type": "uint256"
      }
    ],
    "stateMutability": "view",
    "type": "function"
  },
  {
    "inputs": [
      {
        "internalType": "uint256",
        "name": "value",
        "type": "uint256"
      }
    ],
    "name": "setValue",
    "outputs": [],
    "stateMutability": "nonpayable",
    "type": "function"
  }
]; // 合约ABI

const web3 = new Web3(Web3.givenProvider || "http://localhost:8545"); // 初始化Web3实例

const simpleStorageContract = new web3.eth.Contract(abi, contractAddress); // 创建智能合约实例

async function setValue() {
  const value = document.getElementById("value-input").value;
  const accounts = await web3.eth.getAccounts();
  await simpleStorageContract.methods.setValue(value).send({ from: accounts[0] });
}

async function getValue() {
  const value = await simpleStorageContract.methods.getValue().call();
  document.getElementById("value-output").textContent = value;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
首先定义了智能合约的地址和ABI，然后使用Web3.js创建一个新的Web3实例，并使用该实例创建了一个新的智能合约实例。接下来，我们定义了两个函数：setValue和getValue、setValue函数将输入框中的值设置为智能合约中的值，getValue函数获取智能合约中的值并将其显示在页面上；可以在命令行中启动本地Web服务器，并在浏览器中打开HTML文件。当我们设置或获取智能合约中的值时，页面将使用Web3.js与智能合约进行交互，并将结果显示在页面上；这就是如何使用Web3.js在以太坊上部署和调用智能合约的简单示例。您可以使用类似的步骤来开发更复杂的智能合约，并使用Web3.js与其进行交互

钱包集成

Web3技术可以让您的应用程序与以太坊钱包集成，这使得您可以让用户在应用程序中使用他们的以太坊钱包进行交易。使用Web3.js库，您可以轻松地将钱包功能集成到您的应用程序中

演示如何在应用程序中与以太坊钱包进行交互：
javascriptCopy codeif (typeof window.ethereum !== 'undefined') {
  console.log('MetaMask is installed!');
}
1
2
3
上面的代码将检查浏览器中是否安装了MetaMask钱包。如果已经安装，则应用程序可以通过window.ethereum对象与钱包进行交互；一旦您与以太坊钱包建立了连接，您可以使用Web3.js库中的web3.eth对象来发送以太币和交互智能合约

去中心化应用程序（DApp）开发

Web3技术也可以用于开发去中心化应用程序（DApp），这是一种基于区块链技术的应用程序，它不依赖于中央服务器，而是通过区块链网络来存储和处理数据；开发DApp需要了解Solidity编程语言、以太坊虚拟机（EVM）和智能合约的开发。除此之外，您还需要了解Web3.js库和以太坊生态系统中的其他工具和库。

演示如何使用Web3.js库与智能合约进行交互：
javascriptCopy codeconst contractAddress = "0x1234567890123456789012345678901234567890"; // 智能合约地址
const abi = [ ... ]; // 合约ABI

const web3 = new Web3(Web3.givenProvider || "http://localhost:8545"); // 初始化Web3实例

const simpleStorageContract = new web3.eth.Contract(abi, contractAddress); // 创建智能合约实例

async function setValue() {
  const value = document.getElementById("value-input").value;
  const accounts = await web3.eth.getAccounts();
  await simpleStorageContract.methods.setValue(value).send({ from: accounts[0] });
}

async function getValue() {
  const value = await simpleStorageContract.methods.getValue().call();
  document.getElementById("value-output").textContent = value;
}

document.getElementById("set-value-button").addEventListener("click", setValue);
document.getElementById("get-value-button").addEventListener("click", getValue);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/537298