0
从实战开始了解Web3（一）
source link: https://blog.51cto.com/u_14958653/5914840
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
为什么会有这篇文章
一年前从青岛离职回老家工作，来到这家公司的时候，这边的前端对于区块链基本说0了解，很多时候基本属于东拼西凑，来去获取账户，剩下的全靠后端，去中心化可以说完全没有接触过。
ps: 这篇文章并不会给你带来技能提升，只能说在未了解该类型项目时，让你以最快的速度能先项目实际开发中入手该类型项目
- 首先准备基础环境 以谷歌浏览器 为例 我们需要下载一个扩展程序 meatMask 自己注册个钱包地址
- 项目中安装web3依赖 npm install web3
从现在开始正式开始与web3开始
//检测当前浏览器是否ETH兼容，并进行相应的处理
if (typeof window.ethereum === 'undefined') {
// 浏览器不存在ETH兼容 看你怎么花式提示用户了
}else{
// 哎~ 检测到浏览器中 存在ETH环境了 接下来就可以来去获取钱包地址了
}
if (typeof window.ethereum === 'undefined') {
// 浏览器不存在ETH兼容 看你怎么花式提示用户了
}else{
// 哎~ 检测到浏览器中 存在ETH环境了 接下来就可以来去获取钱包地址了
}
当我们检测到浏览器中存ETH环境，那么我们就可以进行下一步，获取到用户的钱包账户了
window.ethereum.request({ method: 'eth_requestAccounts' })
//如果用户拒绝了登录请求
.catch(reason => {
if (reason === 'User rejected provider access') {
// 用户不想登录，你看该怎么办？
} else {
// 本不该执行到这里，但是真到这里了，说明发生了意外
}
})
//如果用户同意了登录请求，你就可以拿到用户的账号
.then(accounts => {
//一旦获取了用户账号，你就可以签名交易
// 这里获取到的accounts 是个数组 正常取0即可
})
//如果用户拒绝了登录请求
.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 {
// 用户拒绝签名 ，提示该提示的
}
})
}
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基础你已经学会了哦~
监控链信息变更
哎 上文中不是说已经可以获取到钱包账户了么 ，那这个又是啥那？
先贴代码
// 帐户更改事件
//当你钱包账户切换的时候就会触发这个
window.ethereum.on('accountsChanged', (accounts) => {
// 如果返回数组中的第一个帐户不是您期望的帐户，您应该通知用户！将来，accounts 数组可能包含多个帐户。但是，数组中的第一个帐户将继续被视为用户的“选定”帐户。
console.log(accounts)
})
// 链改变事件
//当你链切换的时候就会触发这个
window.ethereum.on('chainChanged', (chainId) => {
console.log(chainId)
})
//当你钱包账户切换的时候就会触发这个
window.ethereum.on('accountsChanged', (accounts) => {
// 如果返回数组中的第一个帐户不是您期望的帐户，您应该通知用户！将来，accounts 数组可能包含多个帐户。但是，数组中的第一个帐户将继续被视为用户的“选定”帐户。
console.log(accounts)
})
// 链改变事件
//当你链切换的时候就会触发这个
window.ethereum.on('chainChanged', (chainId) => {
console.log(chainId)
})
我相信每个玩链的玩家，手里应该不止一个钱包账户，不止一个链有钱包账户， 那么如果他们在你的dapp中进行切换钱包或者切换链，那你是不是要做操作，哎！ 这个监听就是为了做这个！！！
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK