Solidity开发指南(五):合约与前端交互

1.truffle+react框架的结构解析

build->contracts下存储都是编译后的文件


Solidity开发指南(五):合约与前端交互


migrations部署文件夹,js格式都是一样的,如果新添加脚本可以按第一个js修改即可


Solidity开发指南(五):合约与前端交互


前端入口,主要是index.html文件,react有很多标签语法,请自行学习


Solidity开发指南(五):合约与前端交互



Solidity开发指南(五):合约与前端交互


Solidity项目核心是App.js代码,开头就有对编译后json的引用,所以要执行脚本必须先编译。


Solidity开发指南(五):合约与前端交互


Web3是合约与前端交互核心,里面封装了很多API供调用,详见:Web3.js API


Solidity开发指南(五):合约与前端交互



Solidity开发指南(五):合约与前端交互



Solidity开发指南(五):合约与前端交互



Solidity开发指南(五):合约与前端交互



Solidity开发指南(五):合约与前端交互



Solidity开发指南(五):合约与前端交互


2.at()、deployed()、net()用法

参照:官方说明


Solidity开发指南(五):合约与前端交互



Solidity开发指南(五):合约与前端交互


3.现在我们在前端加入代码:输入框中输入一个数值点击按钮,对应MetaMask钱包地址中以太币做相应减少

修改代码:


Solidity开发指南(五):合约与前端交互


把truffle测试账号中的Eth转入MetaMask钱包地址


Solidity开发指南(五):合约与前端交互


MetaMask钱包未截图(略)


开始操作前端


Solidity开发指南(五):合约与前端交互


点击【修改】按钮 弹出MetaMask钱包


Solidity开发指南(五):合约与前端交互


点击【SUBMIT】MetaMask中Eth减少


Solidity开发指南(五):合约与前端交互


如果你有疑问欢迎加微信咨询:


https://u.wechat.com/MDHWBbNbJRv36gtFwfExkEo (二维码自动识别)


也可以关注我的公众号想我提问:


http://weixin.qq.com/r/EEzl-dLE5Y_arZae9xkC (二维码自动识别)