255-cryptozombies全攻略七

cryptozombies全攻略七








第一章.Web3.js
什么是Web3.js
以太坊网络是由节点组成的
每个节点都包含了区块链的一份拷贝
当我们想要调用一份智能合约的一个方法
需要从其中一个节点中查找并告诉它
1.智能合约的地址
2.想调用的方法
3.想传入的参数

以太坊只能识别一种叫做JSON-RPC的语言
这种语言不好懂
Web3.js把查询语句都隐藏起来了
我们只需要和JavaScript界面进行交互就可以了

我们可以在github上面下载一个web3.min.js
https://github.com/ethereum/web3.js/blob/1.0/dist/web3.min.js

然后我们把web3.js添加到script标签里面


完整html代码



  
    
    
    
    
  
  

  












第二章.web3.js
web3 provider
以太坊是由同一份数据的相同拷贝的节点构成的
在web3.js里设置web3的provider告诉我们的代码
应该和哪个节点交互来处理我们的读写
这就好像在传统的web应用程序中为API调用设置远程的web服务器网址
我们可以用一个第三方的服务Infura

Infura
Infura维护了很多以太坊节点并
提供了一个缓存层来实现高速读取
可以用他们的API来访问这个服务

var web3 = new Web3(new Web3.providers.WebsocketProvider("wss://mainnet.infura.io/ws"));
这样可以把Infura作为web3节点提供者

Metamask是浏览器扩展,能让用户安全地维护以太坊账户和私钥
并用用户的账户和使用web3.js的网站互动

我们可以使用一段样板代码,
检查用户是否安装以及告诉用户安装Metamask

window.addEventListener('load', function() {

  // 检查web3是否已经注入到(Mist/MetaMask)
  if (typeof web3 !== 'undefined') {
    // 使用 Mist/MetaMask 的提供者
    web3js = new Web3(web3.currentProvider);
  } else {
    // 处理用户没安装的情况， 比如显示一个消息
    // 告诉他们要安装 MetaMask 来使用我们的应用
  }

  // 现在你可以启动你的应用并自由访问 Web3.js:
  startApp()

})










第三章.与合约对话
现在我们已经用Metamask的web3提供者初始化了web3.js
接下来我们用它来和我们的智能合约对话
web3.js需要两个东西来与合约对话
1.地址
2.abi

合约地址
写完了智能合约之后,需要编译然后部署到以太坊
部署智能合约之后,它将获得一个以太坊上的永久地址
我们需要在部署后复制这个地址来和智能合约进行对话

合约ABI
另一个web3.js与合约对话需要的东西是ABI
ABI
Application Binary Interface
应用二进制接口
基本上,它是以JSON格式表示合约的方法
告诉web3.js如何以合同理解的方式格式化函数调用

当编译完合约向以太坊上部署的时候
solidity编译器会给一个ABI
所以我们要保存地址和ABI

实例化web3.js
var myContract = new web3js.eth.Contract(myABI, myContractAddress);











第四章.调用合约函数
web3.js有两个方法来调用合约的函数call,send

call
call用来调用view和pure函数
只运行在本地节点,不会在区块链上创建事务
view和pure函数是只读的,并不会改变区块链的状态
也不消耗任何gas
用户不会要求用MetaMask对事务签名

send
send将创建一个事务改变区块链上的数据
需要用send来调用非view,pure的函数
send一个事务需要用户支付gas,
并且需要用户使用MetaMask对事务进行签名

myContract.methods.myMethod(123).call()
myContract.methods.myMethod(123).send()

获取数据
之前我们把僵尸数组写成了这样
Zombie[] public zombies;
在solidity里面,当定义一个public变量的时候
它将自动定义一个公开的getter同名方法
比如要查看一个id为15的僵尸
那么就可以zombies(15)

写一个方法,传入id,查询僵尸
function getZombieDetails(id) {
  return cryptoZombies.methods.zombies(id).call()
}

getZombieDetails(15)
.then(function(result) {
  console.log("Zombie 15: " + JSON.stringify(result));
});


cryptoZombies.methods.zombies(id).call()
会和web3提供者节点进行通信
告诉它返回合约中的id为id的zombie

这是异步的,就像从服务器调用API
所以web3在这里返回了一个promises

一旦promise被resolve,
就会执行then中的代码,在控制台打出result