metamask怎么用,metamask手机app端怎么使用

2022-07-14 17:42:23 焦点

　　网络技术世界正在迅速向Web 3.0过渡。人们似乎厌倦了中心化的平台，数字隐私每天都被大型组织攻击和出售。所以需要一个解决方案，Web 3.0似乎是目前最好的答案。本文的目的不是介绍区块链和分散系统的专业知识，而是展示如何使用React、Solidity和Web3.js来构建真实世界的dApp。　　

　　地址：github.com/QuintionTan… 　　

　　工具概述这里是本文中要使用的一些工具。　　

　　智能合约工具：Truffle Framework，提供了一套开发以太坊智能合约的工具。它提供智能合同管理、部署和迁移、网络管理、开发控制台和其他工具。以太坊测试链：Ganache，个人区块链，本地开发的区块链，可以用来模仿大众区块链的所有行为。编写智能合同语言：Solidity，一种实现智能合同的面向对象高级语言。区块链钱包插件：Metamask。本文将使用MetaMask Google扩展，实现浏览器与测试以太坊区块链网络的连接。前端开发框架：Reactweb3js:一个JavaScript库，允许与以太坊区块链通信。它将React应用程序转变为支持区块链的应用程序。准备环境首先，根据Truffle框架下载，使用以下命令：　　

　　NPINSTALL-G TRUFFLE接下来，下载安装Ganache。成功的安装将通过以下界面快速构建本地ETH网络：　　

　　NPM安装Ganache-在全局安装后，执行以下命名来启动本地ETH网络：　　

　　Ganache启动网络并生成一些可用于测试的帐户地址和私钥，如下所示：　　

　　可用帐号======================(0)0xa 57 f 1010d 3 BC 4 ACF 6572 c 42 b 794 b 67 daf 35 b 84 f 2(1000 ETH)(1)0x 60 a 73 b 46 ea 815160 c 83c C3 f 89d 855 a 4b 8 b 6 f 21 b 5(1000 ETH)(2)0x 518 b 8 c 54 ff 5 ca 623707 FB 9 ca 78 b 7384259722 　　

7c0c2d2aa10c66fea31接下来，需要安装使用 Metamask。将 Metamask 扩展添加到 google chrome ，导入上面的账号，效果如下：

后续的开发过程将不会使用 ganache 终端来构建开发区块链网络，而是使用其客户端。

开始构建dApp 前期准备工作已经设置好，接下来编写智能合约。打开一个终端并使用以下命令在项目文件夹中创建一个文件夹：

mkdir blockchain现在使用以下命令在区块链文件夹中再创建一个合约文件夹：

cd blockchainmkdir contractscd contracts运行以下命令来创建一个 truffle 项目，这样就可以开发智能合约：

truffle init使用上面的命令，应该得到如下输出：

Init successful, sweet!Try our scaffold commands to get started: $ truffle create contract YourContractName # scaffold a contract $ truffle create test YourTestName # scaffold a testhttp://trufflesuite.com/docs打开项目文件夹，可以看到以下文件夹和文件结构：

contracts 文件夹中，将编写智能合约。migrations 文件夹中，将迁移新创建的智能合约。test 文件夹中，通常用于编写测试用例来测试智能合约。truffle-config.js 文件包含 truffle 项目的所有配置。现在编写智能合约，在 contracts 文件夹中创建一个新文件并将其命名为 contacts.sol，并在其中写入以下代码：

// SPDX-License-Identifier: MITpragma solidity >=0.4.22 <0.9.0;这始终是智能合约文件中的第一行，用来指定 solidity 的版本。现在来编写代码制作第一个智能合约 Contacts ：

contract Contacts { }现在定义一个状态变量来跟踪智能合约中联系人的数量，代码如下：

pragma solidity >=0.4.22 <0.9.0;contract Contacts { uint public count = 0; // 状态变量}这是一个特殊的变量，写入该变量的任何数据都将存储在区块链存储中。代码中使用一个特殊的修饰符关键字，即 public ，定义的变量允许智能合约外对其进行访问，初始赋值为 0 。现在有了一个状态变量，并且里面有一个值。现在进入前端部分，首先尝试访问这个公共状态变量。

在 blockchain 目录中运行以下命令以创建一个响应应用程序：

npx create-react-app contacts接下来进入项目目录，增加依赖：

cd contactsyarn add web3如果使用的是 create-react-app 版本 >=5，可能会遇到构建问题，这是因为最新版本的 create-react-app 中不包含 NodeJS 的 polyfill。需要按照下面的方式来解决这个问题：

yarn add --dev react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer然后在项目根目录下创建文件 config-overrides.js ，增加以下代码：

"scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "react-scripts eject"}如上所见，添加 web3.js 作为该项目的依赖项，并解决上面的问题后，以使创建的 React 应用程序与上面创建的智能合约进行交互。

将在 App.js 文件中编写所有代码，代码如下：

import { useEffect, useState } from "react";import Web3 from "web3";function App() { const = useState(); // 设置账号的状态变量 useEffect(() => { async function load() { const web3 = new Web3( Web3.givenProvider || "http://localhost:7545" ); const accounts = await web3.eth.requestAccounts(); setAccount(accounts<0>); } load(); }, <>); return <div>当前账号： {account}</div>;}export default App;为了能够成功在本地运行应用，需要在后端上调整一些配置，回到合同文件夹，打开 truffle-config.js 文件并添加以下属性：

module.exports = { networks: { development: { host: "127.0.0.1", port: 7545, network_id: "*", }, }, compilers: { solc: { optimizer: { enabled: true, runs: 200, }, }, },};然后在 migrations 文件夹中，创建一个新文件并将其命名为 2_deploy_contracts.js 代码如下：

const Contacts = artifacts.require("./Contacts.sol");module.exports = function (deployer) { deployer.deploy(Contacts);};在终端中，输入一下命令以迁移智能合约：

cd contractstruffle migrate应该会看到如下输出：

回到前端 React 文件夹并运行以下命令来运行应用程序：

cd contactsyarn start这将在浏览器中打开 React 应用程序，并会触发 Metamask 与区块链网络进行交互，应该会看到如下所示的屏幕：

现在已经成功地与智能合约交互并检索了账户 ID，继续在智能合约中创建一个新函数来获取联系人列表并将其发送到前端并在视图上呈现它们。

// SPDX-License-Identifier: MITpragma solidity >=0.4.22 <0.9.0;contract Contacts { uint public count = 0; // 状态变量 struct Contact { uint id; string name; string phone; } constructor() public { createContact('QuintionTang', '18900000000'); } mapping(uint => Contact) public contacts; function createContact(string memory _name, string memory _phone) public { count++; contacts = Contact(count, _name, _phone); }}现在再次迁移此合约：

truffle migrate完成后回到前端React 应用程序，在 src/ 文件夹中创建一个新文件 config.js，配置合约地址和合约ABI，这些信息可以在文件blockchain/contracts/build/contracts/Contacts.json 中找到，代码如下：

export const CONTRACT_ADDRESS = "0xD3329a764935C7AA9B32f162C196E28B4e3310A3"; // 合约地址export const CONTRACT_ABI = < { inputs: <>, payable: false, stateMutability: "nonpayable", type: "constructor", }, { constant: true, inputs: < { internalType: "uint256", name: "", type: "uint256", }, >, name: "contacts", outputs: < { internalType: "uint256", name: "id", type: "uint256", }, { internalType: "string", name: "name", type: "string", }, { internalType: "string", name: "phone", type: "string", }, >, payable: false, stateMutability: "view", type: "function", }, { constant: true, inputs: <>, name: "count", outputs: < { internalType: "uint256", name: "", type: "uint256", }, >, payable: false, stateMutability: "view", type: "function", }, { constant: false, inputs: < { internalType: "string", name: "_name", type: "string", }, { internalType: "string", name: "_phone", type: "string", }, >, name: "createContact", outputs: <>, payable: false, stateMutability: "nonpayable", type: "function", },>;现在将智能合约地址和 ABI 导入 App.js 文件，如下所示，并使用以下代码更新加载函数：

import { useEffect, useState } from "react";import Web3 from "web3";import { CONTRACT_ABI, CONTRACT_ADDRESS } from "./config";function App() { const = useState(); const = useState(); const = useState(<>); useEffect(() => { async function load() { const web3 = new Web3( Web3.givenProvider || "http://localhost:7545" ); const accounts = await web3.eth.requestAccounts(); setAccount(accounts<0>); // 使用ABI和地址实例化智能合约。 const contactListByContract = new web3.eth.Contract( CONTRACT_ABI, CONTRACT_ADDRESS ); // 将联系人列表设置为状态变量。 setContactList(contactListByContract); // 得到迭代的联系人总数 const counter = await contactListByContract.methods.count().call(); // 遍历计数器的时间量 for (var i = 1; i <= counter; i++) { // 调用 contacts 方法从智能合约中获取特定的联系人 const contact = await contactListByContract.methods .contacts(i) .call(); // 添加最近获取的联系状态变量。 setContacts((contacts) => <...contacts, contact>); } } load(); }, <>); return ( <div> 当前账号： {account} <h1>联系人列表</h1> <ul> {Object.keys(contacts).map((contact, index) => ( <li key={`${contacts.name}-${index}`}> <h4>{contacts.name}</h4> <span> <b>手机号码： </b> {contacts.phone} </span> </li> ))} </ul> </div> );}export default App;启动 React 应用程序可以看到如下效果：