博主介绍：黄菊华老师《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>
