当前位置： 首页 > news >正文

5.DApp-前端网页怎么连接MetaMask

news 2026/2/9 10:19:04

题记

        在前端网页连接metamask，以下是全部操作流程和代码。

编写index.html文件

        index.html文件如下：

<!DOCTYPE html>

<html>

  <head>

    <title>My DApp</title>

    <!--导入用于检测Metamask提供者的JavaScript库-->

    <script src="https://cdn.jsdelivr.net/npm/@metamask/detect-provider"></script>

    <script>

      //async是JavaScript中的一个关键字，用于定义一个异步函数。

      //异步函数是一种特殊类型的函数，它可以在执行期间暂停并在某个时间点后继续执行。

      //异步函数使用async关键字进行定义，并使用await关键字来暂停执行并等待异步操作完成。

      //在等待期间，JavaScript引擎可以继续执行其他代码。

      //当异步操作完成时，异步函数将恢复执行，并返回一个Promise对象，该对象包含异步操作的结果。

      async function connect() {

        // 检测Metamask是否已安装

        // 这行代码使用 detectEthereumProvider() 函数来检测用户是否已安装并激活了 Metamask。

        // 该函数返回一个提供者对象，如果用户已安装 Metamask，则提供者对象将被分配给 provider 变量。

        const provider = await detectEthereumProvider();

        if (provider) {

          // 连接到Metamask

          // 使用 ethereum.request() 函数来请求用户的帐户列表。

          // eth_requestAccounts 方法用于请求用户授权以公开其以太坊帐户地址。

          // 返回的 accounts 数组包含用户的帐户地址列表。

          const accounts = await ethereum.request({ method: 'eth_requestAccounts' });

          // 将用户的第一个帐户地址分配给 account 变量。

          const account = accounts[0];

          // 显示当前用户的地址

          // 将用户的帐户地址显示在具有 id 为 address 的 HTML 元素中。

          document.getElementById('address').textContent = account;

          console.log(account)

        } else {

          // 如果Metamask未安装，则提示用户安装Metamask

          alert('请安装Metamask');

        }

      }

    </script>

  </head>

  <body>

    <h1>My DApp</h1>

    <p>当前用户的地址：</p>

    <p id="address"></p>

    <!--创建一个按钮元素，当用户点击该按钮时，会触发名为 connect() 的函数-->

    <button οnclick="connect()">连接Metamask</button>

  </body>

</html>

  

<!DOCTYPE html>
<html><head><title>My DApp</title><!--导入用于检测Metamask提供者的JavaScript库--><script src="https://cdn.jsdelivr.net/npm/@metamask/detect-provider"></script><script>//async是JavaScript中的一个关键字，用于定义一个异步函数。//异步函数是一种特殊类型的函数，它可以在执行期间暂停并在某个时间点后继续执行。//异步函数使用async关键字进行定义，并使用await关键字来暂停执行并等待异步操作完成。//在等待期间，JavaScript引擎可以继续执行其他代码。//当异步操作完成时，异步函数将恢复执行，并返回一个Promise对象，该对象包含异步操作的结果。async function connect() {// 检测Metamask是否已安装// 这行代码使用 detectEthereumProvider() 函数来检测用户是否已安装并激活了 Metamask。// 该函数返回一个提供者对象，如果用户已安装 Metamask，则提供者对象将被分配给 provider 变量。const provider = await detectEthereumProvider();if (provider) {// 连接到Metamask// 使用 ethereum.request() 函数来请求用户的帐户列表。// eth_requestAccounts 方法用于请求用户授权以公开其以太坊帐户地址。// 返回的 accounts 数组包含用户的帐户地址列表。const accounts = await ethereum.request({ method: 'eth_requestAccounts' });// 将用户的第一个帐户地址分配给 account 变量。const account = accounts[0];// 显示当前用户的地址// 将用户的帐户地址显示在具有 id 为 address 的 HTML 元素中。document.getElementById('address').textContent = account;console.log(account)} else {// 如果Metamask未安装，则提示用户安装Metamaskalert('请安装Metamask');}}</script></head><body><h1>My DApp</h1><p>当前用户的地址：</p><p id="address"></p><!--创建一个按钮元素，当用户点击该按钮时，会触发名为 connect() 的函数--><button onclick="connect()">连接Metamask</button></body>
</html>

执行程序 

        使用vscode的Live Server插件打开，可以参考下面的文章使用Live Server：

         1.Vue-在独立页面实现Vue的增删改查_南宫遐迩的博客-CSDN博客

        访问到网页后如果没反应，则是国内网络问题，访问不到 导入的js库，可以耐心等待或者科学上网

         

        metamask需要连接本地的ganache环境，可以参考下面这篇文章： 

        4.DApp-MetaMask怎么连接本地Ganache-CSDN博客

 展示图

后记 

        觉得有用可以点赞或收藏！ 

相关文章：

5.DApp-前端网页怎么连接MetaMask

题记 在前端网页连接metamask&#xff0c;以下是全部操作流程和代码。 编写index.html文件 index.html文件如下&#xff1a; <!DOCTYPE html> <html> <head> <title>My DApp</title> <!--导入用于检测Metamask提供者的JavaScript库--> &l…...

编程日记 2023/10/18 7:55:26

手机应用app打开游戏显示连接服务器失败是什么原因？排查解决方案？

亲爱的同学们&#xff0c;有时候我们在使用手机设备时&#xff0c;可能会遇到一个很头疼的问题——连接服务器失败。这个问题不仅让我们感到困扰&#xff0c;还影响到了我们的用户体验。那么&#xff0c;我们究竟能如何解决这个问题呢&#xff1f;今天&#xff0c;笔者就和大家…...

编程日记 2023/10/18 7:53:23

【Java学习之道】指引篇：从入门到入世

引言 你是否曾为找不到适合自己的Java学习之路而烦恼&#xff1f;是否想摆脱混乱的Java知识体系&#xff0c;找到一条从入门到精通的捷径&#xff1f;来《Java学习之道》吧&#xff0c;本专栏为你量身打造&#xff0c;让我们一起轻松踏上Java学习之旅&#xff01; 第一章、Jav…...

编程日记 2023/10/18 7:52:22

pytorch_quantization安装

官方安装步骤&#xff1a; pip install nvidia-pyindex pip install pytorch-quantization直接安装pytorch-quantization会找不到&#xff0c;需要首先安装 nvidia-pyindex 包&#xff0c; nvidia-pyindex是一个 pip 源&#xff0c;用来连接英伟达的服务器下载需要的包。 如果…...

编程日记 2023/10/18 7:50:20

开源项目汇总

element-plus 人人开源 人人开源 多租户 若依 jeecg https://gitee.com/jeecg/jeecg?_fromgitee_search#https://gitee.com/link?targethttp%3A%2F%2Fidoc.jeecg.com jeeplus JeePlus快速开发平台 j2eefast Sa-Plus...

编程日记 2023/10/18 7:48:16

android.mk介绍

相对于Android的目前来说以前编译底层都使用Android.mk文件配置ndk&#xff0c;现在都使用Cmake这里我们着重介绍下Android.mk 最最基础的几个变量如下 # 定义模块当前路径 LOCAL_PATH : $(call my-dir) #清空当前环境变量 include $(CLEAR_VARS) # 生成libhell.so LOCAL_M…...

编程日记 2023/10/18 7:47:15

极光笔记 | 发送功能使用技巧分享

在全球化竞争激烈的商业环境中&#xff0c;高效的消息通知解决方案是企业成功的关键。EngageLab作为一家专注于海外市场的消息服务平台&#xff0c;为全球企业提供了一体化的消息通知解决方案。其中&#xff0c;EngageLab的国际邮件发送是其强大而灵活的产品服务之一。本文将与…...

编程日记 2023/10/18 7:44:12

Oracle database 开启归档日志 archivelog

Oracle database 开启归档日志 archivelog 归档日志模式 (Archivelog Mode)。归档日志模式是一种数据库运行模式&#xff0c;它允许数据库将日志文件保存到归档日志目录中&#xff0c;以便在需要时进行恢复和还原操作。通过开启归档日志模式&#xff0c;可以提高数据库的可靠性…...

编程日记 2023/10/18 7:42:10

【学一点儿前端】ajax、axios和fetch的概念、区别和易混淆点

省流读法 ajax是js异步技术的术语&#xff0c;早期相关的api是xhr&#xff0c;它是一个术语。 fetch是es6新增的用于网络请求标准api&#xff0c;它是一个api。 axios是用于网络请求的第三方库&#xff0c;它是一个库。 1.Ajax 它的全称是&#xff1a;Asynchronous JavaScri…...

编程日记 2023/10/18 7:41:09

互联网Java工程师面试题·Java 总结篇·第五弹

目录 47、Java 语言如何进行异常处理&#xff0c;关键字&#xff1a;throws、throw、try、catch、finally 分别如何使用&#xff1f; 48、运行时异常与受检异常有何异同&#xff1f; 49、列出一些你常见的运行时异常&#xff1f; 50、阐述 final、finally、finalize 的区别…...

编程日记 2023/10/18 7:40:08

车载电子电器架构 —— 国产基础软件现在与未来

我是穿拖鞋的汉子&#xff0c;魔都中坚持长期主义的汽车电子工程师。 老规矩&#xff0c;分享一段喜欢的文字&#xff0c;避免自己成为高知识低文化的工程师&#xff1a; 屏蔽力是信息过载时代一个人的特殊竞争力&#xff0c;任何消耗你的人和事&#xff0c;多看一眼都是你的不…...

编程日记 2023/10/18 7:39:07

在.Core中用EF添加数据库实体类

首先安装dotnet-ef工具&#xff0c;否则提示&#xff1a; *无法执行&#xff0c;因为找不到指定的命令或文件。 可能的原因包括: *你拼错了内置的 dotnet 命令。 *你打算执行 .NET Core 程序&#xff0c;但 dotnet-ef 不存在。 你打算运行全局工具&#xff0c;但在路径上找不到…...

编程日记 2023/10/18 7:38:06

unigui添加ssl（https）访问的方法

首先到腾讯云或者阿里云去申请免费的证书&#xff0c;前提是在该服务商那有申请过域名&#xff0c;怎么找出这个界面&#xff1f;网页顶部一般都有个搜索框&#xff0c;输入【证书】或者【SSL】就能看到了&#xff0c;然后点击申请免费证书&#xff0c;把解析信息填入自己的域名…...

编程日记 2023/10/18 7:37:05

安防监控系统EasyCVR视频汇聚平台设备树收藏按钮的细节优化

视频监控TSINGSEE青犀视频平台EasyCVR能在复杂的网络环境中&#xff0c;将分散的各类视频资源进行统一汇聚、整合、集中管理&#xff0c;在视频监控播放上&#xff0c;TSINGSEE青犀视频安防监控汇聚平台可支持1、4、9、16个画面窗口播放&#xff0c;可同时播放多路视频流&#…...

编程日记 2023/10/18 7:36:04

数据结构----算法--排序算法

数据结构----算法–排序算法 一.冒泡排序&#xff08;BubbleSort&#xff09; 1.冒泡排序的核心思想 相邻两个元素进行大小比较&#xff0c;如果前一个比后一个大&#xff0c;就交换 注意&#xff1a; 在冒泡排序的过程中&#xff0c;促进了大的数往后去&#xff0c;小的数…...

编程日记 2023/10/18 7:33:00

Unity3D 基础——使用 Mathf.SmoothDamp 函数制作相机的缓冲跟踪效果

使用 Mathf.SmoothDamp 函数制作相机的缓冲跟踪效果&#xff0c;让物体的移动不是那么僵硬&#xff0c;而是做减速的缓冲效果。将以下的脚本绑定在相机上&#xff0c;然后设定好 target 目标对象&#xff0c;即可看到相机的缓动效果。通过设定 smoothTime 的值&#xff0c;可以…...

编程日记 2023/10/18 7:31:58

leetcode-200. 岛屿数量

1. 题目 leetcode题目链接 2. 解答 思路&#xff1a; 需要循环遍历每个节点&#xff1b;找到陆地&#xff0c;基于陆地开始遍历陆地的上下左右&#xff1b;数组dirm dirn就可以表示某个区域的上下左右&#xff1b;标记遍历过的节点&#xff1b;设计循环的退出条件&#xf…...

编程日记 2023/10/18 7:30:57

python的搜索引擎系统设计与实现 计算机竞赛

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; python的搜索引擎系统设计与实现 &#x1f947;学长这里给一个题目综合评分(每项满分5分) 难度系数&#xff1a;3分工作量&#xff1a;5分创新点&#xff1a;3分 该项目较为新颖&#xff…...

编程日记 2023/10/18 7:29:56

Unity随笔：在Unity中使用多线程需要注意什么

Unity3D 支持多线程编程&#xff0c;但是在 Unity 中使用多线程需要注意一些限制和注意事项。以下是在 Unity 中使用多线程时需要注意的事项&#xff1a; 1. Unity 主线程限制&#xff1a; Unity 中的大部分操作必须在主线程进行&#xff0c;包括场景的修改、资源的加载、渲染…...

编程日记 2023/10/18 7:28:54

SQL Select（选择） 语法

SQL SELECT 语法 SELECT 语法用于从数据库中选择数据。 返回的数据存储在结果表中&#xff0c;称为结果集。 基本语法&#xff1a;SELECT和FROM 在任何SQL查询语句中都&#xff1a;SELECT和FROM他们必须按顺序排列。SELECT指示要查看哪些列&#xff0c;FROM标识它们所在的表。…...

编程日记 2023/10/18 7:26:52

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手&#xff1a;借助大模型技术&#xff0c;开发能根据用户输入的主题、风格等要求&#xff0c;生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用&#xff0c;帮助艺术家和创意爱好者激发创意、提高创作效率。 ​ - 个性化梦境…...

编程新知 2025/11/6 5:46:16

Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

编程新知 2025/12/20 7:42:02

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能&#xff0c;包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

编程新知 2025/11/14 9:31:35

AI Agent与Agentic AI：原理、应用、挑战与未来展望

文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例&#xff1a;使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例&#xff1a;使用OpenAI GPT-3进…...

编程新知 2026/1/23 7:04:53

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

论文网址&#xff1a;pdf 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误&#xff0c;若有发现欢迎评论指正&#xff01;文章偏向于笔记&#xff0c;谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

编程新知 2026/2/6 14:42:11

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

编程新知 2026/1/4 5:02:00

postgresql|数据库|只读用户的创建和删除（备忘）

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

编程新知 2025/9/18 19:34:22

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2026/2/6 11:05:22

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

编程新知 2025/12/17 5:54:30

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库，而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例，演示如何： 使用 FetchContent 从 GitH…...

编程新知 2026/2/1 3:19:54