草庐IT

从实战开始了解Web3（一）

Loners_cc 2023-03-28 原文

为什么会有这篇文章

一年前从青岛离职回老家工作，来到这家公司的时候，这边的前端对于区块链基本说0了解，很多时候基本属于东拼西凑，来去获取账户，剩下的全靠后端，去中心化可以说完全没有接触过。

ps: 这篇文章并不会给你带来技能提升，只能说在未了解该类型项目时，让你以最快的速度能先项目实际开发中入手该类型项目

正文开始

  1. 首先准备基础环境 以谷歌浏览器 为例 我们需要下载一个扩展程序 ​​meatMask​​ 自己注册个钱包地址
  2. 项目中安装web3依赖 npm install web3
从现在开始正式开始与web3开始

检测环境

//检测当前浏览器是否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即可
})

签名授权

这时候就有人会问了 为什么签名授权放在这里，或者说签名授权是啥？ 这时候扯入一个知识点 叫做观察钱包，现在的钱包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基础你已经学会了哦~

监控链信息变更

哎 上文中不是说已经可以获取到钱包账户了么 ，那这个又是啥那？

先贴代码

// 帐户更改事件
//当你钱包账户切换的时候就会触发这个
window.ethereum.on('accountsChanged', (accounts) => {
// 如果返回数组中的第一个帐户不是您期望的帐户，您应该通知用户！将来，accounts 数组可能包含多个帐户。但是，数组中的第一个帐户将继续被视为用户的“选定”帐户。
console.log(accounts)
})

// 链改变事件
//当你链切换的时候就会触发这个
window.ethereum.on('chainChanged', (chainId) => {
console.log(chainId)
})
我相信每个玩链的玩家，手里应该不止一个钱包账户，不止一个链有钱包账户， 那么如果他们在你的dapp中进行切换钱包或者切换链，那你是不是要做操作，哎！ 这个监听就是为了做这个！！！

从实Web3sectionmarginbr数组区块链实际开发JavaScript前端开发

有关从实战开始了解Web3（一）的更多相关文章

  1. Observability：从零开始创建 Java 微服务并监控它 （二） - 2

    这篇文章是继上一篇文章“Observability：从零开始创建Java微服务并监控它（一）”的续篇。在上一篇文章中，我们讲述了如何创建一个Javaweb应用，并使用Filebeat来收集应用所生成的日志。在今天的文章中，我来详述如何收集应用的指标，使用APM来监控应用并监督web服务的在线情况。源码可以在地址 https://github.com/liu-xiao-guo/java_observability 进行下载。摄入指标指标被视为可以随时更改的时间点值。当前请求的数量可以改变任何毫秒。你可能有1000个请求的峰值，然后一切都回到一个请求。这也意味着这些指标可能不准确，你还想提取最小/

  2. ruby - 如何配置 Ruby Mechanize 代理以通过 Charles Web 代理工作？ - 2

    我正在使用Ruby/Mechanize编写一个“自动填写表格”应用程序。它几乎可以工作。我可以使用精彩CharlesWeb代理以查看服务器和我的Firefox浏览器之间的交换。现在我想使用Charles查看服务器和我的应用程序之间的交换。Charles在端口8888上代理。假设服务器位于https://my.host.com。.一件不起作用的事情是:@agent||=Mechanize.newdo|agent|agent.set_proxy("my.host.com",8888)end这会导致Net::HTTP::Persistent::Error:...lib/net/http/pe

  3. ruby - 了解在 Ruby 中与 lambda 一起使用的 inject 行为 - 2

    我经常将预配置的lambda插入可枚举的方法中，例如“map”、“select”等。但是“注入(inject)”的行为似乎有所不同。例如与mult4=lambda{|item|item*4}然后(5..10).map&mult4给我[20,24,28,32,36,40]但是，如果我制作一个2参数lambda用于像这样的注入(inject)，multL=lambda{|product,n|product*n}我想说(5..10).inject(2)&multL因为“inject”有一个可选的单个初始值参数，但这给了我......irb(main):027:0>(5..10).inject

  4. ruby-on-rails - 如何测试自己对 Ruby/ROR 的了解？ - 2

    是否有self验证的问题列表。看着那个，我可以确定我知道。我应该复习一下。在学习的过程中，我列了一个这样的list，但它只包含我在某处听说过的项目。我需要一段时间才能找到新的东西。 最佳答案 以下是针对ruby​​和Rails的一些测试列表。证书名称:RubyonRails谁提供:oDeskIncorporation认证费用:免费网站:https://www.odesk.com/tests/985?pos=0证书名称:RubyonRails提供者:Techgig.com(TimesBusinessSolutionsLimited(T

  5. ruby-on-rails - 了解 "attribute_will_change!"方法 - 2

    我想覆盖store_accessor的getter。可以查到here.代码在这里:#Fileactiverecord/lib/active_record/store.rb,line74defstore_accessor(store_attribute,*keys)keys=keys.flatten_store_accessors_module.module_evaldokeys.eachdo|key|define_method("#{key}=")do|value|write_store_attribute(store_attribute,key,value)enddefine_met

  6. ruby-on-rails - Ruby/Rails 中的夏令时开始和结束日期 - 2

    我正在开发一个Rails应用程序，我需要在其中找到给定特定偏移量或时区的夏令时开始和结束日期。我基本上在我的数据库中保存了从用户浏览器接收到的时区偏移量(“+3”，“-5”)，我想在它出现时修改它由于夏令时的变化。我知道Time实例变量有dst?和isdst方法，如果存储在它们中的日期在夏令时与否。>Time.new.isdst=>true但是使用它来查找夏令时的开始和结束日期会占用太多资源，而且我还必须为我拥有的每个时区偏移量执行此操作。我想知道更好的方法。 最佳答案 好的，基于你所说的和@dhouty'sanswer:您希望能够

  7. ruby-on-rails - phusion passenger 和 ruby​​ 1.9.1 已经开始工作了吗？ - 2

    我有一台生产机器和一台开发机器，都运行ubuntu8.10并且都运行最新的phusionpassenger。当我在osx上的本地开发机器上使用ruby​​1.9.1时，我想知道外面的人是否已经在使用带有ruby​​1.9.1甚至1.9.2的phusionpassenger？如果是这样，请告诉我们您的设置!此外，有没有办法在apache上使用phusionpassenger同时运行ruby​​1.8.7(ree)和1.9.1？感谢您的指点，我在任何地方都找不到任何提示... 最佳答案 是的，从某些2.2.x版本开始就正式支持它，我不记

  8. ruby - Rails 3 - 我可以将开始日期设置为 date_select 方法吗？ - 2

    date_select方法只能设置:start_year，但我想设置开始日期(例如3个月前的日期)(但没有这样的选项)。那么，我可以将开始日期设置为date_select方法吗？或者，要制作这样的选择框，我应该使用select_tag和options_for_select吗？或者，有什么解决办法吗？谢谢， 最佳答案 有可能……例如:start_year–设置年份选择的开始年份。默认为Time.now.year-5参见thisresource. 关于ruby-Rails3-我可以将开始日期

  9. ruby - 我怎样才能更好地了解/了解更多关于 Ruby 的知识？ - 2

    按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visitthehelpcenter指导。关闭9年前。我最近开始学习Ruby，这是我的第一门编程语言。我对语法感到满意，并且我已经完成了许多只教授相同基础知识的教程。我已经写了一些小程序(包括我自己的数组排序方法，在有人告诉我谷歌“冒泡排序”之前我认为它非常聪明)，但我觉得我需要尝试更大更难的东西来理解更多关于Ruby.关于如何执行此操作的任何想法？

  10. ruby - 从特定索引开始迭代数组 - 2

    我想从特定索引开始遍历数组。我该怎么做？myj.eachdo|temp|...end 最佳答案 执行以下操作:your_array[your_index..-1].eachdo|temp|###end 关于ruby-从特定索引开始迭代数组，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/44151758/

随机推荐