【重磅推荐】web3.js之0.2.xx版本和1.0版本初始化总结（很容易混淆，一个很大的坑！这里彻底终结！！！）

超、凢脫俗 2021-09-18 12:02 377阅读 0赞

** 从下面初始化代码来看，你会发现web3.js 1.0版本一行代码就搞定了浏览器插件Metamask和自定义provider的问题，更加方便！**

### **特别特别提醒：如果使用了nodejs（require语句）或ES6（import语句）导入了web3，（原生script标签导入的方式除外）就一定不能同时导入truffle-contract库，否则web3.js和truffle-contract会打架，碰到各种无法解决的错误！** ###

### 主要的原因是：ES6和nodejs需要转码才能浏览器访问，转码之后，两个库就打架了！（切记切记！！！！）     ###

基于web3.js（1.0版本和0.2.xx版本的初始化）
    注意：个人建议使用web3.1.0版本，web3.js 1.0版本引入了promise，对异步更加方便操作，代码更加简洁！
    
    特别特别提醒：如果使用了nodejs（require语句）或ES6（import语句）导入了web3，（原生script标签导入的方式除外）就一定不能同时导入truffle-contract库，否则web3.js和truffle-contract会打架，碰到各种无法解决的错误！
    
    
    const Web3 = require("web3")
    
    
    // web3对象初始化(兼容web3.js 0.2.xx版本和1.0版本)
        init_web3_0_2_version() {
            // 如果浏览器安装了Metamask钱包(如：谷歌、火狐),其他浏览器不支持window.web3就是underfind
            // window.web3.currentProvider就是Metamask,此时的window.Web就是由Metamask的对象！
            // 既然web3还没创建就存在，浏览器访问就存在,肯定就是插件Metamask加载成功！
            let web3 = window.web3;
            if (typeof web3 !== 'undefined') {
                // 这里的Web3对象肯定Metamask插件的,等价于window.Web3
                console.log("Metamask的window.Web3",window.Web3);
                this.web3 = new window.Web3(web3.currentProvider);
            } else {
                // 如果浏览器没有安装或不支持Metamask插件,那么web3肯定就是underfind,用web3.js的Web3对象创建一个！
                console.log("web3.js的Web3对象:", Web3);
                this.web3 = new Web3(new Web3.providers.HttpProvider('http://127.0.0.1:8545'));
            }
        }
        // web3对象初始化(仅兼容web3.js 1.0版本)
        init_web3_1_0_version() {
            // 如果浏览器安装了Metamask钱包(如：谷歌、火狐),那么Web3.givenProvider等于Metamask
            // 如果浏览器没有安装或不支持Metamask,那么Web3.givenProvider等于null
            console.log("判断浏览器是否启用Metamask插件的对象Web3.givenProvider结果为：",Web3.givenProvider);
            this.web3 = new Web3(Web3.givenProvider || new Web3.providers.HttpProvider('http://127.0.0.1:8545'));
        }