用 ethers.js 打造以太坊去中心化网页钱包：创建钱包账号完全指南

什么是去中心化网页钱包？

在真正动手写代码之前，先统一概念：

去中心化 = 私钥永远只存在于用户的浏览器或本地设备，开发者后台无法触达；
网页钱包 = 用浏览器即可打开的轻量级钱包，不需要额外安装浏览器插件或手机 App；
适用性 = 同理可移植到桌面端、移动端钱包，只是打包方式不同。

与之对立的是中心化钱包（交易所钱包），用户的私钥由托管方统一保存。

钱包需要实现的核心功能

| 核心关键词：钱包功能、账号管理、余额查询、转账、Token 交易

一个能真正投入日常使用的以太坊网页钱包，至少需要以下三大模块：

账号管理
- 创建新账号（随机私钥 / 助记词）
- 导入已有账号（私钥导入 / Keystore 导入 / 助记词导入）
信息展示
- 显示 ETH 主币余额
- 显示 ERC-20 Token 余额
资金操作
- 发送 ETH
- 发送任意的 ERC-20 Token

以上功能我们将全程使用 ethers.js 实现。ethers.js 除了提供与链交互的常用接口，还对 BIP-32 / 39 / 44 标准进行了开箱即用的封装，大大缩短开发周期。

创建账号的两种常用思路

方法一：随机私钥直接创建

关键词：随机私钥、ethers.utils.randomBytes、ethers.Wallet

核心代码示例：

// 1. 生成长度为 32 字节的随机数
const privateKeyBytes = ethers.utils.randomBytes(32);

// 2. 直接实例化钱包
const wallet = new ethers.Wallet(privateKeyBytes);

console.log('钱包地址：', wallet.address);
console.log('私钥（hex）：', wallet.privateKey);

页面对应的最小可用 UI 可以是：

<input id="privateKeyHex" placeholder="粘贴私钥" />
<button id="loadBtn">加载私钥</button>

JavaScript 片段：

document.getElementById('loadBtn').addEventListener('click', () => {
  let key = document.getElementById('privateKeyHex').value;
  if (!key.startsWith('0x')) key = '0x' + key;
  const wallet = new ethers.Wallet(key);
  alert(`已导入账号：${wallet.address}`);
});

👉 实战范例与完整代码可在线体验，适合零基础快速跑通

方法二：用助记词生成 HD 钱包

关键词：助记词、BIP-39、BIP-44、HD钱包、钱包派生路径

流程概览：

生成 16 字节（128 位）熵值
熵值 → 助记词
助记词 → 种子 → HD 节点
按指定派生路径 <m/44'/60'/0'/0/0> 生成首地址

ethers.js 一行搞定：

// 创建助记词
const entropy = ethers.utils.randomBytes(16);
const mnemonic = ethers.utils.HDNode.entropyToMnemonic(entropy);
console.log('请抄写助记词：', mnemonic);

// 创建钱包
const wallet = ethers.Wallet.fromMnemonic(mnemonic, "m/44'/60'/0'/0/0");
console.log('首地址：', wallet.address);

前端助记词导入模板：

<input id="mnemonic" placeholder="助记词，空格分隔" />
<input id="path" value="m/44'/60'/0'/0/0" />
<button id="deriveBtn">推导地址</button>

JavaScript 片段：

document.getElementById('deriveBtn').addEventListener('click', () => {
  const phrase = document.getElementById('mnemonic').value;
  const path = document.getElementById('path').value;
  if (!ethers.utils.HDNode.isValidMnemonic(phrase)) {
    alert('助记词不合法');
    return;
  }
  const wallet = ethers.Wallet.fromMnemonic(phrase, path);
  alert(`地址：${wallet.address}`);
});

完成钱包创建后，你可以继续为它添加导出 Keystore、发送交易、导入 Token 等进阶功能。
👉 点击获取完整实战案例，跟着示例仓库直接部署

FAQ：你最可能遇到的 5 个问题

Q1：ethers.js 与 web3.js 有什么区别？
A：两者都能与链交互，但 ethers.js 体积更小、API 设计更函数式，且默认打包支持 BIP-39，适合网页钱包场景。

Q2：生成的助记词是否需要加密保存？
A：强烈建议用用户密码 + HD 派生参数进行二次加密，或提示用户抄写后离线保存，切勿纯文本上传云端。

Q3：能一次生成多个地址吗？
A：可以。只需继续递增派生路径最后一个索引，例如 m/44'/60'/0'/0/1、m/44'/60'/0'/0/2……

Q4：怎么防止用户复制到错误私钥？
A：输入框加入校验，长度必须为 66 hex 字符（包含 0x 前缀），否则红框提示。

Q5：浏览器环境 Cryptographically Secure PRNG 够安全吗？
A：Chrome、Firefox、Edge 等现代浏览器已内置 CSPRNG，满足以太坊地址生成所需的随机强度。

小结与下一步

通过 随机私钥 或 助记词 两种方式，我们就能完成网页钱包的账号创建。至此你已经掌握了：

去中心化网页钱包核心概念
ethers.js 创建账号最小可运行代码
前端输入交互示例

后三篇文章会逐步补齐：

账号 Keystore 的导入与导出
读取余额 + 签名交易
发送任意 ERC-20 Token

快去动手试试吧！