14.md

• author

第14节 web3.js

⬆️上一节🔗⬇️下一节🔗

❤️💕💕欢迎来到web3的教程，在这里，将会学习到智能合约，区块链底层原理，eth和btc学习，web3或将会颠覆世界😍~Myblog:http://nsddd.top

---

[TOC]

web3.js

web3.js 是一组使用HTTP或IPC连接来和本地或远程以太坊节点进行交互的库。

💡如果我们使用JavaScript 来开发 DApp时，很多时候需要使用到 web3.js （当然也可以选择使用 ethers.js ）。

• web3.js是以太坊官方维护的
• ethers.js是民间开发的

Web3

Web3 是 web3.js 库的主类。

var Web3 = require('web3');

> Web3.utils
> Web3.version
> Web3.givenProvider
> Web3.providers
> Web3.modules

Web3.modules

Web3.modules

将返回所有主要子模块类的对象，以便能够手动实例化它们。

返回值

• Object: 模块构造函数列表:

  Eth - Constructor: 与以太坊网络交互的 Eth 模块，查看 web3.eth 了解更多。Net - Constructor: 与网络属性进行交互的 Net 模块，查看 web3.eth.net 了解更多。Personal - Constructor: 与以太坊账户交互的 Personal 模块，查看 web3.eth.personal 了解更多。Shh - Constructor: 与whisper协议交互的 Shh 模块，查看 web3.shh 了解更多。Bzz - Constructor: 与swarm网络交互的 Bzz 模块，查看 web3.bzz 了解更多。

例子

Web3.modules
> {
    Eth: Eth(provider),
    Net: Net(provider),
    Personal: Personal(provider),
    Shh: Shh(provider),
    Bzz: Bzz(provider),
}

Web3 实例

Web3类是一个“伞”包，在Web3类下包含所有与以太坊相关的模块。

var Web3 = require('web3');

// 创建实例，如果在支持以太坊的浏览器 "Web3.providers.givenProvider" 会被设置。
var web3 = new Web3(Web3.givenProvider || 'ws://some.local-or-remote.node:8546');

> web3.eth
> web3.shh
> web3.bzz
> web3.utils
> web3.version

案例

// 下面是调用合约的方式:
var abi = /* abi是由编译器生成的 */
var ZombieFactoryContract = web3.eth.contract(abi)
var contractAddress = /* 发布之后在以太坊上生成的合约地址 */
var ZombieFactory = ZombieFactoryContract.at(contractAddress)
// `ZombieFactory` 能访问公共的函数以及事件

// 某个监听文本输入的监听器:
$("#ourButton").click(function(e) {
  var name = $("#nameInput").val()
  //调用合约的 `createRandomZombie` 函数:
  ZombieFactory.createRandomZombie(name)
})

// 监听 `NewZombie` 事件, 并且更新UI
var event = ZombieFactory.NewZombie(function(error, result) {
  if (error) return
  generateZombie(result.zombieId, result.name, result.dna)
})

// 获取 Zombie 的 dna, 更新图像
function generateZombie(id, name, dna) {
  let dnaStr = String(dna)
  // 如果dna少于16位,在它前面用0补上
  while (dnaStr.length < 16)
    dnaStr = "0" + dnaStr

  let zombieDetails = {
    // 前两位数构成头部.我们可能有7种头部, 所以 % 7
    // 得到的数在0-6,再加上1,数的范围变成1-7
    // 通过这样计算：
    headChoice: dnaStr.substring(0, 2) % 7 + 1，
    // 我们得到的图片名称从head1.png 到 head7.png

    // 接下来的两位数构成眼睛, 眼睛变化就对11取模:
    eyeChoice: dnaStr.substring(2, 4) % 11 + 1,
    // 再接下来的两位数构成衣服，衣服变化就对6取模:
    shirtChoice: dnaStr.substring(4, 6) % 6 + 1,
    //最后6位控制颜色. 用css选择器: hue-rotate来更新
    // 360度:
    skinColorChoice: parseInt(dnaStr.substring(6, 8) / 100 * 360),
    eyeColorChoice: parseInt(dnaStr.substring(8, 10) / 100 * 360),
    clothesColorChoice: parseInt(dnaStr.substring(10, 12) / 100 * 360),
    zombieName: name,
    zombieDescription: "A Level 1 CryptoZombie",
  }
  return zombieDetails
}

我们的 JavaScript 所做的就是获取由zombieDetails 产生的数据, 并且利用浏览器里的 JavaScript 神奇功能 (我们用 Vue.js)，置换出图像以及使用CSS过滤器。在后面的课程中，你可以看到全部的代码。

END 链接

• ⬆️上一节🔗⬇️下一节🔗

• Ⓜ️回到目录🏠

• 🫵参与贡献💞❤️‍🔥💖)

• ✴️版权声明 © :本书所有内容遵循CC-BY-SA 3.0协议（署名-相同方式共享）©