為什么會(huì)有這篇文章

一年前從青島離職回老家工作，來(lái)到這家公司的時(shí)候，這邊的前端對(duì)于區(qū)塊鏈基本說(shuō)0了解，很多時(shí)候基本屬于東拼西湊，來(lái)去獲取賬戶，剩下的全靠后端，去中心化可以說(shuō)完全沒(méi)有接觸過(guò)。

ps: 這篇文章并不會(huì)給你帶來(lái)技能提升，只能說(shuō)在未了解該類(lèi)型項(xiàng)目時(shí)，讓你以最快的速度能先項(xiàng)目實(shí)際開(kāi)發(fā)中入手該類(lèi)型項(xiàng)目

正文開(kāi)始

1. 首先準(zhǔn)備基礎(chǔ)環(huán)境 以谷歌瀏覽器 為例 我們需要下載一個(gè)擴(kuò)展程序 meatMask 自己注冊(cè)個(gè)錢(qián)包地址
2. 項(xiàng)目中安裝web3依賴(lài) npm install web3

從現(xiàn)在開(kāi)始正式開(kāi)始與web3開(kāi)始

檢測(cè)環(huán)境

//檢測(cè)當(dāng)前瀏覽器是否以太坊兼容，并進(jìn)行相應(yīng)的處理

if (typeof window.ethereum === 'undefined') {
// 瀏覽器不存在以太坊兼容 看你怎么花式提示用戶了
}else{
// 哎~ 檢測(cè)到瀏覽器中 存在以太坊環(huán)境了  接下來(lái)就可以來(lái)去獲取錢(qián)包地址了
}

獲取賬戶

當(dāng)我們檢測(cè)到瀏覽器中存以太坊環(huán)境，那么我們就可以進(jìn)行下一步，獲取到用戶的錢(qián)包賬戶了

window.ethereum.request({ method: 'eth_requestAccounts' })
          //如果用戶拒絕了登錄請(qǐng)求
          .catch(reason => {
            if (reason === 'User rejected provider access') {
              // 用戶不想登錄，你看該怎么辦？
            } else {
              // 本不該執(zhí)行到這里，但是真到這里了，說(shuō)明發(fā)生了意外
            }
          })
          //如果用戶同意了登錄請(qǐng)求，你就可以拿到用戶的賬號(hào)
          .then(accounts => {
            //一旦獲取了用戶賬號(hào)，你就可以簽名交易
            // 這里獲取到的accounts 是個(gè)數(shù)組 正常取0即可
          })

簽名授權(quán)

這時(shí)候就有人會(huì)問(wèn)了 為什么簽名授權(quán)放在這里，或者說(shuō)簽名授權(quán)是啥？
這時(shí)候扯入一個(gè)知識(shí)點(diǎn) 叫做觀察錢(qián)包，現(xiàn)在的錢(qián)包app 都支持觀察錢(qián)包 觀察錢(qián)包只需要錢(qián)包地址即可添加到錢(qián)包，這時(shí)候如果通過(guò)上方獲取賬戶 同樣可以正常獲取到觀察錢(qián)包賬戶，如果和合約交互那么可以不用考慮，如果你哪里錢(qián)包賬戶用作跟后端交互 那么這里就有必要開(kāi)啟簽名授權(quán)，簽名授權(quán)可以禁止觀察錢(qián)包操作。具體樣子可以自己寫(xiě)demo試一下，我懶得寫(xiě)

//簽名授權(quán)的前提是 獲取到用戶賬戶
               let web3 = new Web3(window.ethereum);//創(chuàng)建web3
              web3.eth.personal.sign(web3.utils.fromUtf8('授權(quán)提示語(yǔ)'),'錢(qián)包賬戶', (err, res) =>{

               if (res != null && res !== undefined && res !== '') {
               //簽名通過(guò)，做你自己的事 比如把錢(qián)包賬戶給跑出來(lái)
               } else {
               // 用戶拒絕簽名 ，提示該提示的
               }
             })
           }

到現(xiàn)在為止,你已經(jīng)可以獲取到用戶的錢(qián)包賬戶了，可以開(kāi)啟下一步新的功能，整個(gè)web3實(shí)戰(zhàn)的1/3基礎(chǔ)你已經(jīng)學(xué)會(huì)了哦~

監(jiān)控鏈信息變更

哎 上文中不是說(shuō)已經(jīng)可以獲取到錢(qián)包賬戶了么 ，那這個(gè)又是啥那？

先貼代碼

// 帳戶更改事件
//當(dāng)你錢(qián)包賬戶切換的時(shí)候就會(huì)觸發(fā)這個(gè)
    window.ethereum.on('accountsChanged', (accounts) => {
     // 如果返回?cái)?shù)組中的第一個(gè)帳戶不是您期望的帳戶，您應(yīng)該通知用戶！將來(lái)，accounts 數(shù)組可能包含多個(gè)帳戶。但是，數(shù)組中的第一個(gè)帳戶將繼續(xù)被視為用戶的“選定”帳戶。
      console.log(accounts)
   })

   // 鏈改變事件
   //當(dāng)你鏈切換的時(shí)候就會(huì)觸發(fā)這個(gè)
    window.ethereum.on('chainChanged', (chainId) => {
      console.log(chainId)
   })

我相信每個(gè)玩鏈的玩家，手里應(yīng)該不止一個(gè)錢(qián)包賬戶，不止一個(gè)鏈有錢(qián)包賬戶，
那么如果他們?cè)谀愕膁app中進(jìn)行切換錢(qián)包或者切換鏈，那你是不是要做操作，哎！ 這個(gè)監(jiān)聽(tīng)就是為了做這個(gè)！??！文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-455489.html

到了這里，關(guān)于從實(shí)戰(zhàn)開(kāi)始了解Web3（一）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！