使用 Javascript 与 Flow 交互

本文链接：https://blog.csdn.net/weixin_57551966/article/details/116593242

本文向 JavaScript 和 React 开发者介绍如何搭建 Flow 的本地开发环境，包括初始化仓库、安装启动模拟器、设置 Dev Wallet 服务、查询用户信息和执行 Cadence 脚本。通过 fcl SDK，可以与 Flow 链进行 build、resolve、send 和 decode 操作。详细步骤涵盖了从克隆项目仓库到监听合约事件的完整流程。

摘要由CSDN通过智能技术生成

使用 Javascript 与 Flow 交互

本文假设读者是熟悉 JavaScript 和 React[1] 的开发者，对 Flow[2] 有着一定的了解，或者熟悉 Flow 智能合约语言 Cadence[3] 相关的概念。

我们将通过本文熟悉并搭建本地开发环境，使用 JavaScript 根据现有的 JS-SDK[4] 完成对链的调用与交互。

包含以下内容：

搭建本地开发模拟环境
部署开发版钱包服务
使用 Dev Wallet 创建本地账户
查询账户信息执行 Cadence 脚
本部署 Cadence 合约并与之交互

教程内容参照了原文 flow-js-sdk quick start[5] 内容根据最新的代码和示例略有增补。

初始化仓库和开发环境

为了方便读者理解，我们直接使用 flow-js-sdk 官方提供的代码库作为基础，并针对原有的示例略有一些调整，请参照 fork 的仓库 react-fcl-demo[6] 来完成部署和演示

git clone https://github.com/caosbad/react-fcl-demo.git   
    cd react-fcl-demo  
    yarn

首先将远程仓库克隆到本地，然后在实例项目中安装依赖，yarn 会将 package.json 文件中的项目依赖 @onflow/fcl @onflow/sdk @onflow/six-set-code @onflow/dev-wallet 等下载。

@onflow/fcl[7] -- 基于 DApp 开发者的需求，对 @onflow/sdk 的一层封装。

@onflow/sdk[8] --

使用 JavaScript 进行 build[9], resolve[10] , send[11] 和 decode[12] 工具，与 Flow 链进行交互。
@onflow/dev-wallet[13] -- 提供给测试与开发的本地钱包环境。

在这之前，我们还需要初始化 Flow 的本地模拟器启动 wallet-dev 服务

安装和启动模拟器

模拟器是帮助我们在本机启动一·个本地的 Flow 网络，以及以太坊的 ganache，模拟器的下载安装步骤可以参考此处的说明 [14]。

   // Linux and macOS  
    sh -ci "$(curl -fsSL https://storage.googleapis.com/flow-cli/install.sh)"  

    // Windows  
    iex "& { $(irm 'https://storage.googleapis.com/flow-cli/install.ps1') }"

 // --init 参数是在第一次启动的时候添加，如果已经初始化过，就直接执行 start 命令  
    flow emulator start --init

在示例项目的目录里执行 init 命令后，我们会发现目录下多出了一个 flow.json 文件，某些以下的结构：

  {  
        "accounts": {  
            "service": {  
                "address": "f8d6e0586b0a20c7",  
                "privateKey": "84f82df6790f07b281adb5bbc848bd6298a2de67f94bdfac7a400d5a1b893de5",  
                "sigAlgorithm": "ECDSA_P256",  
                "hashAlgorithm": "SHA3_256"  
            }  
        }  
    }

模拟器启动之后你会看到启动成功的日志，模拟器提供了 gRPC 和 http 通信的接口

使用 Javascript 与 Flow 交互

接下来在新的终端启动 Dev wallet

启动 Dev wallet 服务

在 package.json 文件中，我们会看到 scripts 的配置项中有所谓 dev-wallet 和 dev-wallet-win 两个脚本，现在把我们上一步模拟初始化生成的 privateKey 覆盖现有的配置。

然后执行 yarn run dev-wallet 或 yarn run dev-wallet-win

成功之后，将会看到以下的日志：

使用 Javascript 与 Flow 交互

这里启动了多个服务，同时注意服务地址和私钥与模拟器生成的一致。

环境已经配置成功，接下来就是启动示例项目：

启动示范项目

 yarn start

确保模拟器和 Dev wallet 也在启动的状态，我们可以看到页面上的一些示例操作，下面我们从代码层面了解一些相互作用的细节

获取最新区块链

  // hide/demo/GetLatestBlock.tsx  
    import { decode, send, getLatestBlock } from "@onf