基于 Hardhat 区块链 + MetaMask 钱包开发的极简去中心化应用（DApp）demo

文章目录

前言
- [基于 Hardhat 区块链 + MetaMask 钱包开发的极简去中心化应用（DApp）demo](#基于 Hardhat 区块链 + MetaMask 钱包开发的极简去中心化应用（DApp）demo)
- - [1. 项目介绍](#1. 项目介绍)
  - [2. 功能说明](#2. 功能说明)
  - - [2.1. 钱包交互基础](#2.1. 钱包交互基础)
    - [2.2. 智能合约交互](#2.2. 智能合约交互)
  - [3. 相关命令](#3. 相关命令)
  - [4. 效果](#4. 效果)
  - [5. 源码地址](#5. 源码地址)

前言

如果您觉得有用的话，记得给博主点个赞，评论，收藏一键三连啊，写作不易啊^ _ ^。

而且听说点赞的人每天的运气都不会太差，实在白嫖的话，那欢迎常来啊!!!

基于 Hardhat 区块链 + MetaMask 钱包开发的极简去中心化应用（DApp）demo

1. 项目介绍

基于 Hardhat 区块链 + MetaMask 钱包开发的极简去中心化应用（DApp），核心功能是通过链上智能合约实现「计数器自增」操作，完整覆盖新手入门 DApp 开发的核心流程：钱包连接与授权、链 ID 校验与自动切换、智能合约部署与链上交互。

2. 功能说明

2.1. 钱包交互基础

1、自动检测 MetaMask 钱包是否安装，无钱包时给出友好提示；

2、校验用户钱包授权状态，未授权时引导完成账户授权；

3、动态配置目标链 ID（通过环境变量 TARGET_CHAIN_ID），自动校验当前链是否匹配；

4、链匹配时直接初始化合约交互；

5、链不匹配时引导切换 / 添加目标链（兼容 Hardhat 本地链 31337/1337 等配置）；

6、兼容 MetaMask 不同版本 RPC 接口，处理链配置冲突、重复请求等常见异常。

2.2. 智能合约交互

1、合约相关命令集成 webpack、包含测试、编译、部署、清理。

2、实时查询链上计数器数值并渲染到前端页面测试demo。

3、点击按钮触发链上交易：调用合约方法，MetaMask 自动弹窗确认交易，交易上链后更新计数器数值。

3. 相关命令

启动前端 DApp（核心）:

bash 复制代码

 yarn dev

生产环境打包 :

bash 复制代码

yarn build

部署 Counter 合约到链上 :

bash 复制代码

yarn deploy:counter

部署 helloWorld 测试合约部署到链上 :

bash 复制代码

yarn deploy:helloWorld

合约编译 :

bash 复制代码

yarn compile

启动本地区块链网络 :

bash 复制代码

yarn hardhat-node

4. 效果

启动本地区块链网络。

bash 复制代码

yarn hardhat-node

编译合约:

bash 复制代码

yarn compile

部署后面测试交互的合约:

bash 复制代码

yarn deploy:counter

区块链日志:

智能合约交互测试:

启动项目:

bash 复制代码

yarn dev

合约交互:

钱包点击确认。

5. 源码地址

https://github.com/yangzhenyu07/DApp

基于 Hardhat 区块链 + MetaMask 钱包 开发的极简去中心化应用（DApp）demo

文章目录

前言

基于 Hardhat 区块链 + MetaMask 钱包 开发的极简去中心化应用（DApp）demo

1. 项目介绍

2. 功能说明

2.1. 钱包交互基础

2.2. 智能合约交互

3. 相关命令

4. 效果

5. 源码地址

基于 Hardhat 区块链 + MetaMask 钱包开发的极简去中心化应用（DApp）demo

基于 Hardhat 区块链 + MetaMask 钱包开发的极简去中心化应用（DApp）demo