天天看點

[區塊鍊筆記8] 前端js通過metamask的web3與智能合約互動

注意:這是一篇沒有任何營養的筆記

文章目錄

  • ​​準備階段​​
  • ​​Ganache與metamask連結​​
  • ​​前端頁面​​
  • ​​第1個bug​​
  • ​​第2個bug​​
  • ​​今日總結​​

準備階段

truffle架構搭建

編寫solidity代碼

編輯遷移檔案

編輯truffle-config.js檔案

truffle編譯

啟動Ganache

truffle部署

ps:前幾篇筆記裡有搭建過程

Ganache與metamask連結

把ganache的12個單詞複制到metamask裡設定密碼

設定metamask網絡到http://127.0.0.1:7545

完成連結

前端頁面

未完成,因為遇到bug了

在truffle console裡面使用的語句到了前端js裡面就完全失效,真的已經無語了。這個破東西整了一天,各種百度最後還是沒有成功。希望有明白怎麼回事的大佬評論區留言(估計不會有人回答的)

ps:等以後再回來做這部分

還是先說一下菜雞這一天在整的東西吧, 希望大家幫忙看一看,bug在文末說明

先把solidity源碼放到remix裡面編譯一下,拿到他的ABI,放到一個js檔案裡去。

然後就編寫前端代碼

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>front-web</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script src="web3.min.js"></script>
    <script type="text/javascript" src="testcontract_abi.js"></script>
</head>
<body>
    <h4>賬号: <span id="account"></span></h4>
    <hr>
    <div id="content">
        <h4>智能合約: Test</b> </h4>
        <p>擷取智能合約中的x值: <span id="value"></span></p>
        
        <form role="form">
            <h4>設定x值</h4>
            <input id="newValue"  type="text"></input>
            <input type="button" name="submit" value="送出"/>
        </form>
    </div>

    <script type="text/javascript">
        var testContract;
        var userAccount;
        function startApp() {
            var TestAddress = 'xxxxxxxxxxxxxxxxxxxxxxxx';
            var test = web3.eth.contract(testContractABI);
            testContract = test.at(TestAddress);
            //userAccount = web3.eth.accounts[0];
            // var accountInterval = setInterval(function() {
            //  // Check if account has changed
            //  if (web3.eth.accounts[0] !== userAccount) {
            //      alert('user account changed');
            //  }
            // }, 100);
            updateValue();
        }
        function updateValue() {
            testContract.getX(function(err, result) {
                if (err) {
                    alert('error');
                } else {
                    $('#value').html(result);
                }
            });
        }
        window.addEventListener('load', function() {
            // Checking if Web3 has been injected by the browser (Mist/MetaMask)
            if (typeof web3 !== 'undefined') {
                // Use Mist/MetaMask's provider
                web3 = new Web3(web3.currentProvider);
            } else {
                alert('please install MetaMask');
            }
            startApp();
        })
    </script>
</body>
</html>      

第1個bug

web3.eth.accounts[0] 這個東西總是undefine。

百度了好多,有的說需要用異步調用,有的說要用函數來擷取,都沒有成功。

但是這個在truffle console下面就可以執行啊。難道這兩個web3不是一個檔案裡的麼。

第2個bug

pragma solidity ^0.4.23;
contract Test {
  int x = 5;  
  function getX() public view returns (int) { 
    return x;
  }
  function setX(int _x) public {
    x = _x;
  }
}      

今日總結

繼續閱讀