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

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

news 2026/2/9 1:58:30

题记

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

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中&#xff0c;时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志&#xff0c;到供应链系统的物流节点时间戳&#xff0c;时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库&#xff0c;其日期时间类型的…...

编程新知 2025/10/16 13:22:06

Zustand 状态管理库：极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库&#xff0c;特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

编程新知 2026/2/8 10:56:57

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

编程新知 2025/12/16 4:45:38

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935&#xff0c;SRS管理页面端口是8080&#xff0c;可…...

编程新知 2026/2/6 9:49:55

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

编程新知 2026/1/29 16:25:24

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全&#xff08;Thread Safety&#xff09; 线程安全是指在多线程环境下&#xff0c;某个函数、类或代码片段能够被多个线程同时调用时&#xff0c;仍能保证数据的一致性和逻辑的正确性&#xf…...

编程新知 2025/12/2 3:35:50

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域&#xff0c;向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能&#xff0c;能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作&#xff0c;并通过具体…...

编程新知 2026/2/8 21:52:30

C/C++ 中附加包含目录、附加库目录与附加依赖项详解

在 C/C 编程的编译和链接过程中&#xff0c;附加包含目录、附加库目录和附加依赖项是三个至关重要的设置&#xff0c;它们相互配合&#xff0c;确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中&#xff0c;这些概念容易让人混淆&#xff0c;但深入理解它们的作用和联…...

编程新知 2026/1/26 2:22:24

如何更改默认 Crontab 编辑器 ？

在 Linux 领域中&#xff0c;crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用&#xff0c;用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益&#xff0c;允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...

编程新知 2026/1/30 3:27:35

LabVIEW双光子成像系统技术

双光子成像技术的核心特性 双光子成像通过双低能量光子协同激发机制&#xff0c;展现出显著的技术优势&#xff1a; 深层组织穿透能力&#xff1a;适用于活体组织深度成像 高分辨率观测性能&#xff1a;满足微观结构的精细研究需求 低光毒性特点&#xff1a;减少对样本的损伤…...

编程新知 2026/1/31 13:04:44