JavaScript 應用程式介面程式庫

若要讓 Web 應用程式與以太坊區塊鏈互動 (即讀取區塊鏈資料和/或將交易傳送到網路)，它必須連線到以太坊節點。

為此，每個以太坊用戶端都會實作 JSON-RPC 規範，因此應用程式可以仰賴一組統一的方法。

如果你想使用 JavaScript 與以太坊節點連結，可以使用普通 JavaScript，但生態系統中存在幾個便利的程式庫，讓連結變得更加容易。借助這些程式庫，開發者可以編寫直覺的單行方法來初始化與以太坊互動的 JSON-RPC 請求（在後台）。

請注意，自合併之後，執行節點需要兩個相連的以太坊軟體：一個執行用戶端和一個共識用戶端。請確定你的節點包含執行用戶端和共識用戶端。如果您的節點不在本機電腦上 (例如，您的節點在 AWS 執行個體上執行)，請相應地更新教學中的 IP 位址。如需詳細資訊，請參閱我們的執行節點頁面。

先決條件

除了瞭解 JavaScript 之外，瞭解以太坊技術堆疊和以太坊用戶端可能也會有幫助。

為何使用程式庫？

這些程式庫顯著降低了直接和以太坊節點互動的複雜度。它們也提供公用程式函式（例如將 ETH 轉換為 Gwei），因此作為開發者，您可以花費較少時間處理以太坊用戶端的複雜細節，並將更多時間專注於應用程式的獨特功能。

程式庫功能

連線至以太坊節點

使用提供者，這些程式庫讓你能夠連結到以太坊並讀取其資料，無論是透過 JSON-RPC、INFURA、Etherscan、Alchemy 還是 MetaMask。

警告： Web3.js 已於 2025 年 3 月 4 日封存。閱讀公告 (opens in a new tab) 針對新專案，請考慮使用 ethers.js (opens in a new tab) 或 viem (opens in a new tab) 等替代程式庫。

Ethers 範例

1// BrowserProvider 會包裝一個標準的 Web3 提供者，
2// 也就是 MetaMask 注入到每個頁面的 window.ethereum
3const provider = new ethers.BrowserProvider(window.ethereum)
4
5// MetaMask 外掛程式也允許簽署交易
6// 以傳送以太幣並支付費用來變更區塊鏈中的狀態。
7// 為此，我們需要帳戶簽署者…
8const signer = provider.getSigner()

Web3js 範例

1var web3 = new Web3("http://localhost:8545")
2// 或
3var web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"))
4
5// 更改Provider
6web3.setProvider("ws://localhost:8546")
7// 或
8web3.setProvider(new Web3.providers.WebsocketProvider("ws://localhost:8546"))
9
10// 使用 IPC provider 於 node.js
11var net = require("net")
12var web3 = new Web3("/Users/myuser/Library/Ethereum/geth.ipc", net) // mac os path
13// 或
14var web3 = new Web3(
15  new Web3.providers.IpcProvider("/Users/myuser/Library/Ethereum/geth.ipc", net)
16) // mac os 路徑
17// windows 路徑為: "\\\\.\\pipe\\geth.ipc"
18// linux 路徑為: "/users/myuser/.ethereum/geth.ipc"
顯示全部

設定完成後，將能夠在區塊鏈查詢：

區塊編碼
燃料預估值
智慧型合約活動
網路 id
以及更多...

錢包功能

這些程式庫為你提供建立錢包、管理金鑰和簽署交易的功能。

下面是以太幣範例

1// 從助記詞建立錢包執行個體...
2mnemonic =
3  "announce room limb pattern dry unit scale effort smooth jazz weasel alcohol"
4walletMnemonic = Wallet.fromPhrase(mnemonic)
5
6// ...或從私密金鑰
7walletPrivateKey = new Wallet(walletMnemonic.privateKey)
8
9walletMnemonic.address === walletPrivateKey.address
10// true
11
12// 根據 Signer API，以 Promise 形式呈現的地址
13walletMnemonic.getAddress()
14// { Promise: '0x71CB05EE1b1F506fF321Da3dac38f25c0c9ce6E1' }
15
16// 錢包地址也可以同步取得
17walletMnemonic.address
18// '0x71CB05EE1b1F506fF321Da3dac38f25c0c9ce6E1'
19
20// 內部加密元件
21walletMnemonic.privateKey
22// '0x1da6847600b0ee25e9ad9a52abbd786dd2502fa4005dd5af9310b7cc7a3b25db'
23walletMnemonic.publicKey
24// '0x04b9e72dfd423bcf95b3801ac93f4392be5ff22143f9980eb78b3a860c4843bfd04829ae61cdba4b3b1978ac5fc64f5cc2f4350e35a108a9c9a92a81200a60cd64'
25
26// 錢包助記詞
27walletMnemonic.mnemonic
28// {
29//   locale: 'en',
30//   path: 'm/44\'/60\'/0\'/0/0',
31//   phrase: 'announce room limb pattern dry unit scale effort smooth jazz weasel alcohol'
32// }
33
34// 注意：使用私密金鑰建立的錢包並
35//       不會有助記詞 (衍生過程不支援)
36walletPrivateKey.mnemonic
37// null
38
39// 簽署訊息
40walletMnemonic.signMessage("Hello World")
41// { Promise: '0x14280e5885a19f60e536de50097e96e3738c7acae4e9e62d67272d794b8127d31c03d9cd59781d4ee31fb4e1b893bd9b020ec67dfa65cfb51e2bdadbb1de26d91c' }
42
43tx = {
44  to: "0x8ba1f109551bD432803012645Ac136ddd64DBA72",
45  value: utils.parseEther("1.0"),
46}
47
48// 簽署交易
49walletMnemonic.signTransaction(tx)
50// { Promise: '0xf865808080948ba1f109551bd432803012645ac136ddd64dba72880de0b6b3a7640000801ca0918e294306d177ab7bd664f5e141436563854ebe0a3e523b9690b4922bbb52b8a01181612cec9c431c4257a79b8c9f0c980a2c49bb5a0e6ac52949163eeb565dfc' }
51
52// connect 方法會回傳一個
53// 連線至提供者的新錢包執行個體
54wallet = walletMnemonic.connect(provider)
55
56// 查詢網路
57wallet.getBalance()
58// { Promise: { BigNumber: "42" } }
59wallet.getTransactionCount()
60// { Promise: 0 }
61
62// 傳送以太幣
63wallet.sendTransaction(tx)
顯示全部

閱讀完整文件 (opens in a new tab)

設定完成後，你將能夠：

建立帳戶
傳送交易
簽署交易
以及更多...

與智能合約函式互動

JavaScript 用戶端程式庫讓你的應用程式能透過讀取編譯合約的應用程式二進位介面 (ABI) 呼叫智慧型合約函式。

應用程式二進位介面本質上以 JSON 格式解釋了合約的功能，並讓你能夠像使用普通 JavaScript 物件一樣使用合約。

以下為 Solidity 合約範例：

1contract Test {
2    uint a;
3    address d = 0x12345678901234567890123456789012;
4
5    constructor(uint testInt)  { a = testInt;}
6
7    event Event(uint indexed b, bytes32 c);
8
9    event Event2(uint indexed b, bytes32 c);
10
11    function foo(uint b, bytes32 c) returns(address) {
12        Event(b, c);
13        return d;
14    }
15}
顯示全部

將產生以下 JSON：

1[{
2    "type":"constructor",
3    "payable":false,
4    "stateMutability":"nonpayable"
5    "inputs":[{"name":"testInt","type":"uint256"}],
6  },{
7    "type":"function",
8    "name":"foo",
9    "constant":false,
10    "payable":false,
11    "stateMutability":"nonpayable",
12    "inputs":[{"name":"b","type":"uint256"}, {"name":"c","type":"bytes32"}],
13    "outputs":[{"name":"","type":"address"}]
14  },{
15    "type":"event",
16    "name":"Event",
17    "inputs":[{"indexed":true,"name":"b","type":"uint256"}, {"indexed":false,"name":"c","type":"bytes32"}],
18    "anonymous":false
19  },{
20    "type":"event",
21    "name":"Event2",
22    "inputs":[{"indexed":true,"name":"b","type":"uint256"},{"indexed":false,"name":"c","type":"bytes32"}],
23    "anonymous":false
24}]
顯示全部

這意味著你可以：

傳送交易至智慧型合約並執行其方法
呼叫以預估在以太坊虛擬機中執行時方法將花費的燃料
部署合約
和更多相關內容...

工具函式

公用程式功能提供了方便的捷徑，讓以太坊中的構建變得更加容易。

以太幣值預設以 Wei 為單位。 1 以太幣 = 1,000,000,000,000,000,000 WEI – 這意味著你正在處理大量數字！ web3.utils.toWei 會為您將 ether 轉換為 Wei。

在以太幣中，如下所示：

1// 取得帳戶殘額(藉由地址或ENS名)
2balance = await provider.getBalance("ethers.eth")
3// { BigNumber: "2337132817842795605" }
4
5// 因用戶通常想看到以太(ETH)殘額, 通常開發者需
6// 顯示以太(ETH)殘額, 而不是Wei.
7ethers.utils.formatEther(balance)
8// '2.337132817842795605'

可用函式庫

Web3.js - 以太坊 JavaScript API。

Ethers.js - 在 JavaScript 和 TypeScript 中的完整以太坊錢包實作與工具。

The Graph - 一種用於索引以太坊和 IPFS 資料，並使用 GraphQL 查詢資料的協定。

Alchemy SDK - Ethers.js 的包裝器，具備增強的 API。

viem - 以太坊的 TypeScript 介面。

Drift - 具有內建快取、掛鉤和測試模擬的 TypeScript 元程式庫。

JavaScript 應用程式介面程式庫

先決條件

為何使用程式庫？

程式庫功能

連線至以太坊節點

錢包功能

與智能合約函式互動

工具函式

可用函式庫

延伸閱讀

這篇文章對你有幫助嗎？

JavaScript 應用程式介面程式庫

先決條件

為何使用程式庫？

程式庫功能

連線至以太坊節點

錢包功能

與智能合約函式互動

工具函式

可用函式庫

延伸閱讀

相關主題

相關教學

這篇文章對你有幫助嗎？