在Remix上編譯和部署智能合約，本地使用vscode工具調(diào)用智能合約應(yīng)用于前端界面
環(huán)境和工具
- win10
- Remix
- VScode
- Ganache-cli
- web3
實(shí)現(xiàn)步驟
Remix上編譯和部署合約
- 創(chuàng)建新合約InfoContract.sol并寫(xiě)入以下內(nèi)容：
pragma solidity ^0.5.0;
contract InfoContract {
string fName;
uint age;
function setInfo(string memory _fName, uint _age) public {
fName = _fName;
age = _age;
}
function getInfo() public view returns (string memory, uint) {
return (fName, age);
}
}
- 寫(xiě)好合約內(nèi)容之后，按照ganache-cli連接Metamask錢(qián)包里面步驟的內(nèi)容操作。
- 在remix中進(jìn)入Deploy&Run模塊，選擇Enviroment為Injected Web3，讓部署的地址是第二步設(shè)置的賬戶(hù)的metamask錢(qián)包的地址，整個(gè)步驟就是：
a.修改環(huán)境Enviroment
b.編譯合約
c.部署合約
VScode編寫(xiě)html界面和web3庫(kù)調(diào)用合約
需要確保項(xiàng)目里面有web3庫(kù)，如果沒(méi)有則按照這篇文章描述的以下步驟進(jìn)行安裝：
進(jìn)入項(xiàng)目，打開(kāi)項(xiàng)目終端使用 node.js 的包管理工具 npm 初始化項(xiàng)目，創(chuàng)建package.json 文件，其中保存了項(xiàng)目需要的相關(guān)依賴(lài)環(huán)境。
npm init
一路按回車(chē)直到項(xiàng)目創(chuàng)建完成。最后，運(yùn)行下面命令安裝web.js：npm install web3
注意： 在實(shí)際安裝過(guò)程中我發(fā)現(xiàn)web3在安裝完成后并沒(méi)有 /node_modules/web3/dist/we3.min.js 文件，這個(gè)問(wèn)題在 issue#1041中有體現(xiàn)，但官方好像一直沒(méi)解決。不過(guò)可以在這里下載所需的文件，解壓后將dist文件夾的內(nèi)容拷貝到 /node_modules/web3路徑下。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-404464.html
也可以使用npm list -g --depth 0命令查看是否全局安裝過(guò)web3，如果有就直接開(kāi)始下面的步驟：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-404464.html
- 在項(xiàng)目根目錄下新建一個(gè)
index.html文件，里面寫(xiě)入以下內(nèi)容：
到了這里，關(guān)于在前端頁(yè)面上應(yīng)用智能合約實(shí)現(xiàn)合約交互例子的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
