主页 > imtoken官网下载2.0 > 以太坊开发web3

以太坊开发web3

imtoken官网下载2.0 2023-07-07 05:25:39

最近在找一个H5前端来写一个简单的DApp。我和几位 H5 工程师谈过，他们都被与以太坊的互动吓倒了。虽然网上教程很多以太坊智能合约都有哪些，但是对于H5工程师来说还是有点吃力。之所以这样分析，是因为我们不了解ganache-cli（以前称为testrpc）/web3/Ethereum node/metamask之间的架构关系。

梳理一下结构关系：

web3.js与以太坊的通信是通过rpc实现的。

以太坊节点本来是提供rpc访问的，但是由于以太坊节点的地址不确定，DApp需要访问钱包，所以使用web3.js直接访问以太坊节点的rpc服务是不现实的。

ganache-cli 模拟以太坊测试节点，提供外部rpc访问（例子中经常提到：7545或:8545）。同时内置M个以太坊账户用于测试。

MetaMask 是一个以太坊网络钱包插件，也提供 web3 访问。您可以通过此插件指定以下以太坊节点是什么。因为MetaMask是一个钱包插件，解决了DApp中的支付问题。所以现在 DApps 依赖于它。

有一个以太坊教程Ethereum development web3.js，网上学习的。你可以去看看。如果你在自己的机器上做，开发 DApp 的基本过程是一样的：

1.安装Node.js

2.安装truffle：开发DApps的开发框架

基于以太坊开发还是基于eos_以太坊开发区块链_以太坊开发web3.js

nmp install -g truffle

3、安装Ganache（原testrpc）：在内存中模拟以太坊运行，对外提供rpc服务。

npm install -g ganache-cli

4. 运行 ganache-cli

ganache-cli

5.生成DApp项目

mkdir project1
truffle init

如果你想使用 Truffle 的例子，你可以使用

以太坊开发区块链_以太坊开发web3.js_基于以太坊开发还是基于eos

truffle unbox pet-shop

“宠物店”是一个示例名称

6. 编写智能合约

具体如何使用solidity编写智能合约，可以参考各种文章，这里不再赘述。

编写好的智能合约的Project1.sol文件放在contracts目录下

7. 编译部署智能合约

在迁移目录中创建文件 2_deploy_contracts.js：

var Project1 = artifacts.require("Project1");
module.exports = function(deployer) {
  deployer.deploy(Project1);
};

以太坊开发web3.js_以太坊开发区块链_基于以太坊开发还是基于eos

然后执行：

truffle compile
truffle migrate

如果您的智能合约在 ethereum-dev web3.js 上运行良好，您的以太坊智能合约现在应该部署到您用于测试的 ganache。

这里可能遇到的问题是：truffle默认生成的工程，测试用的ganache的地址和端口会设置为：7545，但执行ganache-cli后实际服务端口为：8545，需要在 truffle.js 中修改：

module.exports = {
// See 
// for more about customizing your Truffle configuration!
networks: {
development: {
host: “127.0.0.1”,
port: 7545,   //改成8545
network_id: “*” // Match any network id
}
}
};

8.编写前端js代码与以太坊交互

通常需要以下辅助js库：

以太坊开发区块链_基于以太坊开发还是基于eos_以太坊开发web3.js

在此基础上，编辑自己的业务逻辑js，一般命名为app.js。 app.js的框架如下：

App = {
web3Provider: null,
contracts: {},
init: function() {
//初始化你自己的页面、变量等
return App.initWeb3();
},
initWeb3: function() {
/*
* 初始化web3：
*/
if (typeof web3 !== ‘undefined’){
//如果你的浏览器安装了MetaMask的钱包插件，那么插件会赋值web3.currentProvider

App.web3Provider = web3.currentProvider;
}
else
{
//如果没装插件，那么创建一个基于Http的provider，这里用到的就是用ganache-cli启动所提供的rpc服务，因为ganache-cli启动的时候绑定的是localhost，所以测试所使用的浏览器也要在本机。（如何让ganache-cli绑定其他地址我还没找到）
App.web3Provider = new Web3.providers.HttpProvider(‘http://localhost:8545’);
}
web3 = new Web3(App.web3Provider);
return App.initContract();
},
initContract: function() {
/*
* 初始化智能合约，实际上就是为你的智能合约创建一个对应的js对象，方便后续调用
*/
//通常的做法是使用你的智能合约编译之后生成的abi的json文件，该文件在用truffle compile之后，生成在build/contracts/目录下，因为我用了一个Division.sol，所以用Division.json，你可以根据你的实际情况来写。
$.getJSON(‘Division.json‘, function(data) {
var DivisionArtifact = data;
App.contracts.Division = TruffleContract(DivisionArtifact);
App.contracts.Division.setProvider(App.web3Provider);
//用智能合约中的信息来更新你的web应用，App.refreshPlots()是我例子中获取智能合约中信息并更新UI的函数
return App.refreshPlots();
});
return App.bindEvents();
},
bindEvents: function() {
/*
* 事件绑定，这个可以根据你的UI来设置，例子中就是绑定一个button的点击操作
*/
$(document).on(‘click’, ‘.btn-adopt’, App.handlePlot);
},
refreshPlots: function(plots, account) {
/*
* 这个函数就是上面initContract中调用的用智能合约更新页面
*/
        //继续使用division这个智能合约做例子
         var divisionInstance;
         App.contracts.Division.deployed().then(function(instance){
                 divisionInstance = instance;
                 //getGenPlots是Division的这个智能合约的一个查询函数（不需要gas)，需要3个参数

                 return divisionInstance.getGenPlots(0,0,2);
         }).then(function(results){
                 //注意：这个地方有点意思，我原先理解也有问题，后来打印输出才搞明白
                 //智能合约返回的多个结果变量在这里就是一个results数组
                 //数组的每个成员就是智能合约返回的每个结果变量
                 //以getGenPlots为例,Division.json中定义如下：
                 /*"name": "getGenPlots",
                     "outputs": [
                     {
                         "name": "",
                         "type": "uint64[]"
                     },
                     {
                         "name": "",
                         "type": "address[]"
                     },
                     {
                         "name": "",
                         "type": "uint256[]"
                     },
                     {
                         "name": "",
                         "type": "uint8[]"
                     }
                     ],
                     "payable": false,
                     "stateMutability": "view",
                     "type": "function"
                  */
                  //那么：results[0]是uint64[]
                  //      results[1]是address[]...
                 console.log(results[0].length);
         }).catch(function(err){
                 console.log(err.message);
         });
 },
handlePlot: function(event) {
/*
 * 这个函数就是上面bindEvents中调用的响应函数,演示要花eth的函数调用

 */
    event.preventDefault();
    //从event中获取参数，这是jquery的东西，跟web3无关
    var plotId = parseInt($(event.target).data('id'));
    var divisionInstance;
     //获取以太坊帐号信息
     web3.eth.getAccounts(function(error,accounts){
         if(error)
         {
             console.log(error);
         }
         //我随便取帐号列表里的第3个帐号。
         //因为我们连的是ganache-cli的rpc模拟服务，
         //其中给我们预制了几个有eth的帐号
         //如果安装了MetaMask插件，应该获得的就是MetaMask里的帐号
         var account = accounts[2];
         App.contracts.Division.deployed().then(function(instance){
             divisionInstance = instance;
             //调用智能合约的buyPlot函数，该函数需要2个参数，
             //后面的{}中的内容跟发起以太坊交易的时候所带的默认值。
             //from: 使用哪个以太坊帐号
             //value: 要使用的eth数量，以wei为单位（1eth=10^18wei)
             //gas: 矿工费，以wei为单位
             return divisionInstance.buyPlot(plotId, 3, {from: account, value: 100000000000000000, gas:6000000});
        }).then(function(result){
            //返回结果后重新更新UI
            return App.refreshPlots();
        }).catch(function(error){
            console.log(error.message);
        });
     });
 }
};

测试你的基于web的DApp是否正常，可以使用nodejs中提供的lite-server模块作为一个简单的webserver。

要安装 lite-server，请在您的 truffle 项目目录中执行：

npm install lite-server

安装后会在项目目录下声明node_modules目录，lite-server和依赖的模块都在这个目录下。

以太坊智能合约取款_以太坊智能合约理解_以太坊智能合约都有哪些

要运行 lite-server，还需要在项目目录下编写 package.json 文件：

{
     "name": "项目名称",
     "version": "1.0.0",
     "description": "",
     "main": "truffle.js",
     "directories": {
         "test": "test"
     },
     "scripts": {
         "dev": "lite-server",
         "test": "echo \"Error: no test specified\" && exit 1"
     },
     "author": "",
     "license": "ISC",
     "devDependencies": {
         "lite-server": "^2.3.0"
     },
     "dependencies": {
         "liteserver": "^0.3.0"
     }
}

基于以太坊开发还是基于eos_以太坊开发web3.js_以太坊开发区块链

你还需要编写 bs-config.json 来配置 lite-server

{
 "server": {
 "baseDir": ["./src", "./build/contracts"]
 }
}

baseDir用于设置lite-server提供的web服务的文件路径。这个设置说明可以把上面写的app.js和它依赖的各种js放到./src目录下以太坊智能合约都有哪些，然后写index.html，集成app.js等，就大功告成了。

启动 lite-server 并执行：

npm run dev

不仅lite-server会启动，浏览器也会启动打开页面。

本文旨在厘清编写DApps的各种工具之间的架构关系，以帮助技术人员更快地理解和实现自己的项目。

具体的例子网上太多了，业务的具体代码就不写了。

最初发表于 fastkernel.com/?p=72

转载请注明原文链接：以太坊开发web3.js基于以太坊智能合约开发DApps_weixin_33862041的博客

上一篇：什么是比特币挖矿？什么是比特币挖矿？

下一篇：拉丁美洲的数字货币梦想：去美元化和收回金融主权

主页 > imtoken官网下载2.0 > 以太坊开发web3

以太坊开发web3

相关文章