让我们为智能合约构建一个 Web 前端！这是我之前关于使用 Solidity 和 Hardhat 创建简单智能合约的文章的后续内容。这里的说明假设您正在使用我们刚刚部署到 Hardhat 环境的相同合约。
在上一篇文章中，我们创建并测试了一个合约，该合约将增加存储在状态变量中的计数器。使用 Hardhat 控制台，我们调用了incrementCount() 和getCount() 函数。在现实世界中，与合约的交互不会通过开发控制台进行。创建调用这些函数的应用程序的一种方法是通过网页中的 Javascript（通过 ethers.js 库） - Web3 应用程序！
如上一篇文章所述，与 web3 应用程序交互需要具有内置钱包的浏览器。在这个简单的示例中，我们将使用 Metamask。 Metmask 已针对 Etherium 以及其他一些基于 EVM 的区块链进行了预配置，但不是我们在 Hardhat 环境中的模拟区块链。为了让这一切运行起来，我们将首先设置 Metmask，然后创建调用我们的合约所需的 HTML/Javascript。
安装 Metamask。我将使用此处找到的 Chrome 扩展程序。如果您是 Chrome 用户，现在您可以查看 web3 内容并与之交互。
我不会引导您完成初始设置，但系统可能会提示您导入现有私钥或生成新私钥并记下恢复短语。就这么做吧。
接下来我们将把 Hardhat 网络添加到 Metamask。 Metamask 支持您想要的任何 EVM，但需要对其进行配置才能实现。通常这只是添加链 ID 和 RPC URL 的问题。从 Metamask 内部（您可能需要通过单击 Chrome 插件并选择它来启动它），您应该在顶部中间看到您的公共地址。在您的地址左侧将有一个下拉列表，显示当前网络。单击该按钮查看其他可用网络：
点击“添加自定义网络”。填写网络名称，例如“Hardhat”，网络 RPC URL 以及 Hardhat 节点的 IP 地址和端口，如果您在本地运行，可能是这样的：
http://127.0.0.1:8545/
输入链ID 1337，符号暂时只能是ETH。请注意，我们不在真实的以太坊网络上处理真实的 ETH，但如果您的钱包中有真实的 ETH，请务必小心留在我们的 Hardhat 网络上。
现在切换到我们刚刚在 Metamask 插件中添加的 Hardhat 网络。在监控正在运行的 Hardhat 节点的终端中，您应该会在钱包连接时看到一些活动。
由于您的 Metamask 钱包当前没有任何（假）ETH，所以我们发送一些。从 Metamask 获取您的公共地址（在 Metamask 窗口顶部的钱包名称下方，单击复制按钮）。从运行 Hardhat 控制台的终端窗口，执行：
const [owner, feeCollector, operator] = await
ethers.getSigners();
await owner.sendTransaction({ to: "PasteYourMetamaskAddressHere", value: ethers.parseEther("0.1") });
如果您返回 Metamask，您应该会看到您的 Hardhat 钱包中现在有一些 ETH！现在我们准备在 Hardhat 网络上进行一些 web3 交易。
让我们创建一个简单的网页来查看和增加计数器。我不会使用任何重型框架，而只是使用普通的旧式 HTML、Javascript 和 ethers.js 库。但是，您不能仅将浏览器指向 .htm 文档，您需要在某处运行网络服务器才能使 Metamask 插件正常工作。根据您的操作系统，您也许可以使用轻量级服务器，例如 http-server 或本地的其他服务器。
我们需要上一篇文章中部署合约时的一些东西。请参阅上一篇文章，并从工件目录中获取 合约地址 和合约的 ABI JSON 数组。我们不需要该文件中的其余 JSON，只需要“abi”属性中的内容，它应该以 [ 开头，以 ] 结尾，并且看起来像一些东西像这样：
[
{
"inputs": [],
"stateMutability": "nonpayable",
"type": "constructor"
},
{
"inputs": [],
"name": "getCount",
"outputs": [
{
"internalType": "uint256",
"name": "",
"type": "uint256"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [],
"name": "incrementCount",
"outputs": [],
"stateMutability": "nonpayable",
"type": "function"
}
]
让我们将其放入一些 HTML 和 Javascript 中：
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ethers/5.2.0/ethers.umd.min.js" type="application/javascript"></script>
</head>
<body>
<h2>The counter is at: <span>
</li>
<li>
<p>We should now be able to view our HTML document in a web browser with the Metamask plugin installed. I won't go through the Javascript, but if you are familiar with JavaScript and following the concepts and what we did in the Hardhat terminal previously, what is happening in the code should be fairly straight-forward. Metamask should prompt you that you are connecting to the site and you'll need to select the Hardnet network that we set up earlier. You should see something like this in the browser:</p>
<p><img src="https://img.php.cn/upload/article/000/000/000/173282167151033.jpg" alt="WebI For Simple Smart Contract" /></p>
</li>
<li><p>If all went well, you can click on the "Increment" button. Metamask will let you know that you are about to make a transaction and inform you of the gas fee. You can Confirm this transaction in Metamask and see the count increment on both the website and in the terminal where you have the hardhat node running!</p></li>
<li><p>Congratulations, we are interacting with our contract through a web UI!</p></li>
</ol>
<p>A few notes as you dive deeper into Hardhat and Metamask for development:</p>
<ul>
<li><p>Each transaction has an nonce. When you reset your hardhat node, that nonce gets reset and you might loose sync with what Metamask thinks is a unique nonce. When that happens, Metmask has an option to set a custom nonce with the transaction, or you can reset Metamask's nonces in Settings->Advanced->Clear Activity Tab data. You'll need to redeploy your smart contract every time you restart your Hardhat node.
If you are writing contracts that will keep track of users by their public address and want to experiment in the Hardhat console with transactions form different users, you can impersonate different addresses in the console that were displayed when you first started the Hardhat node with something like this before you connect to the contract:
const signers = await ethers.getSigners();
const newSigner = signers[1]; // Change the 1 to a different number that corolates with one of the pre-generated testing addresses
const newMain = await main.connect(newSigner);
newMain.setContractAddress("test","0xYourContractAddress");
以上是用于简单智能合约的 WebI的详细内容。更多信息请关注PHP中文网其他相关文章！
