【重磅推荐】web3.js之原生es5和nodejs版案例（注：web3.js切勿和truffle-contract库同时使用,否则报错，无法修复！）

ゝ一纸荒年。 2021-09-18 11:20 219阅读 0赞

### **案例说明（基于nodejs的web3.js开发）：** ###

web3.js 1.0版参考文档：[https://web3js.readthedocs.io/en/latest/][https_web3js.readthedocs.io_en_latest]

web3.js 1.0版中文版参考文档：[http://cw.hubwiz.com/card/c/web3.js-1.0/][http_cw.hubwiz.com_card_c_web3.js-1.0]

**浏览器运行需要转码（nodejs转浏览器工具）browserify 具体用法：**[https://www.npmjs.com/package/browserify][https_www.npmjs.com_package_browserify]

## ##

### **此案例是基于web.js 1.0以上版本实现** ###

**切记：合约部署在哪里,那么区块链服务器提供者就是哪里的（比如合约部署在Metamask,那么就用Metamask就是区块链服务器）  
A、这里非常重要：Web3.givenProvider(浏览器原生服务器提供者,比如合约部署在Metamask)  
     【如果合约没有部署在浏览器原生服务器Metamask上,那么Web3.givenProvider为null】  
B、new Web3.providers.HttpProvider('http://127.0.0.1:8545')基于Ganache自定义私有链网络！  
     【如果部署合约在Ganache,那么Ganache才是当前的私有区块链服务器】**

**注意：合约要么部署在浏览器原生服务器Metamask,要么部署Ganache,只能二选一！  
this.web3 = new Web3(Web3.givenProvider || new Web3.providers.HttpProvider('http://127.0.0.1:8545'));**

### **再次严重声明：（nodejs和es6需要转码）web3.js 不能和truffle-contract同时导入，否则会报错，而且无法修复！！！ （原生es5标签导入除外，标签导入不需要转码的，所以没事）** ###

const Web3 = require("web3")
    
    // solidity合约的abi数据
    let fist_contract_abi = [
            {
                "constant": false,
                "inputs": [
                    {
                        "name": "_fName",
                        "type": "string"
                    },
                    {
                        "name": "_age",
                        "type": "uint256"
                    }
                ],
                "name": "setInfo",
                "outputs": [],
                "payable": false,
                "stateMutability": "nonpayable",
                "type": "function"
            },
            {
                "constant": true,
                "inputs": [],
                "name": "getInfo",
                "outputs": [
                    {
                        "name": "",
                        "type": "string"
                    },
                    {
                        "name": "",
                        "type": "uint256"
                    }
                ],
                "payable": false,
                "stateMutability": "view",
                "type": "function"
            }
        ];
    
    class FirstContractWeb3 {
        constructor() {
            this.init_web3_1_0_version();
            this.initContract();
        }
    
    // 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'));
        }
        initContract() {
            // 基于原生的web3.eth.Contract对象来创建合约（调用合约的方法）
            let fist_contract = new this.web3.eth.Contract(fist_contract_abi,
                '0xe61710647f97a2c2ff8e555c519d382b0d0b33ac');
    
            // 调用合约的只读方法，并在EVM中直接执行方法，不需要发送任何交易。因此不会改变合约的状态。
            fist_contract.methods.getInfo().call().then((result) => {
                console.log("get已经执行了")
                console.log(result);
            });
            // 向合约发送交易来执行指定方法，将改变合约的状态(必须输入发送交易的账户地址,需要消耗gas)
            fist_contract.methods.setInfo("kirin2019", 18).send({from: "0x6E831DdB4e272F4C8673C06e1877D17Acd844C12"}).then((result) => {
                console.log("set已经执行了")
                console.log(result);
            });
        }
    
    
    }
    
    
    // 执行程序
    let first_contract = new FirstContractWeb3();

[https_web3js.readthedocs.io_en_latest]: https://web3js.readthedocs.io/en/latest/
[http_cw.hubwiz.com_card_c_web3.js-1.0]: http://cw.hubwiz.com/card/c/web3.js-1.0/
[https_www.npmjs.com_package_browserify]: https://www.npmjs.com/package/browserify

发表评论取消回复

表情：

评论列表（有 0 条评论，219人围观）

还没有评论，来说两句吧...

相关阅读

相关 WEB漏洞-SQL注入之报错盲注

一、导图 ![e29433d34b9740ef8d2d6a1e204a335c.png][] ![e8b57265a6b0433282a46154543ca995.pn

心已赠人/ 2023年09月23日 22:31/ 0 赞/ 150 阅读

相关 web3.js与合约交互

web3.js官方文档：[https://web3js.readthedocs.io/en/v1.2.11/index.html][https_web3js.readthe

水深无声/ 2022年05月20日 06:17/ 0 赞/ 563 阅读

相关【以太坊开发重磅推荐】基于ethers.js库同时兼容实现MetaMask钱包和独立的HDWallet钱包代码总结（真比web3.js强大不知道多少倍）

ethers.js官方推荐的MetaMask操作：[https://docs.ethers.io/ethers.js/html/cookbook-providers.htm

Love The Way You Lie/ 2021年09月18日 22:10/ 0 赞/ 388 阅读

相关【重磅推荐】使用 Infura【第三方的以太坊节点】和 web3.js 或 ethers.js测试运行以太坊合约（必须https开头,否则连接失败）

infura官方：[https://infura.io/][https_infura.io] 进去注册账号就可以获得节点了！（Metamask也是基于此）

骑猪看日落/ 2021年09月18日 22:02/ 0 赞/ 284 阅读

相关【重磅推荐】vue之web3.js以太坊开发总结与完整案例！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhp

谁践踏了优雅/ 2021年09月18日 13:16/ 0 赞/ 941 阅读

相关【重磅推荐】Python之web3.py或Flask-web3框架开发以太坊之案例总结（比js容易很多......缺点是无法和Metamask集成）

关于web3.py集成Metamask的问题，web3.py官方也明确指明：只是把测试网络的账号秘钥导入，然后连接Metamask的测试网络进行转账，似乎无法集成Metama

深藏阁楼爱情的钟/ 2021年09月18日 13:12/ 0 赞/ 539 阅读

相关基于原生web3.js（1.0版本）之solidity事件与合约调用完整案例！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhp

迈不过友情╰/ 2021年09月18日 12:12/ 0 赞/ 299 阅读

相关【重磅推荐】基于truffle-contract库实现的以太坊solidity合约调用案例（注：web3.js切勿和truffle-contract库同时使用,否则报错，无法修复！）

1、一个基于truffle-contract库实现的以太坊solidity智能合约调用案例！ 2、注意：truffle-contract库和web3.js使用no

心已赠人/ 2021年09月18日 12:04/ 0 赞/ 263 阅读

相关论truffle-contract框架与Web3.js（1.0版本）之间相互较量错误处理的终极方案（基于vue、nodejs、ES6、和原生js-es5）

说真的，当你真的弄明白了web3和solidity的原理，会发现其实基于ETH的区块链开发并没有我们想的那么难！但是对于一个初学者来说，完全靠自学又没有人教的情况下，真的很难。

迈不过友情╰/ 2021年09月18日 11:48/ 0 赞/ 237 阅读

相关【重磅推荐】web3.js之原生es5和nodejs版案例（注：web3.js切勿和truffle-contract库同时使用,否则报错，无法修复！）

案例说明（基于nodejs的web3.js开发）： web3.js 1.0版参考文档：[https://web3js.readthedocs.io/en/latest/]

ゝ一纸荒年。/ 2021年09月18日 11:20/ 0 赞/ 220 阅读