区块链实战：获取Web3.modules 信息展示

黄菊华老师2025-12-18 14:12

博主介绍 ：黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者，CSDN博客专家，在线教育专家，CSDN钻石讲师；专注网站制作、小程序开发、软件开发和大学生毕业设计教育、辅导。

最近致力于区块链的研究，涉及metamask钱包、ganache、web3、支持多链的钱包应用、去中心化应用（DApp）、去中心化交易所（DEX）、DeFi协议前端、智能合约部署和管理工具、区块和交易查询系统等！！！

如果需要联系我，可以在CSDN网站查询黄菊华老师的，在文章末尾可以获取联系方式

效果图

页面功能说明

这个页面提供了以下功能：

  1. 钱包连接：允许用户连接 MetaMask 钱包
  2. 自动检测：自动检测已连接的钱包账户
  3. Web3.modules 展示：以卡片形式展示 Web3 的各个核心模块
  4. 响应式设计：适配不同屏幕大小
  5. 实时更新：监听账户和网络变化，自动更新模块信息
  6. 用户友好：包含加载动画、状态指示器和错误提示

如何使用

  1. 使用HTTP 服务器方法启动服务：在浏览器中访问 http://localhost:端口/02.html

  2. 点击 "连接钱包" 按钮，授权 MetaMask 连接

  3. 连接成功后，页面将显示 Web3 的各个核心模块及其详细信息

注意事项

  • 确保已安装并启用 MetaMask 浏览器插件
  • 必须在 HTTP 服务器环境下运行）才能正常使用 MetaMask
  • 页面会自动适应不同的以太坊网络
  • 如果遇到问题，可以查看浏览器控制台获取详细错误信息

代码

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web3 4.x 功能展示</title>
    <!-- 使用最新的Web3 4.x版本 -->
    <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
    <style>
        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f5f5f5; margin: 0; padding: 20px; line-height: 1.6; }
        .container { max-width: 900px; margin: 0 auto; background-color: #fff; padding: 30px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); }
        h1 { color: #4a6fa5; text-align: center; margin-bottom: 30px; }
        .wallet-section { text-align: center; margin-bottom: 30px; }
        .connect-btn { background-color: #4a6fa5; color: white; border: none; padding: 12px 24px; font-size: 16px; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; }
        .connect-btn:hover { background-color: #3a5886; }
        .wallet-info { margin-top: 20px; padding: 15px; background-color: #f0f8ff; border-radius: 5px; text-align: left; }
        .modules-section { margin-top: 30px; }
        h2 { color: #4a6fa5; border-bottom: 2px solid #e0e0e0; padding-bottom: 10px; }
        .module-card { background-color: #f9f9f9; border: 1px solid #e0e0e0; border-radius: 8px; padding: 20px; margin-bottom: 20px; transition: transform 0.2s ease, box-shadow 0.2s ease; }
        .module-card:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
        .module-name { font-weight: bold; font-size: 18px; color: #333; margin-bottom: 10px; }
        .module-details { background-color: #fff; padding: 15px; border-radius: 5px; border: 1px solid #e0e0e0; white-space: pre-wrap; font-family: 'Courier New', Courier, monospace; font-size: 14px; max-height: 300px; overflow-y: auto; }
        .error-message { color: #d32f2f; background-color: #ffebee; padding: 10px; border-radius: 5px; margin-top: 10px; }
        .status-indicator { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; }
        .status-connected { background-color: #4caf50; }
        .status-disconnected { background-color: #f44336; }
        .loading { display: inline-block; width: 20px; height: 20px; border: 3px solid #f3f3f3; border-top: 3px solid #4a6fa5; border-radius: 50%; animation: spin 1s linear infinite; }
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        .info-box { background-color: #e3f2fd; padding: 15px; border-radius: 5px; margin: 15px 0; }
    </style>
</head>
<body>
    <div class="container">
        <h1>Web3 4.x 功能展示</h1>
        
        <!-- 钱包连接区域 -->
        <div class="wallet-section">
            <button id="connectWalletBtn" class="connect-btn">连接钱包</button>
            <div id="walletStatus" style="margin-top: 15px;">
                <span class="status-indicator status-disconnected"></span>未连接钱包
            </div>
            <div id="walletInfo" class="wallet-info" style="display: none;">
                <p><strong>账户地址:</strong> <span id="accountAddress"></span></p>
                <p><strong>网络:</strong> <span id="networkName"></span> (<span id="networkId"></span>)</p>
                <p><strong>Web3 版本:</strong> <span id="web3Version">加载中...</span></p>
            </div>
        </div>
        
        <div class="info-box">
            <p><strong>关于 Web3 4.x 的说明:</strong></p>
            <p>Web3 4.x 是最新版本，提供了改进的API和性能优化。本页面展示 Web3 4.x 的主要功能组件。</p>
        </div>
        
        <!-- Web3 核心组件展示区域 -->
        <div class="modules-section">
            <h2>Web3 4.x 核心组件</h2>
            <div id="modulesContainer" style="display: none;">
                <!-- 组件信息将在这里动态生成 -->
            </div>
            <div id="loadingIndicator" style="text-align: center; margin: 20px 0; display: none;">
                <div class="loading"></div>
                <p>正在加载 Web3 组件信息...</p>
            </div>
            <div id="noModulesMessage" class="error-message" style="display: none;">
                请先连接钱包以查看 Web3 组件信息。
            </div>
            <div id="debugInfo" style="margin-top: 20px; padding: 15px; background-color: #f8f8f8; border-radius: 5px; font-family: monospace; font-size: 12px; display: none;"></div>
        </div>
        
        <!-- 错误信息展示区域 -->
        <div id="errorContainer" class="error-message" style="display: none;"></div>
    </div>

    <script>
        let web3 = null;
        let currentAccount = null;
        
        // 初始化页面
        window.addEventListener('load', async () => {
            // 检查 MetaMask 是否安装
            if (typeof window.ethereum !== 'undefined') {
                console.log('MetaMask 已安装');
                document.getElementById('connectWalletBtn').addEventListener('click', connectWallet);
                
                // 显示 Web3 版本信息
                try {
                    if (window.Web3 && window.Web3.version) {
                        document.getElementById('web3Version').textContent = window.Web3.version;
                    } else {
                        // 尝试直接从web3实例获取版本
                        if (typeof Web3 !== 'undefined') {
                            const tempWeb3 = new Web3();
                            if (tempWeb3.version && tempWeb3.version.api) {
                                document.getElementById('web3Version').textContent = tempWeb3.version.api;
                            } else {
                                document.getElementById('web3Version').textContent = '4.x (版本信息获取失败)';
                            }
                        } else {
                            document.getElementById('web3Version').textContent = '未知版本';
                        }
                    }
                } catch (e) {
                    document.getElementById('web3Version').textContent = '无法获取版本';
                }
                
                // 自动检测已连接的钱包
                try {
                    const accounts = await ethereum.request({ method: 'eth_accounts' });
                    if (accounts.length > 0) {
                        currentAccount = accounts[0];
                        initWeb3();
                        updateWalletInfo();
                        showWeb3Components();
                    } else {
                        document.getElementById('noModulesMessage').style.display = 'block';
                    }
                } catch (error) {
                    console.error('自动检测钱包失败:', error);
                    showDebugInfo('自动检测钱包失败: ' + error.message);
                }
            } else {
                showError('未检测到 MetaMask 钱包。请安装 MetaMask 浏览器插件后刷新页面。');
                document.getElementById('connectWalletBtn').disabled = true;
            }
        });
        
        // 连接钱包
        async function connectWallet() {
            try {
                document.getElementById('loadingIndicator').style.display = 'block';
                const accounts = await ethereum.request({ method: 'eth_requestAccounts' });
                currentAccount = accounts[0];
                initWeb3();
                updateWalletInfo();
                showWeb3Components();
            } catch (error) {
                console.error('连接钱包失败:', error);
                showError('连接钱包失败: ' + error.message);
                showDebugInfo('连接钱包错误: ' + error.message);
            } finally {
                document.getElementById('loadingIndicator').style.display = 'none';
            }
        }
        
        // 初始化 Web3
        function initWeb3() {
            try {
                if (window.ethereum) {
                    // Web3 4.x 的初始化方式
                    web3 = new Web3(window.ethereum);
                    showDebugInfo('Web3 初始化成功');
                    
                    // 监听账户变化 - Web3 4.x 的事件监听方式
                    ethereum.on('accountsChanged', (accounts) => {
                        if (accounts.length > 0) {
                            currentAccount = accounts[0];
                            updateWalletInfo();
                            showWeb3Components();
                        } else {
                            currentAccount = null;
                            updateWalletInfo();
                            document.getElementById('modulesContainer').style.display = 'none';
                            document.getElementById('noModulesMessage').style.display = 'block';
                        }
                    });
                    
                    // 监听网络变化
                    ethereum.on('chainChanged', (chainId) => {
                        updateWalletInfo();
                        showWeb3Components();
                    });
                }
            } catch (error) {
                console.error('Web3 初始化失败:', error);
                showError('Web3 初始化失败: ' + error.message);
                showDebugInfo('Web3 初始化错误: ' + error.message);
            }
        }
        
        // 更新钱包信息
        async function updateWalletInfo() {
            if (currentAccount && web3) {
                try {
                    // Web3 4.x 可能使用 web3.eth.getChainId()
                    let networkId;
                    try {
                        networkId = await web3.eth.getChainId();
                    } catch {
                        // 降级方案
                        networkId = await web3.eth.net.getId();
                    }
                    
                    const networkName = getNetworkName(networkId);
                    
                    document.getElementById('walletStatus').innerHTML = 
                        '<span class="status-indicator status-connected"></span>已连接';
                    document.getElementById('accountAddress').textContent = formatAddress(currentAccount);
                    document.getElementById('networkId').textContent = networkId;
                    document.getElementById('networkName').textContent = networkName;
                    document.getElementById('walletInfo').style.display = 'block';
                } catch (error) {
                    console.error('更新钱包信息失败:', error);
                    showDebugInfo('更新钱包信息错误: ' + error.message);
                }
            } else {
                document.getElementById('walletStatus').innerHTML = 
                    '<span class="status-indicator status-disconnected"></span>未连接钱包';
                document.getElementById('walletInfo').style.display = 'none';
            }
        }
        
        // 显示 Web3 核心组件
        function showWeb3Components() {
            // 清空之前的内容
            const container = document.getElementById('modulesContainer');
            container.innerHTML = '';
            
            if (!web3) {
                document.getElementById('modulesContainer').style.display = 'none';
                document.getElementById('noModulesMessage').style.display = 'block';
                showDebugInfo('Web3 实例未初始化');
                return;
            }
            
            try {
                document.getElementById('loadingIndicator').style.display = 'block';
                document.getElementById('noModulesMessage').style.display = 'none';
                
                // Web3 4.x 的核心组件
                const coreComponents = [
                    { name: 'web3.eth', desc: '以太坊区块链交互核心模块' },
                    { name: 'web3.utils', desc: '通用工具函数集合' },
                    { name: 'web3.eth.accounts', desc: '账户管理与密钥生成' },
                    { name: 'web3.eth.contract', desc: '智能合约交互' },
                    { name: 'web3.eth.net', desc: '网络状态与信息' },
                    { name: 'web3.eth.personal', desc: '个人账户管理' },
                    { name: 'web3.eth.ens', desc: '以太坊名称服务' },
                    // Web3 4.x 可能新增的组件
                    { name: 'web3.modules', desc: 'Web3 模块注册表（如果存在）' }
                ];
                
                // 遍历并显示每个核心组件
                coreComponents.forEach((component) => {
                    try {
                        const moduleCard = document.createElement('div');
                        moduleCard.className = 'module-card';
                        
                        const moduleNameEl = document.createElement('div');
                        moduleNameEl.className = 'module-name';
                        moduleNameEl.textContent = `${component.name} - ${component.desc}`;
                        
                        const moduleDetailsEl = document.createElement('div');
                        moduleDetailsEl.className = 'module-details';
                        
                        // 尝试获取组件的详细信息
                        try {
                            let componentInfo = '';
                            
                            // 根据组件名称获取实际对象
                            let componentObj = null;
                            if (component.name.includes('.')) {
                                const parts = component.name.split('.');
                                componentObj = web3;
                                for (let i = 1; i < parts.length; i++) {
                                    if (componentObj && typeof componentObj[parts[i]] !== 'undefined') {
                                        componentObj = componentObj[parts[i]];
                                    } else {
                                        componentObj = null;
                                        break;
                                    }
                                }
                            }
                            
                            if (componentObj === null || componentObj === undefined) {
                                componentInfo = '该组件在当前 Web3 版本中不存在或不可用';
                            } else if (typeof componentObj === 'object') {
                                try {
                                    // 显示对象的主要方法和属性
                                    const keys = Object.keys(componentObj);
                                    const methods = [];
                                    const props = [];
                                    
                                    keys.forEach(key => {
                                        if (typeof componentObj[key] === 'function') {
                                            methods.push(key + '()');
                                        } else {
                                            props.push(key);
                                        }
                                    });
                                    
                                    componentInfo = `可用方法 (${methods.length}):\n${methods.slice(0, 10).join(', ')}${methods.length > 10 ? ', ...' : ''}\n\n可用属性 (${props.length}):\n${props.slice(0, 10).join(', ')}${props.length > 10 ? ', ...' : ''}`;
                                } catch (e) {
                                    componentInfo = '对象信息获取错误: ' + e.message;
                                }
                            } else if (typeof componentObj === 'function') {
                                componentInfo = componentObj.toString().substring(0, 300) + '...';
                            } else {
                                componentInfo = String(componentObj);
                            }
                            
                            moduleDetailsEl.textContent = componentInfo;
                        } catch (e) {
                            moduleDetailsEl.textContent = '无法获取组件详细信息: ' + e.message;
                        }
                        
                        moduleCard.appendChild(moduleNameEl);
                        moduleCard.appendChild(moduleDetailsEl);
                        container.appendChild(moduleCard);
                    } catch (e) {
                        console.error(`处理组件 ${component.name} 时出错:`, e);
                        showDebugInfo(`处理组件 ${component.name} 时出错: ${e.message}`);
                    }
                });
                
                // 特别检查 web3.modules 是否存在
                if (web3.modules) {
                    try {
                        const modulesCard = document.createElement('div');
                        modulesCard.className = 'module-card';
                        modulesCard.style.backgroundColor = '#e8f5e9'; // 突出显示
                        
                        const modulesNameEl = document.createElement('div');
                        modulesNameEl.className = 'module-name';
                        modulesNameEl.textContent = 'web3.modules 存在!';
                        
                        const modulesDetailsEl = document.createElement('div');
                        modulesDetailsEl.className = 'module-details';
                        
                        try {
                            // 尝试显示 modules 内容
                            const modulesInfo = JSON.stringify(web3.modules, null, 2);
                            modulesDetailsEl.textContent = modulesInfo;
                        } catch (e) {
                            modulesDetailsEl.textContent = 'modules 对象序列化错误: ' + e.message;
                        }
                        
                        modulesCard.appendChild(modulesNameEl);
                        modulesCard.appendChild(modulesDetailsEl);
                        container.insertBefore(modulesCard, container.firstChild);
                    } catch (e) {
                        console.error('显示 web3.modules 时出错:', e);
                    }
                }
                
                container.style.display = 'block';
            } catch (error) {
                console.error('显示 Web3 组件失败:', error);
                showError('显示 Web3 组件失败: ' + error.message);
                showDebugInfo('显示 Web3 组件错误: ' + error.message);
                document.getElementById('noModulesMessage').style.display = 'block';
            } finally {
                document.getElementById('loadingIndicator').style.display = 'none';
            }
        }
        
        // 显示调试信息
        function showDebugInfo(message) {
            const debugEl = document.getElementById('debugInfo');
            debugEl.style.display = 'block';
            debugEl.textContent += new Date().toLocaleTimeString() + ': ' + message + '\n';
            // 自动滚动到底部
            debugEl.scrollTop = debugEl.scrollHeight;
        }
        
        // 辅助函数：获取网络名称
        function getNetworkName(networkId) {
            const networks = {
                1: '以太坊主网',
                3: 'Ropsten 测试网',
                4: 'Rinkeby 测试网',
                5: 'Goerli 测试网',
                42: 'Kovan 测试网',
                1337: 'Ganache 本地网络',
                11155111: 'Sepolia 测试网'
            };
            return networks[networkId] || '未知网络';
        }
        
        // 辅助函数：格式化地址显示
        function formatAddress(address) {
            return address.substring(0, 6) + '...' + address.substring(address.length - 4);
        }
        
        // 显示错误信息
        function showError(message) {
            const errorContainer = document.getElementById('errorContainer');
            errorContainer.textContent = message;
            errorContainer.style.display = 'block';
            
            // 5秒后自动隐藏错误信息
            setTimeout(() => {
                errorContainer.style.display = 'none';
            }, 5000);
        }
    </script>
</body>
</html>
相关推荐
0x派大星4 小时前
深入解析 Uniswap：自动做市商模型的数学推导与智能合约架构
架构·区块链·智能合约·uniswap
墨夶4 小时前
交易所安全保卫战：从冷钱包到零知识证明，让黑客连边都摸不着！
java·安全·区块链·零知识证明
+电报dapp1294 小时前
波场链DAPP智能合约系统开发：解锁Web3.0时代的价值新范式
大数据·人工智能·web3·去中心化·区块链·智能合约·信任链
子昂Web34 小时前
关于账户抽象 ERC-4337 协议
区块链
无欢以承4 小时前
什么是区块链？从底层原理到实用场景的最强入门指南（含 Web3、DeFi、NFT 全解）
web3·区块链
止观止4 小时前
区块链、比特币与Web3：一文弄懂三者的关系
web3·区块链
黄菊华老师4 小时前
区块链实战：Web3.eth 模块详细展示，探索以太坊区块链交互的核心功能
web3·区块链
沟通qq 8762239655 小时前
永磁同步风力发电机遭遇电网电压骤降时，就像风筝突然遇到强对流天气，搞不好直接“炸机“。这时候低电压穿越（LVRT）策略就是那根救命绳，今天咱们拆解两种实战方案
web3
ZFJ_张福杰6 小时前
【技术深度】钱包安全威胁模型 + 防御蓝图
安全·区块链·钱包
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03Linux下V2Ray安装配置指南04在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）05Neo4j（一） - Neo4j安装教程（Windows）06【AutoGLM部署】本地私有化部署AI手机Agent07Cursor 又偷偷更新，这个功能太实用：Visual Editor for Cursor Browser08安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）09Open-AutoGLM Windows 安装部署教程10BongoCat - 跨平台键盘猫动画工具