本文主要是介绍【CryptoZombies - 3 应用前端和 Web3.js】001 Web3.js入门与web3 Provider，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
目录
一、前言
二、Web3.js
1、引入
2、Web3.js怎么解决
3、Web3.js环境搭建
4、实战
1.要求
2.代码
三、Web3 Provider
1、引入
2、Infura
3、MetaMask
4、实战
1.要求
2.代码
一、前言
终于到了这里了，之前我们讲的solidity教程只是基础的合约编写，但是我们并不能像普通程序一样运行，因为我们还需要自己搭建运行环境。这确实要比比普通的编程语言难得多。
而我们要做的就是知难而上。
今天我们要讲的是Web3.js，这是针对以太坊的JavaScript库，让我们走进今天的内容来了解一下吧。
二、Web3.js
1、引入
我们都知道，以太坊是由很多结点组成的，每个结点都有区块链的备份，如果我们想要调用一份合约的某个方法，我们需要告诉结点：
1.合约地址
2.方法及其传入参数
以太坊结点只能识别一种叫做JSON-RPC的语言。这种语言不是那么太容易读懂，如果我们想调用一个合约，我们需要发送的查询语句如下：
// 哈……祝你写所有这样的函数调用的时候都一次通过
// 往右边拉…… ==>
{"jsonrpc":"2.0","method":"eth_sendTransaction","params":[{"from":"0xb60e8dd61c5d32be8058bb8eb970870f07233155","to":"0xd46e8dd67c5d32be8058bb8eb970870f07244567","gas":"0x76c0","gasPrice":"0x9184e72a000","value":"0x9184e72a","data":"0xd46e8dd67c5d32be8d46e8dd67c5d32be8058bb8eb970870f072445675058bb8eb970870f072445675"}],"id":1}看不明白？我们换种方式展示：
{"jsonrpc":"2.0","method":"eth_sendTransaction","params":[{"from":"0xb60e8dd61c5d32be8058bb8eb970870f07233155","to":"0xd46e8dd67c5d32be8058bb8eb970870f07244567","gas":"0x76c0","gasPrice":"0x9184e72a000","value":"0x9184e72a","data":"0xd46e8dd67c5d32be8d46e8dd67c5d32be8058bb8eb970870f072445675058bb8eb970870f072445675"}],"id":1
}这样确实太麻烦了！
2、Web3.js怎么解决
在Web3.js中，把这些复杂的查询语句隐藏起来，我们只需要和JavaScript进行交互即可，方式也非常简单：
CryptoZombies.methods.createRandomZombie("Vitalik Nakamoto 🤔").send({ from: "0xb60e8dd61c5d32be8058bb8eb970870f07233155", gas: "3000000" })后续，我们还会更加详细讲解。
3、Web3.js环境搭建
我们想要使用Web3.js，就需要搭建好环境
搭建方式有很多种，如：
// 用 NPM
npm install web3// 用 Yarn
yarn add web3// 用 Bower
bower install web3// ...或者其他。又如：
<script language="javascript" type="text/javascript" src="web3.min.js"></script>对于后面的方式，我们需要从GitHub上面下载压缩后的.js文件，然后包含到我们的项目中。
4、实战
1.要求
在下面的HTML项目中使用script标签添加js文件。
JS文件为：
web3.min.js
2.代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>CryptoZombies front-end</title><script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script language="javascript" type="text/javascript" src="web3.min.js"></script></head><body></body>
</html>
三、Web3 Provider
1、引入
上面我们搭建好了Web3.js环境（虽然真的很简单，但是我们确实是完成了），然后我们就需要通过环境和区块链进行交互了。
在 Web3.js 里设置 Web3 的 Provider（提供者） 告诉我们的代码应该和 哪个节点 交互来处理我们的读写。我们可以运行自己的结点作为提供者。
但这样不是很方便！
因为如果我们用自己的结点作为提供者，那我们为其他用户提供DAPP服务的时候，我们还需要同步维护一个以太坊结点。所以，如果能有一个第三方服务为我们提供相关功能，这个问题就解决了。
2、Infura
Infura 是一个服务，它维护了很多以太坊节点并提供了一个缓存层来实现高速读取。我们可以用他们的 API 来免费访问这个服务。 用 Infura 作为节点提供者，我们无需自己运营节点就能很可靠地向以太坊发送、接收信息。
使用方法如下：
var web3 = new Web3(new Web3.providers.WebsocketProvider("wss://mainnet.infura.io/ws"));当然，在DAPP中，除了读信息，还会有用户写信息，所以我们需要一个方法，可以让用户用自己的私钥给事务签名。
这些需要涉及到密码学的知识。在这里给大家简单说明一下，在区块链中，每个用户都会有自己的公私钥对表明自己的身份，从而实现匿名性。用户自己保存私钥，公钥可以公开。用户使用自己的私钥对数据进行签名，其他用户可以利用公钥去验证。但是其他用户不会知道该用户的私钥（理想状态下，比如一个恶意用户，用酒把这个人的私钥灌出来也说不准）。一旦用户自己的私钥丢失，他所拥有的以太币（或比特币）就全部永久损失了，除非他能将私钥找回。
3、MetaMask
公私钥密码学真的是比较繁琐复杂的，对于一些只想做应用的人来说，他们不需要把密码学理解的太透彻，可能他们只是想挖矿赚个钱而已。
所以我们就需要一个工具来帮我们管理我们的公私钥。
最常用的就是MetaMask：
这是一个浏览器扩展插件，我们可以使用谷歌或者火狐浏览器安装并使用。它能让用户安全地维护他们的以太坊账户和私钥， 并用他们的账户和使用 Web3.js 的网站互动。
上面图中的以太币是我做测试使用的，这个币没有实际的价值，只是用于测试。任何人都可以注册一个结点，获得免费的测试以太币。
我们用Metamask作用web3的提供者。具体做法如下：
1.MetaMask 将其 web3 提供者注入到浏览器的全局 JavaScript 对象 web3 中。
2.应用检查 web3 是否存在。若存在就使用 web3.currentProvider 作为其提供者。
举个例子，如：
window.addEventListener('load', function() {// Checking if Web3 has been injected by the browser (Mist/MetaMask)if (typeof web3 !== 'undefined') {// Use Mist/MetaMask's providerweb3js = new Web3(web3.currentProvider);} else {// Handle the case where the user doesn't have web3. Probably// show them a message telling them to install Metamask in// order to use our app.}// Now you can start your app & access web3js freely:startApp()})我们可以使用类似的代码在我们的应用中，用以检查用户是否安装MetaMask及提供用户安装。
4、实战
1.要求
我们在HTML文件中的 </body> 标签前面放置了一个空的 script 标签。可以把这节课的 JavaScript 代码写在里面。
1.把上面用来检测 MetaMask 是否安装的模板代码粘贴进来。请粘贴到以 window.addEventListener 开头的代码块中。
2.代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>CryptoZombies front-end</title><script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script language="javascript" type="text/javascript" src="web3.min.js"></script></head><body><script>// Start herewindow.addEventListener('load', function() {// Checking if Web3 has been injected by the browser (Mist/MetaMask)if (typeof web3 !== 'undefined') {// Use Mist/MetaMask's providerweb3js = new Web3(web3.currentProvider);} else {// Handle the case where the user doesn't have web3. Probably// show them a message telling them to install Metamask in// order to use our app.}// Now you can start your app & access web3js freely:startApp()})</script></body>
</html>
这篇关于【CryptoZombies - 3 应用前端和 Web3.js】001 Web3.js入门与web3 Provider的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
