前端：從使用者那裡獲取輸入並構建要傳送到智慧合約的請求。 錢包：簽署交易並將其傳送到網路。 智慧合約：編寫dapp的業務邏輯。
web3.js的工作方式
let web3 = new Web3(Web3.givenProvider || 'ws://some.local-or-remote.node:8546');快速瀏覽API
web3.eth：允許與以太坊區塊鏈和以太坊智慧合約進行互動。 web3.bzz：允許與分散檔案儲存Swarm進行互動。 web3.shh：允許與Whisper協議進行互動以進行廣播。 web3.utils：為以太坊dapp提供實用程式功能，例如將字串轉換為十六進位制文字，將以太值轉換為Wei。 web3.*.net：允許與以太坊節點的網路屬性（例如網路ID或對等體計數）進行互動。
使用web3.js構建您的Dapp
1.構建合同並將其部署到網路
> mkdir greeting>cd greeting> truffle init
npm install -g truffle> npm install -g solc// check the installed version> solc --version
> truffle create contract Greeting複製並貼上以下程式碼：
// SPDX-License-Identifier: MITpragma solidity >=0.4.22 <0.8.0;contract Greeting {stringpublic greeting = "hello";functionsayHello() externalviewreturns (string memory) {return greeting;}functionupdateGreeting(string calldata _greeting) external{greeting = _greeting;}}
我們只需要2_deploy_greeting.js在migrations資料夾下新增一個遷移檔案：
const Greeting = artifacts.require("Greeting");module.exports = function (deployer) {deployer.deploy(Greeting);};
> truffle compile> truffle migrate
2.將前端與智慧合約連線
設定前端
> mkdir client>cd client> npm init -y> touch index.html
安裝web3.js和lite-server依賴項：
> npm i web3 --save> npm i lite-server --save-dev //for running a development server
<scripttype="text/javascript"src="node_modules/web3/dist/web3.min.js"></script><scripttype="text/javascript"src="src/utils.js"></script><scripttype="text/javascript"src="src/index.js"></script>
獲取一個web3例項
一旦將web3.js作為專案中的依賴項，您所需要做的就是使用提供者的例項例項化web3物件，以便享受web3所提供的一切。
我們將使用window.ethereum注入到瀏覽器中的MetaMask提供程式，並按照MetaMask文件window.ethereum.request中的說明，請求使用者使用來訪問其帳戶。
開啟utils.js檔案並新增以下功能：
const getWeb3 = () => {returnnewPromise((resolve, reject) => {window.addEventListener("load", async () => {if (window.ethereum) {const web3 = new Web3(window.ethereum);try {// ask user permission to access his accountsawaitwindow.ethereum.request({ method: "eth_requestAccounts" });resolve(web3);} catch (error) {reject(error);}} else {reject("Must install MetaMask");}});});};
建立合同例項
> npm i jquery首先，我們需要使用來獲取與MetaMask連線的網路的ID web3.eth.net.getId()。
注意：假設您已經配置了MetaMask以使用Ganache。如果不確定如何操作，可以按照本指南進行操作。
接下來，我們將使用返回的ID從Greeting.json檔案中獲取合同的地址，該檔案還將為我們提供合同ABI並使用以下命令建立合同的例項web3.eth.Contract：
3.與智慧合約互動
建立合同例項後，就可以開始使用呼叫文件的方法myContract.methods.myMethod([arguments])，如docs中所述。
如果要呼叫的函式是純函式或只讀函式，則需要使用：
myContract.methods.myMethod([arguments]).call()如果要呼叫的函式要修改狀態（又稱事務），則需要使用：
myContract.methods.myMethod([arguments]).send()const displayGreeting = async (greeting, contract) => {greeting = await contract.methods.sayHello().call();$("h2").html(greeting);};const updateGreeting = (greeting, contract, accounts) => {let input;$("#input").on("change", (e) => {input = e.target.value;});$("#form").on("submit", async (e) => {e.preventDefault();await contract.methods.updateGreeting(input).send({ from: accounts[0], gas: 40000 });displayGreeting(greeting, contract);});};asyncfunctiongreetingApp() {const web3 = await getWeb3();const accounts = await web3.eth.getAccounts();const contract = await getContract(web3);let greeting;displayGreeting(greeting, contract);updateGreeting(greeting, contract, accounts);}greetingApp();
作者：鏈三豐，來源：區塊鏈研究實驗室
