21026 large

063 孤荷凌寒从零开始学区块链第 63 天 DAPP018

941xue · 于 发布 · 181 次阅读

孤荷凌寒自学第149天
区块链063天Dapp018
【主要内容】
今天继续学习实战,做一个真正的依托于智能合约的DAPP。今天继续独立完善一个众筹的合约。共耗时39分钟。
(此外整理作笔记花费了约63分钟)
详细学习过程见文末学习过程屏幕录像。

【为什么我自己的html页面上的jS代码无法获取metamask钱包的账户】
使用以下Js代码:

                    web3.eth.getAccounts(function (err, accounts) {
                            if (accounts.length == 0) {
                                alert("请检查钱包是否解锁");
                            }else{
                                alert("获取的默认钱包地址:" + web3.eth.defaultAccount);
                            }
                        });

无法获取metamask钱包的账户。
以下博文给予了帮助:
https://blog.csdn.net/weixin_34414196/article/details/92411574
可是新版本的metamask钱包却找不到上面博文提到的设置,经过一阵折腾,发现目前我使用的新版本metamask钱包,原来要手动添加对DAPP所在域名的授权才可以:

这样设置之后,就我自己的DAPP页面就可以去获取metamask钱包的账户地址了。

【修改了Js调用合约函数的同时还进行交易发送的代码】

            //参与众筹---
            function dodate(intvalue){
                try{

                    var message = {to:heyueAddress,value:web3.toWei(intvalue,'ether'),'chainId': 3,'gas': 140000,'gasPrice': web3.toWei('40', 'gwei')};
                    cc.donate(message,function(err, res){
                        var output = "";
                        if (!err) {
                            output += res;
                        } else {
                            output = err;
                        }
                        document.getElementById('doback').innerHTML = "返回信息:Transaction response= " + output + "<br />";
                    });
                    return "ok";
                }catch(err){
                    alert('执行参与众筹出错:' + err);
                    document.getElementById('doback').innerHTML = "执行失败:Transaction response= " + output + "<br />";
                    return err;
                }
            }

没有报错,可以执行,且metamask钱包被调用后显示的value和gas等都与上面的message消息中设置的一样。
但却交易失败:
Warning! Error encountered during contract execution [Reverted]
https://ropsten.etherscan.io/tx/0xdb183e32e96755eab893c2387fbb838a75ce47925841e3fe6793b472d9f09d7d
我大概想到,应当是调用合约的同时发送交易value的写法上不是很恰当,只待后续继续研究。

【目前完整的html页面】
代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我要众筹</title>
    <script language="javascript" type="text/javascript" src="jquery.min.js"></script>
    <script language="javascript" type="text/javascript" src="web3.min.js"></script>
    <!-- 1. Include cryptozombies_abi.js here -->
    <script language="javascript" type="text/javascript" src="zongchou_abi.js"></script>

    <script>
// 格式化日期,如月、日、时、分、秒保证为2位数
function formatNumber (n) {
    n = n.toString()
    return n[1] ? n : '0' + n;
}
// 参数number为毫秒时间戳,format为需要转换成的日期格式
function formatTime (number, format) {
    let time = new Date(number)
    let newArr = []
    let formatArr = ['Y', 'M', 'D', 'h', 'm', 's']
    newArr.push(time.getFullYear())
    newArr.push(formatNumber(time.getMonth() + 1))
    newArr.push(formatNumber(time.getDate()))

    newArr.push(formatNumber(time.getHours()))
    newArr.push(formatNumber(time.getMinutes()))
    newArr.push(formatNumber(time.getSeconds()))

    for (let i in newArr) {
        format = format.replace(formatArr[i], newArr[i])
    }
    return format;
}

            //声明一些钱包地址:
            //下面一行定义的是部署合约的节点(创世节点)的信息,公钥
            var wallet_address="0x5227C3EF48B5A1bcF784593e46D9579D26a3b592"; //狐狸钱包的公钥,就是钱包地址,是eth网络上的一个节点。
            //下面一行定义的是节点2的信息
            var w2add="0xe2d6c2f289c53B5aEA44C47293Ba179a3bfa21f0"; //公钥

            //下面一行定义的是节点3 的信息
            var w3add="0xb40599fB0366DCf0ffe86677b005b3f20Dfa29aE"; //公钥

            //下面一行定义的是节点4 的信息
            var w4add="0x70c8461366d5368B1E79CBFc2Acf4ba56C745977"; //公钥



            // 2. Start code here
            var cc;
            var web3;

            var heyueAddress = "0x4c0ea657e70d3c31aadfd6fd1cd929bf40563db8"; //要连接的合约地址

            function startApp() {
                try {
                    var ccc=web3.eth.contract(zongchouABI);
                    cc=ccc.at(heyueAddress); //https://www.cnblogs.com/tinyxiong/p/9046626.html
                    //cc =new web3.eth.contract(cryptozombiesABI, cryptoZombiesAddress); //如果是另一个版本可能还得加上new关键字。
                    alert("连接上合约!")
                    alert(typeof cc);
                    web3.eth.getAccounts(function (err, accounts) {
                            if (accounts.length == 0) {
                                alert("请检查钱包是否解锁");
                            }else{
                                alert("获取的默认钱包地址:" + web3.eth.defaultAccount);
                            }
                        });

                } catch (err) {
                    alert(err);
                }
                alert("加载成功");

            }

            //async () => 

        //现在这种通过we3.min.js来加载钱包连接的方法,在metamask钱包和麦子钱包中都测试通过。
        window.addEventListener('load',function() {
        try{
            if (typeof web3 !== 'undefined') {
                web3 = new Web3(web3.currentProvider);
                startApp();
            } else {
                //$('#app_loading').hide();
                //alert(jQuery.i18n.prop('lrn_error_alert'));
                //mathWallet.closePage();
                alert("这儿没有钱包环境。");
            }

        }catch(err){
            alert(err);
        }
        });


            //----------------下面是自定义的与合约交互的函数-------------------------
            //--查询总金额---
            function gettotal(){
                try{
                    cc.getTotal(function(error, result){  //https://www.jianshu.com/p/15ff9da4dd8d
                    if(!error)
                    {
                        $("#total").html("已获得众筹总金额:" + result);
                       //alert(result);
                    }
                    else{
                        //alert(error);
                        $("#total").html('获取出错:' + error);
                    }});
                    //return "ok"
                    $("#total").html('正在获取。。。');
                }catch(err){
                    $("#total").html('出错 :' + err);
                }
            }

            //--查询总金额---
            function gettotal2(){
                try{
                    cc.getContractBalance(function(error, result){  //https://www.jianshu.com/p/15ff9da4dd8d
                    if(!error)
                    {
                        $("#total2").html("合约地址代币余额:" + result);
                       //alert(result);
                    }
                    else{
                        //alert(error);
                        $("#total2").html('获取出错:' + error);
                    }});
                    //return "ok"
                    $("#total2").html('正在获取。。。');
                }catch(err){
                    $("#total2").html('出错 :' + err);
                }
            }


            //查询本次授权的结束日期和时间
            function getEndTimeStamp(){
                try{
                    cc.getEndTimeStamp(function(error, result){  //https://www.jianshu.com/p/15ff9da4dd8d
                        if(!error)
                    {
                        t=formatTime(result * 1000,"Y-M-D h:m:s");
                        $("#endtime").html("本次众筹截止时间:" + t);
                       //alert(result);
                    }
                    else{
                        //alert(error);
                        $("#endtime").html('获取出错:' + error);
                    }});
                    //return "ok"
                    $("#endtime").html('正在获取。。。');
                }catch(err){
                    alert("使用授权代币转移时出错 :" + err)
                    return err;
                }
            }

            //参与众筹---
            function dodate(intvalue){
                try{

                    var message = {to:heyueAddress,value:web3.toWei(intvalue,'ether'),'chainId': 3,'gas': 140000,'gasPrice': web3.toWei('40', 'gwei')};
                    cc.donate(message,function(err, res){
                        var output = "";
                        if (!err) {
                            output += res;
                        } else {
                            output = err;
                        }
                        document.getElementById('doback').innerHTML = "返回信息:Transaction response= " + output + "<br />";
                    });
                    return "ok";
                }catch(err){
                    alert('执行参与众筹出错:' + err);
                    document.getElementById('doback').innerHTML = "执行失败:Transaction response= " + output + "<br />";
                    return err;
                }
            }



            //--------------------------调用测试---------------------------------------
            //--查询total
            function cmdone_click(){
                try{
                    gettotal();
                }catch(err){
                    alert(err);
                }
            }

            //--查询total2
            function cmdone2_click(){
                try{
                    gettotal2();
                }catch(err){
                    alert(err);
                }
            }

            //--查询本次众筹的结束日期和时间----
            function cmdtwo_click(){
                try{
                    getEndTimeStamp();
                }catch(err){
                    alert(err);
                }
            }

            //--参与众筹-------------
            function cmddo_click(){
                try{
                    var strls=document.getElementById("txtvalue").value;
                    //alert(strls);
                    if(/^[0-9]+\.?[0-9]+?$/.test(strls)){
                        var fls=parseFloat(strls);
                        //var intls=fls * (10**18);
                        k=dodate(fls);
                    }else{
                        alert('只能输入数字');
                    }
                }catch(err){
                    alert("操作失败:" + err);
                }
            }




        </script>

</head>
<body>
    <div>
        <input type="button" value="查询当前众筹总金额" id="cmdone" name="cmdone" onclick="cmdone_click();" />
        <span id="total" name="total"></span>
        <br /><br />
        <input type="button" value="查询当前众筹总金额" id="cmdone2" name="cmdone2" onclick="cmdone2_click();" />
        <span id="total2" name="total2"></span>
        <br /><br />
        <input type="button" value="查询此众筹的截止日期和时间" id="cmdtwo" name="cmdtwo" onclick="cmdtwo_click();" />
        <span id="endtime" name="endtime"></span>
        <br /><br />
        <input type="button" value="我要入筹" id="cmddo" name="cmddo" onclick="cmddo_click();" />
        <input type="text" value="0.3" id="txtvalue" name="txtvalue" />eth
        <br />
        <span id="doback" name="doback"></span>
        <br /><br />


    </div>

</body>
</html>

github: https://github.com/lhghroom/Self-learning-blockchain-from-scratch
原文地址:https://www.941xue.com/content.aspx?id=1613
【欢迎大家加入[就是要学]社群】
如今,这个世界的变化与科技的发展就像一个机器猛兽,它跑得越来越快,跑得越来越快,在我们身后追赶着我们。
很多人很早就放弃了成长,也就放弃了继续奔跑,多数人保持终身不变的样子,原地不动,成为那猛兽的肚中餐——当然那也不错,在猛兽的逼迫下,机械的重复着自我感觉还良好地稳定工作与生活——而且多半感觉不到这有什么不正常的地方,因为在猛兽肚子里的是大多数人,就好像大多数人都在一个大坑里,也就感觉不出来这是一个大坑了,反而坑外的世界显得有些不大正常。
为什么我们不要做坑里的大多数人?
因为真正的人生,应当有百万种可能 ;因为真正的一生可以有好多辈子组成,每一辈子都可以做自己喜欢的事情;因为真正的人生,应当有无数种可以选择的权利,而不是总觉得自己别无选择。因为我们要成为一九法则中为数不多的那个一;因为我们要成为自己人生的导演而不是被迫成为别人安排的戏目中的演员。
【请注意】
就是要学社群并不会告诉你怎样一夜暴富!也不会告诉你怎样不经努力就实现梦想!
【请注意】
就是要学社群并没有任何可以应付未来一切变化的独门绝技,也没有值得吹嘘的所谓价值连城的成功学方法论!
【请注意】
社群只会互相帮助,让每个人都看清自己在哪儿,自己是怎样的,重新看见心中的梦想,唤醒各自内心中的那个英雄,然后勇往直前,成为自己想要成为的样子!
期待与你并肩奔赴未来!
www.941xue.com
QQ群:646854445 (【就是要学】终身成长)

【同步语音笔记】
https://www.ximalaya.com/keji/19103006/337601118

【学习过程屏幕录屏】
https://www.bilibili.com/video/BV1dt4y197uy/

  • 暂无回复。