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

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

news 2026/2/7 23:08:21

题记

        在前端网页连接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

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别，但在其他电脑上正常工作时，问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤，帮助你快速找到故障原因： 背景： 一个M-pard（铭豹）扩展坞的网卡突然无法识别了，扩展出来的三个USB接口正常。…...

编程新知 2026/2/5 10:34:36

Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

编程新知 2026/1/22 8:41:31

iPhone密码忘记了办？iPhoneUnlocker，iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版​分享

平时用 iPhone 的时候&#xff0c;难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵&#xff0c;或者买了二手 iPhone 却被原来的 iCloud 账号锁住&#xff0c;这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

编程新知 2026/1/29 10:22:28

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

编程新知 2026/1/25 13:13:20

深度学习习题2

1.如果增加神经网络的宽度&#xff0c;精确度会增加到一个特定阈值后&#xff0c;便开始降低。造成这一现象的可能原因是什么&#xff1f; A、即使增加卷积核的数量&#xff0c;只有少部分的核会被用作预测 B、当卷积核数量增加时&#xff0c;神经网络的预测能力会降低 C、当卷…...

编程新知 2026/1/26 5:53:30

Reasoning over Uncertain Text by Generative Large Language Models

https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达，从日常对话到特定领域的文档（例如医学文档）（Heritage 2013；Landmark、Gulbrandsen 和 Svenevei…...

编程新知 2026/2/6 17:58:07

sipsak：SIP瑞士军刀！全参数详细教程！Kali Linux教程！

简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求&#xff0c;并检查收到的响应。它以以下模式之一…...

编程新知 2026/1/29 8:51:33

面向无人机海岸带生态系统监测的语义分割基准数据集

描述&#xff1a;海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而&#xff0c;目前该领域仍面临一个挑战&#xff0c;即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...

编程新知 2026/1/25 14:15:52

MySQL 知识小结（一）

一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库&#xff0c;分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷&#xff0c;但是文件存放起来数据比较冗余&#xff0c;用二进制能够更好管理咱们M…...

编程新知 2026/1/26 13:29:47

现有的 Redis 分布式锁库（如 Redisson）提供了哪些便利？

现有的 Redis 分布式锁库&#xff08;如 Redisson&#xff09;相比于开发者自己基于 Redis 命令&#xff08;如 SETNX, EXPIRE, DEL&#xff09;手动实现分布式锁&#xff0c;提供了巨大的便利性和健壮性。主要体现在以下几个方面&#xff1a; 原子性保证 (Atomicity)&#xff…...

编程新知 2025/9/23 11:26:04