關(guān)于web3的介紹大家可以自己搜索相關(guān)的文章去了解，本文主要是記錄作為一個(gè)小白，從0開始學(xué)習(xí)，到開發(fā)完成一個(gè)簡易的仿opensea網(wǎng)站的歷程。

由于這次項(xiàng)目使用的是以太坊的鏈，所以部分相關(guān)資料鏈接都是以太坊相關(guān)的網(wǎng)址，同時(shí)前端與區(qū)塊鏈交互使用的是metamask插件，所以前端js調(diào)用智能合約時(shí)使用的是Ethers.js

1:web3開發(fā)與以往的網(wǎng)站開發(fā)有什么區(qū)別

作為一名網(wǎng)站開發(fā)人員，我們熟知的開發(fā)內(nèi)容分為2個(gè)主要部分：由邏輯處理，數(shù)據(jù)讀寫構(gòu)成的后端，與數(shù)據(jù)展示，操作交互構(gòu)成的前端。如果接觸過前后端分離開發(fā)，我們能簡單的認(rèn)為，后端將邏輯處理與數(shù)據(jù)讀寫封裝起來，只提供給前端對應(yīng)的接口。

web3與以往的這種模式相比，多了一個(gè)智能合約的部分，智能合約也可以進(jìn)行邏輯處理與數(shù)據(jù)讀寫，但是數(shù)據(jù)讀寫的目標(biāo)由我們自己的服務(wù)器換成了在區(qū)塊鏈上。

2:關(guān)于web3的一些常識

以太坊賬戶的介紹

https://ethereum.org/zh/developers/docs/accounts/

想要與區(qū)塊鏈進(jìn)行交互，首先我們要有自己的賬戶，使用metamask我們可以輕松申請到一個(gè)免費(fèi)賬戶，賬戶的錢包地址，密鑰，助記詞需要保存好。

手續(xù)費(fèi)

https://ethereum.org/zh/developers/docs/gas/

上面的有提到，世界上所有人的賬號使用的都是同一條區(qū)塊鏈，所以區(qū)塊鏈為了保證穩(wěn)定性，每一次用戶與區(qū)塊鏈交互時(shí)都會(huì)收取一筆手續(xù)費(fèi)。這筆手續(xù)費(fèi)你愿意提供的越高，就會(huì)有更多的礦工愿意幫你更快將你這次的操作更內(nèi)容提交到鏈上。

正式鏈與測試鏈

https://ethereum.org/zh/developers/docs/networks/

在開發(fā)中我們可能會(huì)經(jīng)常試錯(cuò)來調(diào)試或者頻繁的測試，每一次與區(qū)塊鏈的交互都會(huì)觸發(fā)手續(xù)費(fèi)的消耗，錢包內(nèi)的錢目前除了轉(zhuǎn)贈(zèng)之外，或者靠當(dāng)?shù)V工的獎(jiǎng)勵(lì)一點(diǎn)一點(diǎn)積攢。使用測試鏈可以使用官方提供的水龍頭領(lǐng)取測試鏈的錢來進(jìn)行各類開發(fā)的支持或測試的支持。

goerli水龍頭地址

https://goerlifaucet.com/

3:智能合約開發(fā)

智能合約介紹

https://ethereum.org/zh/developers/docs/smart-contracts/

智能合約由我們編寫好的邏輯處理，數(shù)據(jù)讀寫功能組成，發(fā)布到鏈上后，如果調(diào)用的合約方法涉及到數(shù)據(jù)寫入或變更，則此次調(diào)用需要用戶支付手續(xù)費(fèi)，如果只是讀取合約已存的數(shù)據(jù)，則不會(huì)觸發(fā)手續(xù)費(fèi)支付。合約常用的功能有eth轉(zhuǎn)贈(zèng)，token構(gòu)筑，轉(zhuǎn)移等。

學(xué)習(xí)開發(fā)智能合約

本次項(xiàng)目開發(fā)智能合約時(shí)選擇使用的語言是solidity

solidity文檔地址

https://learnblockchain.cn/docs/solidity/

簡單的單文件合約可以直接粘貼到REMIX上檢查是否有錯(cuò)誤及發(fā)布與測試

https://remix.ethereum.org/#optimize=false&runs=200&evmVersion=null&version=soljson-v0.8.7+commit.e28d00a7.js

本次項(xiàng)目的智能合約涉及到token構(gòu)筑，轉(zhuǎn)移，以及復(fù)雜的eth轉(zhuǎn)贈(zèng)金額計(jì)算，所以在了解如何使用solidity開發(fā)后，選擇使用openzeppelin框架進(jìn)行開發(fā)，使用框架的好處就是框架幫我們封裝了很多要用到的功能，使開發(fā)更便捷。

openzeppelin文檔地址

https://docs.openzeppelin.com/contracts/4.x/

下面為搭建一個(gè)智能合約框架的操作步驟：

新建一個(gè)項(xiàng)目文件夾

npm init -y

npm install --save-dev hardhat

npx hardhat

-Create a JavaScript project

npm install --save-dev @nomicfoundation/hardhat-toolbox

npm install --save-dev @openzeppelin/contracts

npm install --save-dev @openzeppelin/contracts-upgradeable

npm install --save-dev @openzeppelin/hardhat-upgrades

npm install --save-dev @nomiclabs/hardhat-ethers

npm install --save-dev @nomiclabs/hardhat-etherscan

npm install --save-dev chai

npm install --save-dev @openzeppelin/test-helpers

Vi hardhat.config.js

require("@nomiclabs/hardhat-ethers");

require("@openzeppelin/hardhat-upgrades");

require("@nomiclabs/hardhat-etherscan");

之后我們就可以在contracts目錄下創(chuàng)建自己的合約文件了，例如：Demo.sol，需要使用框架封裝的類時(shí)使用import引用就可以了。

編譯

完成合約文件的編寫后，執(zhí)行npx hardhat compile進(jìn)行編譯，此編譯過程會(huì)檢查代碼的基礎(chǔ)錯(cuò)誤，成功后在scripts目錄下創(chuàng)建該合約對應(yīng)的Demo.deploy.js，該文件可參考框架搭建時(shí)自動(dòng)生成的deploy.js，替換const CONTRACT = await hre.ethers.getContractFactory("Demo");

部署

在部署前，我們還需要編輯hardhat.config.js

networks里主要設(shè)置我們要發(fā)的區(qū)塊鏈的網(wǎng)絡(luò)，如圖我是要部署到goerli測試鏈上，accounts里填寫你要發(fā)布合約的錢包私鑰，因?yàn)椴渴鸷霞s要收取手續(xù)費(fèi)，請確保該錢包有足夠的余額。url是通過alchemy注冊賬號來獲取的，復(fù)制HTTPS內(nèi)的KEY粘貼到url里。

https://www.alchemy.com/?a=goerli_faucet

接下來的etherscan?apiKey?goerli，可以在以太坊交易所注冊賬戶創(chuàng)建一個(gè)免費(fèi)的專屬KEY

由于網(wǎng)絡(luò)問題可能會(huì)導(dǎo)致發(fā)布失敗，所以我在此文件的后面加上了代理配置，可以根據(jù)自己代理端口進(jìn)行修改。

npx hardhat run scripts/Demo.deploy.js --network goerli

運(yùn)行該指令即可將智能合約發(fā)布到鏈上，如果失敗會(huì)有具體的報(bào)錯(cuò)信息，一般要么是網(wǎng)絡(luò)問題，要么是錢包余額不夠支付手續(xù)費(fèi)。成功后會(huì)返回該合約在鏈上的地址信息。

4:合約調(diào)用

ethers.js文檔

https://learnblockchain.cn/ethers_v5/

加載ethers.js組件

<script src="https://cdn.ethers.io/lib/ethers-5.4.umd.min.js"></script>

合約發(fā)布后，我們可以通過合約的地址去交易所查看詳細(xì)內(nèi)容，例如交易記錄，token交易記錄，合約源代碼（需對此合約認(rèn)證開發(fā)者）等。

在前端js調(diào)用過程中，我們主要要使用到合約的地址與ABI，建議將此寫到前端頁面上，方便直接使用。以下內(nèi)容為常用的一些ethers.js的方法。

獲取當(dāng)前以太幣轉(zhuǎn)美元的匯率（ethApiKey為上面自己注冊的以太坊交易所KEY）

觸發(fā)當(dāng)前metamask登陸的用戶授權(quán)網(wǎng)站連接，同意即可獲得登陸者相關(guān)信息，常用于第三方登陸。

獲取指定錢包地址的余額

當(dāng)前用戶調(diào)取智能合約的某個(gè)方法，不涉及金額的發(fā)送。（nftContractAddress為合約地址，nftContractAbi為合約的ABI，listingId為此實(shí)例合約必要接收的參數(shù)）

當(dāng)前用戶調(diào)取智能合約的某個(gè)方法，并包含金額的發(fā)送。（value: ethers.utils.parseEther(price.toString())此為要發(fā)送的eth的金額數(shù)，catch內(nèi)的res.error.code ==='-32000'為當(dāng)前用戶的金額不足支付金額及手續(xù)費(fèi)時(shí)的返回狀態(tài)）

本次智能合約的個(gè)人開發(fā)總結(jié)個(gè)人認(rèn)為還不夠細(xì)致，因?yàn)橛行﹩栴}沒法記錄在此處，畢竟項(xiàng)目場景不一樣，遇到的問題也不可能一致。我只能將大致的流程與一些需要注意的點(diǎn)寫下來，實(shí)際在開發(fā)中作為小白在sol文件的編寫會(huì)遇到更多的疑問，智能依靠各類搜索引擎來完善自身的代碼，但一定要清楚自己的功能邏輯，確保合約沒有明顯的漏洞。