Web3区块链前端开发的那些事,2024学一下怎么使用Web3区块连开发吧

大家好，我是梦兽。一个Web全栈开发和Rust爱好者，如果想和我交流Web。关注梦兽编程公众号加入微信，一起探究前沿Web技术。

Web3 是互联网的未来，它带来了去中心化、透明和用户控制的新模式。学习Web3可以让你掌握前沿技术，参与搭建更加安全和公平的网络环境。通过区块链和智能合约，用户不再依赖中介，数据和资产的控制权完全在自己手中。Web3的应用领域广泛，包括去中心化金融（DeFi）、数字身份验证、NFT和去中心化应用（DApps）等。掌握这些技能不仅能提升你的技术水平，还能为你在这个快速发展的领域中创造更多职业机会。现在是学习Web3的最佳时机，抓住未来的无限可能。

今天我要给大家快速上手web3的工作流程。

Web3.js

Web3.js 是一个强大的 JavaScript 库，用于与以太坊区块链进行交互。我们将从安装开始，然后逐步构建一个简单的DApp（去中心化应用）来演示Web3.js的基本用法。

perl 复制代码

mkdir my-web3-app
cd my-web3-app
npm init -y
npm install web3

连接到以太坊网络

我们将使用 Infura 提供的免费节点服务。Infura 是一个提供以太坊和IPFS（星际文件系统）基础设施服务的平台。它为开发者提供了一个简单的API接口，帮助他们轻松地连接和使用以太坊区块链和IPFS网络 $如Ropsten、Kovan、Rinkeby等$ ，而无需运行自己的节点。通过Infura，开发者可以进行各种以太坊相关的操作，例如发送交易、查询区块信息、与智能合约交互等。

首先，你需要在 Infura 注册一个账户并创建一个新的项目来获取你的API密钥。

ini 复制代码

const Web3 = require('web3');

// 使用Infura的Ropsten测试网络
const infuraUrl = 'https://ropsten.infura.io/v3/YOUR_INFURA_PROJECT_ID';
const web3 = new Web3(new Web3.providers.HttpProvider(infuraUrl));

web3.eth.net.isListening()
  .then(() => console.log('成功连接到以太坊网络'))
  .catch(e => console.log('连接失败:', e));

获取账户余额

javascript 复制代码

const address = 'YOUR_ETHEREUM_ADDRESS'; // 需替换为你自己的以太坊地址 Ropsten、Kovan、Rinkeby 这些节点的服务平台地址

web3.eth.getBalance(address, (err, wei) => {
  if (!err) {
    const balance = web3.utils.fromWei(wei, 'ether');
    console.log(`地址 ${address} 的余额为: ${balance} ETH`);
  } else {
    console.log('获取余额时出错:', err);
  }
});

部署和调用智能合约

什么是智能合约调用？

智能合约调用可以理解为与部署在区块链上的合约进行交互，通过调用其公开的方法来执行某些操作。这些操作可以是读取数据（无状态更改的查询）或修改数据（状态更改，如转账、更新记录等）。

在这一部分，我们将展示如何使用Web3.js来部署和调用智能合约。首先，我们需要一个简单的智能合约。我们将使用 Solidity 语言编写一个简单的存储合约。

创建一个名为 SimpleStorage.sol 的文件，并添加以下代码：

csharp 复制代码

// Solidity语言进群一起交流
pragma solidity ^0.5.0;

contract SimpleStorage {
    uint public storedData;

    function set(uint x) public {
        storedData = x;
    }

    function get() public view returns (uint) {
        return storedData;
    }
}

编译智能合约

复制代码

npm install solc

编码编译文件代码

ini 复制代码

const solc = require('solc');
const fs = require('fs');

const source = fs.readFileSync('SimpleStorage.sol', 'utf8');
const input = {
  language: 'Solidity',
  sources: {
    'SimpleStorage.sol': {
      content: source,
    },
  },
  settings: {
    outputSelection: {
      '*': {
        '*': ['*'],
      },
    },
  },
};

const output = JSON.parse(solc.compile(JSON.stringify(input)));
const contract = output.contracts['SimpleStorage.sol'].SimpleStorage;

console.log('ABI:', contract.abi);
console.log('Bytecode:', contract.evm.bytecode.object);

部署智能合约

我们需要一个以太坊账户和一些ETH来支付部署费用。可以使用MetaMask生成账户并获取测试网络上的ETH。

ini 复制代码

const abi = contract.abi;
const bytecode = contract.evm.bytecode.object;

const deployContract = async () => {
  const accounts = await web3.eth.getAccounts();
  const result = await new web3.eth.Contract(abi)
    .deploy({ data: bytecode })
    .send({ from: accounts[0], gas: '1000000' });

  console.log('合约部署成功，地址:', result.options.address);
};

deployContract();

调用智能合约

最后，我们展示如何调用已经部署的智能合约。假设合约已经部署并且我们有合约地址：

javascript 复制代码

const contractAddress = 'YOUR_DEPLOYED_CONTRACT_ADDRESS'; // 需替换为实际的合约地址

const simpleStorage = new web3.eth.Contract(abi, contractAddress);

// 调用合约的get方法
simpleStorage.methods.get().call((err, result) => {
  if (!err) {
    console.log('合约存储的数据:', result);
  } else {
    console.log('调用合约时出错:', err);
  }
});

// 调用合约的set方法
const setData = async (value) => {
  const accounts = await web3.eth.getAccounts();
  await simpleStorage.methods.set(value).send({ from: accounts[0] });
  console.log(`成功设置存储数据为: ${value}`);
};

// 调用存储方法
setData(42);

以上代码展示了如何使用Web3.js连接到以太坊网络、获取账户余额、部署和调用智能合约。你可以根据需要进行调整和扩展。希望这对你有所帮助！

本文使用 markdown.com.cn 排版