用于简单智能合约的 WebI-js教程-PHP中文网

首页

web前端

js教程

用于简单智能合约的 WebI

Susan Sarandon

Nov 29, 2024 am 03:21 AM

让我们为智能合约构建一个 Web 前端！这是我之前关于使用 Solidity 和 Hardhat 创建简单智能合约的文章的后续内容。这里的说明假设您正在使用我们刚刚部署到 Hardhat 环境的相同合约。

在上一篇文章中，我们创建并测试了一个合约，该合约将增加存储在状态变量中的计数器。使用 Hardhat 控制台，我们调用了incrementCount() 和getCount() 函数。在现实世界中，与合约的交互不会通过开发控制台进行。创建调用这些函数的应用程序的一种方法是通过网页中的 Javascript（通过 ethers.js 库） - Web3 应用程序！

如上一篇文章所述，与 web3 应用程序交互需要具有内置钱包的浏览器。在这个简单的示例中，我们将使用 Metamask。 Metmask 已针对 Etherium 以及其他一些基于 EVM 的区块链进行了预配置，但不是我们在 Hardhat 环境中的模拟区块链。为了让这一切运行起来，我们将首先设置 Metmask，然后创建调用我们的合约所需的 HTML/Javascript。

Metamask / Web3 浏览器

安装 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 交易。

创建 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="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173282167151033.jpg"  class="lazy" 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中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

Java教程

1669

CakePHP 教程

1428

Laravel 教程

1329

PHP教程

1273

C# 教程

1256

显示更多

Related knowledge

Python vs. JavaScript：学习曲线和易用性 Apr 16, 2025 am 12:12 AM

Python更适合初学者，学习曲线平缓，语法简洁；JavaScript适合前端开发，学习曲线较陡，语法灵活。1.Python语法直观，适用于数据科学和后端开发。2.JavaScript灵活，广泛用于前端和服务器端编程。

从C/C到JavaScript：所有工作方式 Apr 14, 2025 am 12:05 AM

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1）C/C 是静态类型语言，需手动管理内存，而JavaScript是动态类型，垃圾回收自动处理。2）C/C 需编译成机器码，JavaScript则为解释型语言。3）JavaScript引入闭包、原型链和Promise等概念，增强了灵活性和异步编程能力。

JavaScript和Web：核心功能和用例 Apr 18, 2025 am 12:19 AM

JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互；2)在用户提交数据前进行客户端验证，提高用户体验；3)通过AJAX技术实现与服务器的无刷新通信。

JavaScript在行动中：现实世界中的示例和项目 Apr 19, 2025 am 12:13 AM

JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用，涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。

了解JavaScript引擎：实施详细信息 Apr 17, 2025 am 12:05 AM

理解JavaScript引擎内部工作原理对开发者重要，因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段；2)执行过程中，引擎会进行动态优化，如内联缓存和隐藏类；3)最佳实践包括避免全局变量、优化循环、使用const和let，以及避免过度使用闭包。

Python vs. JavaScript：社区，图书馆和资源 Apr 15, 2025 am 12:16 AM

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好，适合初学者，但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大，JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富，但Python适合从官方文档开始，JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

Python vs. JavaScript：开发环境和工具 Apr 26, 2025 am 12:09 AM

Python和JavaScript在开发环境上的选择都很重要。1)Python的开发环境包括PyCharm、JupyterNotebook和Anaconda，适合数据科学和快速原型开发。2)JavaScript的开发环境包括Node.js、VSCode和Webpack，适用于前端和后端开发。根据项目需求选择合适的工具可以提高开发效率和项目成功率。