如何写一个在WEB网页中调用以太坊智能合约的DAPP

在【使用web3调用智能合约的简单例子】中，使用的是Nodejs来调用智能合约，Nodejs适合做服务器端的应用。如何在WEB网页中调用智能合约，其实方法类似，同样是使用web3.js库。网页版例子的运行效果如下图所示，更加的直观。

网页版的例子，同样的为了简单起见，仍旧直接使用Remix自带的Storage.sol合约例子，就是简单的存储和获取一个整数数值。前两个步骤 1.编写智能合约 和 2.部署智能合约 与【使用we痛痒b3调和用智能合约的简单例子 】的前两个步骤完全一样，这里主要讲述一下后面的两个步骤 3. 安装一个简易版的WEB服务器 和 4. 在网页中调用智能合约。

3. 安装一个简易版的WEB服务器

使用 lite-server 一个轻量级的Nodejs实现的WEB服务器，作为开发使用很方便，安装方式：

npm install lite-server --save-dev

配置：在package.json文件中增加

“scripts”: {
“dev”: “lite-server”
}

启动

npm run dev

启动后就会在浏览器中自动打开当前目录下的 index.html 页面，我们就在这个页面中使用 javascript 实现具体的逻辑。

4. 在网页中调用智能合约

开始使用jQuery开发index.html网页，主要的代码是：

if (window.ethereum) {
   
   //连接到Metamask
    web3 = new Web3(ethereum);
} else {
   
    ///直接连接到Ganache
    web3 = new Web3(new Web3.providers.HttpProvider("http://127.0.0.1:7545"));
}

//读取合约的ABI信息
var data = $.ajax({
    url: "./Storage.json", async: false }).responseText;

//创建合约对象，使用的合约地址是我们刚创建的合约地址
var contract = new web3.eth.Contract(JSON.parse(data), '0xc8b522331e8A2369e87Cb4be6bE7C74Be86f1AAB');

$("#setValue").click(function () {
   
    try {
   
        ethereum.enable();
        contract.methods.store($("#txtValue").val()).send({
    from: '0x51BF497D8B47C5754220be9256F0Cb9E2Cd688B8' });
        $("#msg").text("设置值成功！"