使用Web3钱包将你的ICO众筹合约与网站连接

Web3 Integration

本教程将指导你使用Web3 Javascript库将已部署的众筹合约与你网站上的网页连接起来。一旦你的币安智能链合约与你的网站相关联，你就可以向创建成功的ICO众筹迈进一步。剩下的唯一事情就是邀请你的投资者访问你的目标网页，这样他们只需点击几下即可从浏览器中投资你的代币。如何获取流量到你的众筹网站和项目营销不在本教程的讨论范围。

本教程假设您已使用我们的众筹合约生成器部署了涨价众筹智能合约。如果你想部署不同类型的众筹合约，请查看我们的创建众筹页面以获取更多选项。

众筹销售页面示例

我们已经在Ropsten测试网络部署了一个示例众筹合约，以展示如何与它进行交互。你将需要MetaMask插件钱包或任何其它Web3币安智能链钱包与其进行交互。我们还部署了与众筹合同交互的示例销售页面。我们已经包含了从合同中获取数据的功能，例如代币余额，代币的当前价格，以及更改合约状态的功能，例如购买代币，提取代币和申请退款等功能。我们在本教程中进一步解释的所有元素都包含在页面中。

示例销售页面

如你所见，该页面是一个没有任何CSS样式的简洁html文件。这是因为你希望在自己的网站上集成自己的销售页面，该页面应该有自己独特的样式。我们的页面仅展示功能。

示例页面使用web3库，该库位于同一文件夹中。我们在zip文件中包含了这两个文件，可以在这里下载。你可以从示例页面开始在自己的html模板中集成web3，或者继续阅读本教程以了解它的工作原理。

设置页面

在调用合约函数之前，请确保将“web3.min.js”导入到你的页面。之后，你需要实例化合约实例，以便你可以调用合约方法。看看下面的代码:

我们导入了web3库，创建了一些变量以供以后使用，使用Metamask注入对象实例化web3对象，实例化javascript代表合约对象，并从web3获取币安智能链帐户。确保从示例页面粘贴ABI字符串。

检查Web3钱包连接

接下来，你可能想要检查投资者是否正在使用Web3浏览器，并在必要时通知他下一步的步骤。我们将在网页头部创建一个函数来检查Web3对象是否存在，并向投资者显示一个提示:

获取帐户信息

由于我们有投资者账户的注入，我们现在可以获得一些信息，如BNB余额，代币余额等:

<head>
  <script type="text/javascript">
    // 获取我的地址，BNB和代币余额，以及当前兑换比例（价格）
    function getAccountInfo() {
      web3.eth.getBalance(web3.eth.accounts[0], function(err, ethBalance) {
        IncreasingPriceCrowdsaleInstance.balanceOf(web3.eth.accounts[0], (error, tokenBalance) => {
          document.getElementById("my-address").innerText = web3.eth.accounts[0];
          document.getElementById("my-eth-balance").innerText = web3.fromWei(ethBalance) + " BNB";
          document.getElementById("my-token-balance").innerText = web3.fromWei(tokenBalance) + " " + tokenSymbol;
          document.getElementById("token-name").innerText = tokenName + " (" + tokenSymbol + ")";
          isWeb3Connected();
          getCurrentRate();
        });
      });
    }
  </script>
</head>
<body onload="getAccountInfo()">
  <p>Web3 wallet is connected: <span id="web3-wallet">no. Please use MetaMask to interact with Ethereum.</span></p>
  <p>My address: <span id="my-address">Web3 not connected.</span> </p>
  <p>My BNB balance: <span id="my-eth-balance">Web3 not connected.</span></p>
  <button onclick="getAccountInfo()">Update All</button>
</body>

请注意，在加载页面主体时会调用函数getAccountInfo()。我们还添加了一个更新按钮，当用户点击它时调用getAccountInfo并按需更新页面上的文本。

购买代币

投资者可以通过两种方式购买代币:

- 通过直接发送BNB到众筹合约地址:0xCa7532c24aA2B2C1389AC8B1B6018e0eE0c8e9c4,或者
- 通过在众筹合约上调用buyTokens()方法函数。

直接发送BNB不需要Web3钱包，任何币安智能链钱包都可以这样做。确保你向投资者提及此选项并在销售页面上列出合约地址。另请注意，由于将BNB作为正常交易发送到合约会调用合约的功能，因此21000Gas交易费可能还不够。你可能需要告诉他们增加交易费限制（gas limit）（不是交易费gas价格）。

以下是如何调用众筹合约的buyTokens()函数:

投资者将首先在输入框中指定他想要投资多少BNB，然后单击“购买代币”按钮。函数buyTokens()将在众筹合约上调用buyTokens(..)函数，其中包含帐户和值作为参数。只要交易号可用，该功能就会将其显示给投资者。

取回代币

由于涨价众筹合约是在完成众筹后交付代币，意味着代币和BNB都在成功结束后交付，投资者必须在众筹合约上调用withdrawFunds(..)方法函数，最终将他们的代币取回到他们的自己的钱包地址。在调用withdrawTokens函数之前，他们的代币被锁定在众筹合约中。这是一段代码片段:

申请退款

如果众筹失败（在达到众筹目标之前结束），投资者有权申请退款并获得他们的BNB。他们可以通过调用众筹合约的claimRefund(..)方法函数来实现。这是一段代码片段:

恭喜！你现在已将你的网站与币安智能链众筹合约相关联，你的ICO众筹已准备好接受投资。

分享本文

接下来

如果你已完成本教程的学习，我们建议你按照以下教程进行操作:

支持Web 3.0的币安智能链钱包和浏览器插件钱包

涨价众筹定义解释

与我们联系

感谢你阅读此内容！你可以:
- 在微博上关注我们
- 订阅我们的优酷频道

B代币一键发币博客