本文共 3396 字，大约阅读时间需要 11 分钟。

初始化项目

如果是linux环境需要truffle.json cp truffle-config.js truffle.js

编辑InfoContract.sol

pragma solidity ^0.4.23;contract Info {       string name;    uint age;    event doneEvent(string name, uint age);    function setInfo(string _name, uint _age) public {           name = _name;        age = _age;        emit doneEvent(name, age);    }    function getInfo() public view returns (string, uint) {           return (name, age);    }}

编译合约 truffle compile

打开Ganache，分配一个区块链网络

配置truffle.js文件， 127.0.0.1和7545端口

编辑一个2_info_migration.js文件

const Info = artifacts.require("Info");module.exports = function(deployer) {     deployer.deploy(Info);};

部署合约truffle migrate

npm init用npm初始化，因为后续要用npm 来install包

npm install truffle-contract安装truffle-contract,方便和智能合约交互

创建src和js和css文件夹,用于存放html和js和css文件

把web3.min.js和jquery.min.js和truffle-contract.min.js拷贝到js目录下

css目录下创建index.css,内容如下

body {   	background-color: #F0F0F0;}#info {   	padding: 20px;	background-color: #FFF;}#button {   	width: 100px;}

编辑src下的index.html

	
   		
   					
   
		
    
Dapp demo
		
    
		
    
		
    姓名: 		
    		
    
		
    年龄: 		
    		
    
    
		
    更新		
    
正在加载
	
   

编辑app.js文件

App = {   	web3Provider: null,	contracts: {   },	init: function(){   		ethereum.enable();		return App.initWeb3();	},	initWeb3: function(){   		 		if (typeof web3 !=='undefined') {   			App.web3Provider = web3.currentProvider;			web3 = new Web3(App.web3Provider);			//web3.eth.defaultAccount = web3.eth.accounts[0];		} else {   			App.web3Provider = new Web3.providers.HttpProvider('http://localhost:7545');			web3 = new Web3(App.web3Provider);		}		// ethereum.enable(function(){     //           web3.eth.getAccounts((error, accounts) => {     //                web3.eth.defaultAccount = accounts[0];  //                 console.log(accounts)  //           })  //       }) 		App.initContract();	},	initContract: function() {   		$.getJSON('../build/contracts/InfoContract.json', function(data) {   			App.contracts.InfoContract = TruffleContract(data);			App.contracts.InfoContract.setProvider(App.web3Provider);			App.watchChanged();			return App.getInfo();		});		App.bindEvents();					},	getInfo: function() {   		App.contracts.InfoContract.deployed().then(function(instance) {   			return instance.getInfo.call();		}).then(function(result) {   			$('#loader').hide();			$('#info').html(result[0] + '(' + result[1] + ')years old');		}).catch(function(error) {   			alert(error);		});	},		bindEvents: function() {   		$('#button').click(function() {   			$('#loader').show();			App.contracts.InfoContract.deployed().then(function(instance) {   				var message = {   from: "0x549697a9ca1D3D5a2068b165f6B5AC70Da6ef813", gas:500000};				return instance.setInfo.sendTransaction($('#name').val(), $('#age').val(), message);			}).then(function(result) {   				return App.getInfo();			}).catch(function(error) {   				alert(error);			});		});	},	watchChanged: function() {   		App.contracts.InfoContract.deployed().then(function(instance) {   			var infoEvent = instance.doneEvent();			infoEvent.watch(function(error, result) {   				$('#loader').hide();				$('#info').html(result.args.name + '(' + result.args.age + ')years old');			});		});	}}$(window).on('load', function() {   	App.init();});

开启服务器，接着就可以进行操作了

但是会报错，不知道啥原因。明白的大佬麻烦回复一下。

转载地址：http://bknh.baihongyu.com/