为什么会有这篇文章
一年前从青岛离职回老家工作，来到这家公司的时候，这边的前端对于区块链基本说0了解，很多时候基本属于东拼西凑，来去获取账户，剩下的全靠后端，去中心化可以说完全没有接触过。
ps: 这篇文章并不会给你带来技能提升，只能说在未了解该类型项目时，让你以最快的速度能先项目实际开发中入手该类型项目
正文开始
- 首先准备基础环境 以谷歌浏览器 为例 我们需要下载一个扩展程序 meatMask 自己注册个钱包地址
- 项目中安装web3依赖 npm install web3
从现在开始正式开始与web3开始
检测环境
//检测当前浏览器是否以太坊兼容，并进行相应的处理
if (typeof window.ethereum === 'undefined') {
// 浏览器不存在以太坊兼容 看你怎么花式提示用户了
}else{
// 哎~ 检测到浏览器中 存在以太坊环境了 接下来就可以来去获取钱包地址了
}
获取账户
当我们检测到浏览器中存以太坊环境，那么我们就可以进行下一步，获取到用户的钱包账户了
window.ethereum.request({ method: 'eth_requestAccounts' })
//如果用户拒绝了登录请求
.catch(reason => {
if (reason === 'User rejected provider access') {
// 用户不想登录，你看该怎么办？
} else {
// 本不该执行到这里，但是真到这里了，说明发生了意外
}
})
//如果用户同意了登录请求，你就可以拿到用户的账号
.then(accounts => {
//一旦获取了用户账号，你就可以签名交易
// 这里获取到的accounts 是个数组 正常取0即可
})
签名授权
这时候就有人会问了 为什么签名授权放在这里，或者说签名授权是啥？
这时候扯入一个知识点 叫做观察钱包，现在的钱包app 都支持观察钱包 观察钱包只需要钱包地址即可添加到钱包，这时候如果通过上方获取账户 同样可以正常获取到观察钱包账户，如果和合约交互那么可以不用考虑，如果你哪里钱包账户用作跟后端交互 那么这里就有必要开启签名授权，签名授权可以禁止观察钱包操作。具体样子可以自己写demo试一下，我懒得写
//签名授权的前提是 获取到用户账户
let web3 = new Web3(window.ethereum);//创建web3
web3.eth.personal.sign(web3.utils.fromUtf8('授权提示语'),'钱包账户', (err, res) =>{
if (res != null && res !== undefined && res !== '') {
//签名通过，做你自己的事 比如把钱包账户给跑出来
} else {
// 用户拒绝签名 ，提示该提示的
}
})
}
到现在为止,你已经可以获取到用户的钱包账户了，可以开启下一步新的功能，整个web3实战的1/3基础你已经学会了哦~
监控链信息变更
哎 上文中不是说已经可以获取到钱包账户了么 ，那这个又是啥那？
先贴代码文章来源：https://www.toymoban.com/news/detail-455489.html
// 帐户更改事件
//当你钱包账户切换的时候就会触发这个
window.ethereum.on('accountsChanged', (accounts) => {
// 如果返回数组中的第一个帐户不是您期望的帐户，您应该通知用户！将来，accounts 数组可能包含多个帐户。但是，数组中的第一个帐户将继续被视为用户的“选定”帐户。
console.log(accounts)
})
// 链改变事件
//当你链切换的时候就会触发这个
window.ethereum.on('chainChanged', (chainId) => {
console.log(chainId)
})
我相信每个玩链的玩家，手里应该不止一个钱包账户，不止一个链有钱包账户，
那么如果他们在你的dapp中进行切换钱包或者切换链，那你是不是要做操作，哎！ 这个监听就是为了做这个！！！文章来源地址https://www.toymoban.com/news/detail-455489.html
到了这里，关于从实战开始了解Web3（一）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
