最近要找个H5的前端写个简单的DApp，聊过几个H5的工程师，都被跟以太坊交互的部分吓住了。虽然网上有N多的教程，但是对于H5工程师来说，还是有些困难。分析其原因，在于不了解ganache-cli（原来叫testrpc）/web3/以太坊节点/metamask之间的架构关系。
梳理一下架构关系：
web3.js与以太坊通信是通过rpc的方式实现的。
以太坊节点本来提供了rpc的访问方式，但是因为以太坊节点的地址不确定，并且DApp需要访问钱包，所以用web3.js直接访问以太坊节点的rpc服务是不现实的。
ganache-cli模拟了一个以太坊的测试节点并提供对外的rpc访问方式（就是例子里经常说的
MetaMask是一个以太坊的网络钱包插件，它也提供了web3的访问方式。而且可以通过这个插件指定后面的以太坊节点是什么。因为MetaMask是个钱包插件，所以解决了DApp中的支付问题。所以现在的DApp都依赖它。
有一个，是在线学习的，大家可以去看看，如果自己本机上搞，开发DApp的基本过程都是一样的如下：
1、安装NodeJS
2、安装truffle:一个开发DApp的开发框架
nmp install -g truffle
3、安装Ganache（原来用testrpc）:在内存中模拟以太坊运行并对外提供rpc服务。
npm install -g ganache-cli
4、运行ganache-cli
ganache-cli
5、生成一个DApp的项目
mkdir project1truffle init
如果想用truffle中的某个例子，可以用
truffle unbox pet-shop
“pet-shop”是例子名称
6、编写智能合约
具体如何用solidity编写智能合约可参考各种文章，这里不再重复。
编写好的智能合约的Project1.sol文件放到contracts目录下
7、编译和部署智能合约
在migrations目录下创建文件2_deploy_contracts.js：
var Project1 = artifacts.require("Project1");module.exports = function(deployer) { deployer.deploy(Project1);}; 之后执行：
truffle compiletruffle migrate
如果你的智能合约没有问题的话，现在你的应该已经部署到你用来测试的ganache中去了。
这里可能遇到的问题是：默认的truffle生成的项目，测试用的ganache的地址和端口会被设置成
module.exports = {// See // for more about customizing your Truffle configuration!networks: {development: {host: “127.0.0.1”,port: 7545, //改成8545network_id: “*” // Match any network id}}}; 8、编写前端的js代码跟以太坊交互
通常需要如下的辅助js库:
在此基础上，编辑你自己业务逻辑的js，通常命名为app.js，app.js的框架如下：
App = {web3Provider: null,contracts: {},init: function() {//初始化你自己的页面、变量等return App.initWeb3();},initWeb3: function() {/** 初始化web3：*/if (typeof web3 !== ‘undefined’){//如果你的浏览器安装了MetaMask的钱包插件，那么插件会赋值web3.currentProviderApp.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" }} 还需要编写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，而且会启动一个浏览器去打开页面。
本文的目的是为了澄清一下写DApp的各项工具之间的架构关系，帮助技术人员更快的理解和实现自己的项目。
具体的例子网上多如牛毛，就不去写业务的具体代码了。
想先搞明白了，再自己玩的还是推荐一下这个