在前端页面上应用智能合约实现合约交互例子-Toy模板网

这篇具有很好参考价值的文章主要介绍了在前端页面上应用智能合约实现合约交互例子。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在Remix上编译和部署智能合约，本地使用vscode工具调用智能合约应用于前端界面

环境和工具

win10
Remix
VScode
Ganache-cli
web3

实现步骤

Remix上编译和部署合约

创建新合约InfoContract.sol并写入以下内容：

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);
   }   
}

写好合约内容之后，按照ganache-cli连接Metamask钱包里面步骤的内容操作。
在remix中进入Deploy&Run模块，选择Enviroment为Injected Web3，让部署的地址是第二步设置的账户的metamask钱包的地址，整个步骤就是：
a.修改环境Enviroment
b.编译合约
c.部署合约

在前端页面上应用智能合约实现合约交互例子

VScode编写html界面和web3库调用合约

需要确保项目里面有web3库，如果没有则按照这篇文章描述的以下步骤进行安装：

进入项目，打开项目终端使用 node.js 的包管理工具 npm 初始化项目，创建package.json 文件，其中保存了项目需要的相关依赖环境。
npm init
一路按回车直到项目创建完成。最后，运行下面命令安装web.js：
npm install web3
注意：在实际安装过程中我发现web3在安装完成后并没有 /node_modules/web3/dist/we3.min.js 文件，这个问题在 issue#1041中有体现，但官方好像一直没解决。不过可以在这里下载所需的文件，解压后将dist文件夹的内容拷贝到 /node_modules/web3路径下。

也可以使用npm list -g --depth 0命令查看是否全局安装过web3，如果有就直接开始下面的步骤：文章来源地址https://www.toymoban.com/news/detail-404464.html