Web3.js的使用與實(shí)踐/Contents目錄010203Web3.js概述Web3.js安裝與測(cè)試使用Web3.js訪問(wèn)智能合約040506瀏覽器頁(yè)面中的合約交互項(xiàng)目實(shí)踐項(xiàng)目小結(jié)Web3.js概述01PARTWeb3.js定義Web3.js模塊Web3.js是一個(gè)用于以太坊應(yīng)用開(kāi)發(fā)的JavaScript庫(kù)，允許前端應(yīng)用程序與以太坊區(qū)塊鏈進(jìn)行交互，包括調(diào)用智能合約、發(fā)送交易、查詢區(qū)塊信息等。Web3.js包含多個(gè)模塊，如web3.eth用于與以太坊區(qū)塊鏈和智能合約交互，web3.utils提供數(shù)據(jù)轉(zhuǎn)換和格式化功能，web3.shh用于Whisper協(xié)議通信，web3.bzz用于與Swarm交互。Web3.js簡(jiǎn)介Web3.js安裝與測(cè)試02PART在項(xiàng)目目錄下，通過(guò)npm命令npminstallweb3安裝Web3.js。安裝完成后，項(xiàng)目目錄下會(huì)生成node_modules目錄，其中包含Web3.js及其依賴包。安裝步驟使用npmlist命令查看已安裝的軟件包及其版本號(hào)，確認(rèn)Web3.js安裝成功。驗(yàn)證安裝0102Web3.js安裝01編寫(xiě)一個(gè)簡(jiǎn)單的JavaScript腳本testweb3.js，使用Web3.js連接Ganache私有測(cè)試鏈，獲取賬戶列表并打印。測(cè)試腳本編寫(xiě)02在終端中運(yùn)行nodetestweb3.js，驗(yàn)證Web3.js是否能正常連接Ganache并獲取賬戶信息。測(cè)試腳本執(zhí)行Web3.js測(cè)試使用Web3.js訪問(wèn)智能合約03PARTABI接口獲取ABI是智能合約的接口描述，可通過(guò)Remix編譯、Truffle編譯或使用solcjs編譯器生成。01合約實(shí)例創(chuàng)建使用合約的ABI和部署地址，通過(guò)web3.eth.Contract方法創(chuàng)建合約實(shí)例，然后調(diào)用合約中的方法。02調(diào)用合約方法使用call方法調(diào)用合約中的只讀函數(shù)，使用send方法調(diào)用合約中的狀態(tài)更改函數(shù)。03通過(guò)腳本訪問(wèn)智能合約在合約中觸發(fā)事件，通過(guò)監(jiān)聽(tīng)腳本接收并打印事件中的參數(shù)。事件觸發(fā)與接收02編寫(xiě)JavaScript腳本，使用web3.eth.Contract().events模塊監(jiān)聽(tīng)合約中的事件，并通過(guò)回調(diào)函數(shù)處理事件數(shù)據(jù)。事件監(jiān)聽(tīng)腳本編寫(xiě)01監(jiān)聽(tīng)合約中的事件使用web3.eth.sendTransaction函數(shù)，指定轉(zhuǎn)出賬戶、轉(zhuǎn)入賬戶和轉(zhuǎn)賬金額，完成賬戶之間的轉(zhuǎn)賬。向外部賬戶轉(zhuǎn)賬可通過(guò)web3.eth.sendTransaction函數(shù)向合約賬戶轉(zhuǎn)賬，或調(diào)用合約中的payable修飾的函數(shù)進(jìn)行轉(zhuǎn)賬。向合約賬戶轉(zhuǎn)賬通過(guò)Web3.js進(jìn)行轉(zhuǎn)賬瀏覽器頁(yè)面中的合約交互04PART使用VSCode快速創(chuàng)建HTML文件，搭建頁(yè)面的基本框架。HTML框架搭建在HTML文件中通過(guò)<script>標(biāo)簽引入Web3.js庫(kù)，以便在頁(yè)面中使用Web3.js。Web3.js引入HTML頁(yè)面創(chuàng)建在HTML頁(yè)面中，通過(guò)合約的ABI和部署地址初始化合約實(shí)例。通過(guò)按鈕、輸入框等控件，調(diào)用合約中的方法，實(shí)現(xiàn)頁(yè)面與智能合約的交互。合約實(shí)例初始化頁(yè)面控件與合約交互合約交互實(shí)現(xiàn)頁(yè)面展示使用VSCode的“OpenInDefaultBrowser”插件，在瀏覽器中打開(kāi)HTML頁(yè)面，查看頁(yè)面效果。交互測(cè)試在頁(yè)面中進(jìn)行投票、查詢得票數(shù)、猜數(shù)等操作，測(cè)試頁(yè)面與智能合約的交互功能。頁(yè)面展示與測(cè)試項(xiàng)目實(shí)踐05PART編寫(xiě)投票合約及與合約交互的HTML頁(yè)面，實(shí)現(xiàn)投票、查詢得票數(shù)等功能。任務(wù)目的創(chuàng)建Truffle項(xiàng)目，編寫(xiě)投票合約，部署合約到Ganache，編寫(xiě)HTML頁(yè)面實(shí)現(xiàn)與合約的交互。任務(wù)步驟投票合約HTML頁(yè)面開(kāi)發(fā)任務(wù)目的編寫(xiě)猜數(shù)游戲合約及與合約交互的HTML頁(yè)面，實(shí)現(xiàn)開(kāi)始游戲、猜數(shù)、查看目標(biāo)數(shù)等功能。任務(wù)步驟創(chuàng)建Truffle項(xiàng)目，編寫(xiě)猜數(shù)游戲合約，部署合約到Ganache，編寫(xiě)HTML頁(yè)面實(shí)現(xiàn)與合約的交互。0102猜數(shù)游戲HTML頁(yè)面開(kāi)發(fā)項(xiàng)目小結(jié)06PART開(kāi)發(fā)流程回顧回顧Web3.js開(kāi)發(fā)庫(kù)的使用方法，包括合約部署、前端頁(yè)面編寫(xiě)、Web3.js庫(kù)函數(shù)調(diào)用等流程。應(yīng)用案例分析分析投票合約、猜數(shù)游戲等應(yīng)用案例，總結(jié)Web3.js在去中心化應(yīng)用開(kāi)發(fā)中的應(yīng)用。We