Skip to main content

3-14

1 前端需具备知识​

本公司前端需具备 3 方面的知识：

  • 前端基础（js，css，html，vue & react(重点)）

  • 区块链基础（公链、gas、交易）

  • 前端与区块链

    metamask、web3js 库、ethersjs 库、bignumber 库

前端相关知识​

任何一个新知识，看视频入门总是最高效的。

前端相关知识这里只讲 react，这里面包含 react 的视频（讲得很好，开 2 倍速看）：

「02.计算机」https://www.aliyundrive.com/s/KhVDa6uJwrE 提取码: 4qnb

区块链基础​

image-20220314112327447

这里推荐一个社区：登链社区 ，里面可以学到很多区块链相关知识：

或者也可以在 bilibili 中搜索以太坊入门，也会有相关内容，对入门都很有帮助

问题一：目前我们都涉及哪些链呀？​
链 Id名称
1以太坊主链
4以太坊 rinkeby 测试链
56币安主链
97币安 测试链
256火币 测试链

注意主链和测试链，不要搞混了

前端与区块链​

有了以太坊基础知识后，就可以开始与合约交互了。

我们一般用 metamask 与合约交互，这是交互流程图：

img

现在看不懂没关系，后面回头再来看，我们只关注有两个东西，metamask 和合约：

metamask

是一个浏览器插件，下载地址：https://metamask.io/download/

具体操作步骤见 google 文档：https://docs.google.com/document/d/1nsUX2YkCW7aCmEbN2_Vw7TvORM5CC4M-/edit

合约

安装好 metamask，就可以写代码与合约交互。与合约交互一般可能会用到 web3js 或者 ethersjs 库，它们都是与合约交互的库，两者也很相似，但目前我们的项目中 ethersjs 用得较多，它们的区别请自行搜索。

注意：

  • 学习的时候，把文档中的 demo 练习一下。
  • 文档是用来反复翻阅的，开发中遇到问题，回头再来看，这样反复过程中，就记住了。

Bignumber.js 库

由于合约返回的数据比较大，而 js 的 Number 类型中的整型和浮点型都不安全（范围不够、精度不够等问题），这里需要 Bignumber.js 库来处理数据

文档地址：https://mikemcl.github.io/bignumber.js/

附 1：一些有用链接​

2 解决“ethereumjs-abi.git 无法访问“问题​

解决方案：在 yarn.lock 中指定该包的版本，详见 [1]

img

[1] 解决“ethereumjs-abi.git 无法访问“问题.https://blog.csdn.net/sanqima/article/details/120719493

3 背景出现小点​

image-20220320102542106

background: linear-gradient(90deg, var(--bg-main) 15px, transparent 1%) 50%, linear-gradient(
      var(--bg-main) 15px,
      transparent 1%
    ) 50%, var(--bg-dots);