区块链实战：Web3 钱包连接实例

黄菊华老师

17095人浏览 · 2025-09-28 11:39:53

黄菊华老师 · 2025-09-28 11:39:53 发布

博主介绍：黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者，CSDN博客专家，在线教育专家，CSDN钻石讲师；专注网站制作、小程序开发、软件开发和大学生毕业设计教育、辅导。
最近致力于区块链的研究，涉及metamask钱包、ganache、web3、支持多链的钱包应用、去中心化应用（DApp）、去中心化交易所（DEX）、DeFi协议前端、智能合约部署和管理工具、区块和交易查询系统等！！！

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

效果图

基础环境

连接的本地的谷歌浏览上的metamask钱包、用的最新的版本13.3

导入的是测试的模拟账号

数据来源于ganche

代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web3 连接示例</title>
    <script src="https://cdn.jsdelivr.net/npm/web3@1.8.2/dist/web3.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            text-align: center;
        }
        .container {
            background-color: #f5f5f5;
            padding: 30px;
            border-radius: 10px;
            margin-top: 50px;
        }
        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }
        button:hover {
            background-color: #45a049;
        }
        .wallet-info {
            margin-top: 30px;
            text-align: left;
        }
        .hidden {
            display: none;
        }
        .truncate {
            display: inline-block;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Web3 钱包连接</h1>
        
        <div id="not-installed">
            <p>未检测到 MetaMask 钱包。请安装 MetaMask 浏览器插件后刷新页面。</p>
            <a href="https://metamask.io/download.html" target="_blank">下载 MetaMask</a>
        </div>
        
        <div id="installed" class="hidden">
            <p>已检测到 MetaMask 钱包</p>
            <button id="connect-btn">连接钱包</button>
        </div>
        
        <div id="connected" class="wallet-info hidden">
            <h3>钱包信息</h3>
            <p><strong>账户地址:</strong> <span id="account" class="truncate"></span></p>
            <p><strong>余额:</strong> <span id="balance"></span> ETH</p>
            <p><strong>网络:</strong> <span id="network"></span></p>
            <button id="disconnect-btn">断开连接</button>
        </div>
    </div>

    <script>
        // 检查 MetaMask 是否已安装
        window.addEventListener('load', async () => {
            if (window.ethereum) {
                document.getElementById('installed').classList.remove('hidden');
                document.getElementById('not-installed').classList.add('hidden');
                
                // 如果用户已经授权，自动连接
                const accounts = await ethereum.request({ method: 'eth_accounts' }).catch(() => []);
                if (accounts.length > 0) {
                    connectWallet();
                }
            }
        });

        // 连接钱包按钮点击事件
        document.getElementById('connect-btn').addEventListener('click', connectWallet);
        // 断开连接按钮点击事件
        document.getElementById('disconnect-btn').addEventListener('click', disconnectWallet);

        // 连接钱包函数
        async function connectWallet() {
            try {
                // 请求用户授权
                const accounts = await ethereum.request({ method: 'eth_requestAccounts' });
                const account = accounts[0];
                
                // 创建 Web3 实例
                const web3 = new Web3(window.ethereum);
                
                // 获取余额
                const balanceWei = await web3.eth.getBalance(account);
                const balanceEth = web3.utils.fromWei(balanceWei, 'ether');
                
                // 获取网络信息
                const networkId = await web3.eth.net.getId();
                let networkName;
                switch(networkId) {
                    case 1: networkName = '主网'; break;
                    case 3: networkName = 'Ropsten 测试网'; break;
                    case 4: networkName = 'Rinkeby 测试网'; break;
                    case 5: networkName = 'Goerli 测试网'; break;
                    case 10: networkName = 'Optimism'; break;
                    case 56: networkName = 'BSC 主网'; break;
                    case 137: networkName = 'Polygon 主网'; break;
                    case 250: networkName = 'Fantom 主网'; break;
                    case 1337: networkName = '本地开发网络'; break;
                    default: networkName = '未知网络 (' + networkId + ')';
                }
                
                // 显示钱包信息
                document.getElementById('account').textContent = account;
                document.getElementById('balance').textContent = balanceEth;
                document.getElementById('network').textContent = networkName;
                
                document.getElementById('installed').classList.add('hidden');
                document.getElementById('connected').classList.remove('hidden');
                
                // 监听账户变化
                ethereum.on('accountsChanged', (accounts) => {
                    if (accounts.length > 0) {
                        window.location.reload();
                    } else {
                        document.getElementById('connected').classList.add('hidden');
                        document.getElementById('installed').classList.remove('hidden');
                    }
                });
                
                // 监听网络变化
                ethereum.on('chainChanged', () => {
                    window.location.reload();
                });
                
            } catch (error) {
                console.error('连接钱包时出错:', error);
                alert('连接钱包失败，请稍后再试。');
            }
        }

        // 断开连接函数
        function disconnectWallet() {
            // MetaMask 没有直接的断开连接 API，我们通过刷新页面并清除状态来实现
            document.getElementById('connected').classList.add('hidden');
            document.getElementById('installed').classList.remove('hidden');
        }
    </script>
</body>
</html>