DApp项目web3开发入门教程（2022年最新）

web3.0时代悄然来临。 如果你想开发一个web3项目，或者以后想从事web3工作，丰富你的web3履历，这篇文章是入门Dapp开发技术的好教程。

本文的主要内容包括：

这篇文章很长，包括20多张图片，一个Hello-World版的web3项目例子，以及完整的项目代码和注释。 如果您现在正在使用手机阅读，建议先收藏本文； 然后打开电脑，按照本文的思路仔细阅读。

1.什么是安全帽？

Hardhat框架（官网）是以太坊Dapp开发的本地集成开发包。 它经常与 Hardhat vs Truffle（官方网站位于）进行比较。 与其他作为web3基础设施的开发工具相比，Hardhat更轻量并且采用了插件化的思想，非常适合作为初学者开发dapp的工具。

Hardhat，一个易于使用的以太坊开发工具包

2.环境准备——安装Node.js

在使用Hardhat进行开发之前，首先需要在本地安装Node环境。

节点下载

这里是官网下载地址（），根据自己操作系统的配置，选择合适的版本下载。

这里需要注意的是，如果电脑上已经安装了，记得升级到node v14及以上版本。 早期版本不支持 Hardhat。

查看是否安装成功，输入：

nodejs安装成功了吗？

我这里是Windows系统，使用PowerShell执行上面的命令，可以看到已经安装成功了。

3.启动第一个web3项目

1.初始化

首先创建一个目录hardhat-demo，进入该目录，执行命令：

这个时候会问你几个问题，一路回车就行了。

使用 Hardhat 初始化 web3 项目

效果就是根据模板创建了一个样例工程。 当出现“Project created”字样时，表示项目创建成功。

可以看到，在上面的截图中，提示我们安装依赖。 为了让这个示例项目运行，需要安装几个依赖模块：

安装后，此目录中的文件应具有以下内容：

Hardhat初始化Dapp项目的目录结构

这样，你就成功完成了第一步。

2.文件在项目中的作用

创建好这个示例工程之后，我们这里来分析一下这些文件的作用。 这部分有点枯燥，大家也可以先看《3.智能合约的编译、部署与测试》这部分，再看看这些文件的功能。

① node_mudules/, package-lock.json 和 package.json

这些都是node项目的必备组件，包括项目配置信息、安装的依赖模块等，这里可以忽略。

② contracts/Greeter.sol

这个文件是项目的重点，被称为智能合约文件。 什么是智能合约？ 你也可以把智能合约理解为一个可以运行的程序。 只是这个程序比较特殊，它运行在以太坊的EVM虚拟机()环境中。 而且，程序本身，程序的输入输出，运行结果，大家都是看得见的。

Solidity语言是智能合约开发的主流语言之一。 Solidity语言的入门教程不​​是本文的重点，这里只是简单提一下。

简单的用Java打个比方：你原本写了一段Java代码，放到一个名为的源文件中，用javac编译，最后通过JVM虚拟机在你的电脑或服务器上执行； 现在你写了一段代码，它也可以编译执行，但是运行环境变成了以太坊的EVM虚拟机。

初始化项目后，自动生成的代码如下所示：

第1行声明License，比如GPL-3.0；

第2行声明编译器版本，指定版本不得低于0.8.0或高于0.9.0；

第 4 行导入其他合同文件。 此处的文件包含在 Hardhat 框架中。 它们是便于调试的合约文件。 源码在这里（）；

从第 6 行开始是合约文件的主要部分。 从结构上看，它非常类似于在C++或Java中定义一个类，包括字段变量、构造方法、读取方法和写入方法。 这里有几个特殊的关键字：

③ 脚本/sample_scripts.js

这个JavaScript文件的作用是将刚才的智能合约编译部署到链上。

每行代码的作用写在注释里。 这里有几点需要注意：

④test/sample_test.js

单元测试对于 web3 开发同样重要。 这个文件是一个单元测试文件，使用这个测试框架：

⑤hardhat.config.js

接下来以太坊智能合约是什么意思，我们将启动HardHat来构建和部署区块链本地环境。 在正式上线之前，需要进行一些配置。 该文件是Hardhat启动时默认读取的配置文件。

正如您在这里看到的，文件的内容可以分为 3 个部分：

在“1.初始化”中，执行后会生成一个默认的配置文件。 一般来说，您可以使用这个默认配置，不需要更改它。

这里有一个问题。 在上面的配置中，同时出现了localhost和hardhat两个网络。 它们有何不同？ 这里先不说了，在“3. 智能合约的编译、部署和测试”。

这样就介绍了项目中各个文件的作用。 可能有点枯燥，立马进入实战。

3. 智能合约的编译、部署和测试

① MetaMask钱包下载、安装和创建新账户

什么是 MetaMask？ 是以太坊生态下的一款钱包，可以管理你的账户，支持多种网络。

MetaMask钱包本质上是一个浏览器插件，这里是它的下载地址（），然后像正常添加其他浏览器插件一样添加。

MetaMask 插件

接下来就可以通过助记词生成一个新的账号了； 您也可以通过粘贴私钥导入您的原始帐户。

MetaMask 钱包导入账户

这样，我们的 MetaMask 钱包就准备好了。

② 在本地网络部署合约

接下来我们要启动一个本地区块链网络节点。

首先打开终端/Powershell 窗口并执行命令：

Hardhat 推出本地区块链网络节点

该命令的意思是根据声明的配置启动本地区块链网络的一个节点。 每次启动时，默认提供20个钱包账户和私钥，每个钱包提供10,000 ETH用于测试。

可以看到Hardhat启动的时候打印出了这20个账户的信息。 为什么要打印账户信息？ 因为这个执行任务定义在； 如果你忘记了，你可以回顾一下。

启动成功，可以再次使用MetaMask钱包验证。

添加一个新的localhost网络，注意chain ID必须和里面的chainId一样，默认是31337。

MetaMask Localhost 本地网络配置

导入一个账户，这里我选择20个自动账户中的第一个，把私钥粘贴进去。

这里注意，这些账户只是为了本地测试，不要在以太坊主网上使用这些账户地址！ 记住！

现在本地网络环境已经准备好了，我们将其部署到本地网络中。

打开另一个终端/PowerShell 并执行：

然后会执行scripts/sample_scripts.js中的main方法，打印出Greeter合约的部署地址。

使用 Hardhat 将智能合约部署到本地区块链网络

同样，在启动本地网络的窗口中，也可以看到刚才部署的合约：

Hardhat 成功部署智能合约

部署合约的时候会执行constructor构造函数，所以执行这句话打印出来。

部署合约需要gas消耗，所以可以看到第一个账户的余额不再是10000 ETH（默认使用第一个账户进行操作）：

MetaMask 查看账户

再次执行，你会发现，虽然是同一个合约代码，但是合约地址变了：

Hardhat 部署相同的智能合约代码

《③scripts/sample_scripts.js》中提到，用Java代码打个比方：这个合约就像一个类，每次部署都像类一样得到一个对象，所以每次部署生成的对象不同，得到的合约地址也不同。

我们进行一些修改以获得 web3 版本的 Hello-World：

至此，我们的Greeter合约已经在本地网络部署成功，我们也成功使用MetaMask钱包连接本地网络并导入测试账户。

③ Hardhat其他常用命令

刚才我们学习了Hardhat框架的2个命令：

在这一部分中，将解释 Hardhat 的其他有用命令。

npx 安全帽测试

此命令用于执行单元测试，在示例中，即运行此文件：

使用 Hardhat 进行 Web3 技术开发：单元测试

这意味着测试成功。 让我们稍微修改一下文件：

再次执行命令，会发现测试失败：

使用Hardhat进行Web3项目开发：单元测试失败

你可能会问：在代码中，也出现了合约的部署语句，那么合约部署在哪里呢？ 是不是又部署到localhost的本地网络了？ \

答案是否定的。

记得在“⑤ hardhat.config.js”部分，有两个非常相似的网络配置：localhost 和 hardhat。 命令执行时会内置一个hardhat网络，合约部署、方法调用等都在hardhat网络上完成，不会部署在localhost网络上。 这一点必须引起注意。

npx 安全帽控制台

启动用于交互式输入和输出的控制台程序。 例如输入config查看配置：

使用Hardhat进行web3开发：启动console控制台

中的代码语句可以替换为在控制台执行：

使用Hardhat进行web3开发：启动console控制台

npx 安全帽编译

在执行部署合约的时候，其实hardhat偷偷替你做了一件事情：编译。

我们删除工件和缓存目录，当前目录结构应该是这样的：

Dapp开发：项目目录结构

现在我们执行命令。 执行成功后，我们会发现刚才删除的artifacts和cache目录都重新生成了。

使用 Hardhat 编写智能合约

所以，这条命令的作用就是编译。 cache 是编译后的缓存文件夹。 artifacts目录下的文件很重要，看一下这个文件：

这个文件有点像，又有点不像。 这就是编译后的源文件的样子。 这个文件很重要以太坊智能合约是什么意思，我们后面会用到。

npx 安全帽清洁

这个命令的作用正好相反，就是清理编译好的文件。

最后，还有一个重要的命令叫，这个命令会展示npx hardhat系列命令的用法：当你忘记的时候，可以用这个命令来查看。

使用 Hardhat 进行区块链项目开发：查看帮助

四。 结论

这就是结语？

是的。 通过本文，您已经掌握了Hardhat开发框架的基本使用； 创建了一个 web3 项目； 编写和修改智能合约； 执行单元测试； 启动并运行本地区块链节点； 成功编译部署合约文件； 安装 MetaMask 钱包，连接到本地网络和测试帐户进行测试。

然而，现在的这个项目，就像我们写的第一个C++ Hello-World控制台程序一样，仍然缺少一个用户友好的前端页面。 如何快速编写一个前端页面？ 如何连接用户钱包？ 如何调用智能合约的方法？ 这些将在下一篇文章中解释。

有不清楚的地方欢迎在评论区留言讨论； 如果觉得这篇文章不错，请点赞、收藏、转发。 感谢您的支持！