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

    题记

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

    编写index.html文件

            index.html文件如下：

     

        My <a href="https://so.csdn.net/so/search?q=DApp&spm=1001.2101.3001.7020" target="_blank" class="hl hl-1" data-report-view="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=DApp&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"DApp\"}"}" data-report-click="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=DApp&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"DApp\"}"}" data-tit="DApp" data-pretit="dapp">DApp</a>

       

       

       

     

     

       

    My DApp

       

    当前用户的地址：

       

       

       

     

      

    1. html>
    2. <html>
    3.   <head>
    4.     <title>My DApptitle>
    5.     
    6.     <script src="https://cdn.jsdelivr.net/npm/@metamask/detect-provider">script>
    7.     <script>
    8.       //async是JavaScript中的一个关键字，用于定义一个异步函数。
    9.       //异步函数是一种特殊类型的函数，它可以在执行期间暂停并在某个时间点后继续执行。
    10.       //异步函数使用async关键字进行定义，并使用await关键字来暂停执行并等待异步操作完成。
    11.       //在等待期间，JavaScript引擎可以继续执行其他代码。
    12.       //当异步操作完成时，异步函数将恢复执行，并返回一个Promise对象，该对象包含异步操作的结果。
    13.       async function connect() {
    14.         // 检测Metamask是否已安装
    15.         // 这行代码使用 detectEthereumProvider() 函数来检测用户是否已安装并激活了 Metamask。
    16.         // 该函数返回一个提供者对象，如果用户已安装 Metamask，则提供者对象将被分配给 provider 变量。
    17.         const provider = await detectEthereumProvider();
    18.         if (provider) {
    19.           // 连接到Metamask
    20.           // 使用 ethereum.request() 函数来请求用户的帐户列表。
    21.           // eth_requestAccounts 方法用于请求用户授权以公开其以太坊帐户地址。
    22.           // 返回的 accounts 数组包含用户的帐户地址列表。
    23.           const accounts = await ethereum.request({ method: 'eth_requestAccounts' });
    24.           // 将用户的第一个帐户地址分配给 account 变量。
    25.           const account = accounts[0];
    26.           // 显示当前用户的地址
    27.           // 将用户的帐户地址显示在具有 id 为 address 的 HTML 元素中。
    28.           document.getElementById('address').textContent = account;
    29.           console.log(account)
    30.         } else {
    31.           // 如果Metamask未安装，则提示用户安装Metamask
    32.           alert('请安装Metamask');
    33.         }
    34.       }
    35.     script>
    36.   head>
    37.   <body>
    38.     <h1>My DApph1>
    39.     <p>当前用户的地址：p>
    40.     <p id="address">p>
    41.     
    42.     <button onclick="connect()">连接Metamaskbutton>
    43.   body>
    44. html>

    执行程序 

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

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

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

             

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

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

     展示图

    后记 

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

  • 相关阅读:
    centos Hadoop伪分布模式安装-ssh免密登录
    DataGridView控件的使用
    arm-linux gdb远程调试
    【JavaEE】网络编程---TCP数据报套接字编程
    Aws EKS 技术文章
    linux设备模型：devtmpfs虚拟文件系统分析
    langchain主要模块(二)：数据连接
    Centos7安装MySQL5.7全部流程
    【react antd】DatePicker组件报错：date.clone is not a function...
    力扣每日一题：813. 最大平均值和的分组【0-1背包问题】
  • 原文地址：https://blog.csdn.net/m0_70819559/article/details/133889002