dapp开发二

最新推荐文章于 2024-06-18 11:14:52 发布

人!=机器

最新推荐文章于 2024-06-18 11:14:52 发布

阅读量386

点赞数

分类专栏： dapp 区块链

本文链接：https://blog.csdn.net/zhl11112222/article/details/105123183

版权

区块链同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

dapp

1 篇文章 0 订阅

订阅专栏

智能合约发布到测试网

1.首先写一个简单的智能合约

pragma solidity ^0.4.10;
contract zz{
   string  public name;
   function add(string _name) public {
       name=_name;
   }
   function getname() view returns(string)
   {
       return name;
   }
}

在这里插入图片描述

2.选择连injected web3

3.下载metamask，一个钱包

4.写前端页面

(1)下载web3.js 1.0以上的包
(2)需要jquery.js包
在这里插入图片描述
(3)html输入界面和输出界面

在这里插入图片描述

(4)重要的js操作
1.检测你是否有metamask没有去下载
在这里插入图片描述
2.连接metamask授权

3.把在remix上编译好的智能合约的ABI和合约地址复制到new web3.eth.Contract里

 var inff =new web3.eth.Contract([
        {
            "constant": false,
            "inputs": [
                {
                    "name": "_name",
                    "type": "string"
                }
            ],
            "name": "add",
            "outputs": [],
            "payable": false,
            "stateMutability": "nonpayable",
            "type": "function"
        },
        {
            "constant": true,
            "inputs": [],
            "name": "getname",
            "outputs": [
                {
                    "name": "",
                    "type": "string"
                }
            ],
            "payable": false,
            "stateMutability": "view",
            "type": "function"
        },
        {
            "constant": true,
            "inputs": [],
            "name": "name",
            "outputs": [
                {
                    "name": "",
                    "type": "string"
                }
            ],
            "payable": false,
            "stateMutability": "view",
            "type": "function"
        }//ABI
    ],"0x8D8D33b44D43ac8C419A2EDf2E74708b75ae02C1 ");//合约地址 合约地址我换了，这不是正确的只是举个例子

ABI在这里
在这里插入图片描述
4.发送交易和取数据到页面上

(5)完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.4.1.min.js"></script>
    <script src="web3_1.2.6.min.js"></script>
</head>

<div>
    <div id="hh"></div>
    <label >输入</label>
    <input type="text" id="name">
    <button type="button" id="button1">发送</button>
    <button type="button" id="button2">获取数据</button>
    <div id="getname"></div>
</div>
<body>
<script type="text/javascript">
    window.addEventListener('load', function() {
        if (typeof web3 !== 'undefined') {
            web3 = new Web3(web3.currentProvider);
            if (web3.currentProvider.isMetaMask == true) {
                $("#hh").html("MetaMask可用");

            } else {
                $("#hh").html("非MetaMask环境");
            }

        } else {
            $("#hh").html("No web3? 需要安装<a href='https://metamask.io/'>MetaMask</a>!");
        }
    });
    var web3Provider;//非常重要，你的demo连接metasmak请求授权
    if (window.ethereum) {
        web3Provider = window.ethereum;
        try {
            // 请求用户授权
            window.ethereum.enable();
        } catch (error) {
            // 用户不授权时
            console.error("User denied account access")
        }
    } else if (window.web3) {   // 老版 MetaMask Legacy dapp browsers...
        web3Provider = window.web3.currentProvider;
    }

    web3= new Web3(web3Provider);//web3js就是你需要的web3实例*/
    var inff =new web3.eth.Contract([
        {
            "constant": false,
            "inputs": [
                {
                    "name": "_name",
                    "type": "string"
                }
            ],
            "name": "add",
            "outputs": [],
            "payable": false,
            "stateMutability": "nonpayable",
            "type": "function"
        },
        {
            "constant": true,
            "inputs": [],
            "name": "getname",
            "outputs": [
                {
                    "name": "",
                    "type": "string"
                }
            ],
            "payable": false,
            "stateMutability": "view",
            "type": "function"
        },
        {
            "constant": true,
            "inputs": [],
            "name": "name",
            "outputs": [
                {
                    "name": "",
                    "type": "string"
                }
            ],
            "payable": false,
            "stateMutability": "view",
            "type": "function"
        }
    ],"0x8D8D32b44D43ac8C538A2EDf2E74708b75ae02C0");
    web3.eth.getCoinbase(function (error, result) {if (!error)
            console.log(result);//授权成功后result能正常获取到账号了
         $("#button1").on('click',function () {
            var name=$("#name").val();
            alert(name);
          inff.methods.add(name).send({from: result}, function (errror, result) {
                 console.log("交易哈希" + result);
             });
         });
    });
    $("#button2").on('click',function () {
         inff.methods.getname().call().then(function (result) {
              alert(result);
              $("#getname").html(result);
        });
    });

</script>
</body>
</html>

(6)操作演示
1.首先打开页面
如果你有metamask，它会直接弹出metamask，提醒你登录
在这里插入图片描述
2.左上角它检测metamask是否存在，没有的话会直接去官网下载
3.输入hello_word 点击发送

注意测试网络可能不好，不能及时弹出metamask确认交易

在这里插入图片描述

4.点击获取

人!=机器

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
dapp开发二

智能合约发布到测试网1.首先写一个简单的智能合约pragma solidity ^0.4.10;contract zz{ string public name; function add(string _name) public { name=_name; } function getname() view returns(string) { ...
复制链接

扫一扫

专栏目录