DApp 开发指南

开发 DApp（去中心化应用程序）需要一定的技术专业知识和知识，主要包括以下领域：

区块链基础：DApp 基于区块链技术构建，因此有必要了解区块链的基本知识，包括去中心化、共识机制和智能合约等关键技术；区块链网络：以太坊是最受欢迎的区块链平台之一，DApp 开发需要使用区块链网络。
智能合约开发：智能合约是 DApp 的核心部分。它们在区块链上运行并实现去中心化业务逻辑。常见的智能合约开发语言包括Solidity 、Vyper 等。流行的合约标准包括ERC20 和ERC721 。您可以使用智能合约开发工具，如Remix 、Truffle 等，来编写、测试和部署合约。
分布式存储技术：DApp 通常需要将数据存储在去中心化网络中，以确保数据安全和持久性。IPFS（星际文件系统）是基于分布式哈希表的存储网络，可以作为 DApp 的理想存储解决方案。
前端开发技术：您可以使用 React、Vue.js 等前端技术来实现 DApp 的前端页面和用户交互功能。您也可以使用开源组件进行快速开发。常见的钱包连接组件包括：Wallet Connect、Ton Connect、Wagmi、RainbowKit、Web3 React、Web3 Modal等。
后端开发技术：后端开发负责处理 DApp 的业务逻辑和数据存储。

准备工作

安装 Bitget Wallet 扩展程序入口
按照说明创建钱包账户，手动添加并切换到 ETH 网络。
启动本地服务器运行网页：


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>我的标题</title>
  </head>
  <body>
    Hello World
  </body>
</html>

然后您可以选择快速开发或自定义开发方法来构建 DApp 与区块链交互的部分。

快速开发

使用 Wagmi 进行 DApp 开发时：

安装 wagmi 包
配置链和提供者
创建 BitgetWalletConnector
设置连接的客户端
在应用程序内使用钩子与钱包交互

更多详情，请参考Wagmi文档。

使用 RainbowKit 进行 DApp 开发时：

安装相关 JS 依赖项、RainbowKit 和对等依赖项
使用连接器配置钱包选项并初始化
将 RainbowKitProvider 添加到 React 应用程序
调用 ConnectButton 方法连接钱包

更多详情，请参考RainbowKit文档。

使用 Web3 React 进行 DApp 开发时：

安装相关依赖项
创建 BitgetWallet 连接器类
在 connectors 目录中添加 bitgetWallet
在 connectorCards 目录中添加 bitgetWalletCard
在 ProviderExample 中添加 bitgetWalletHooks
在应用程序内使用钩子方法连接钱包

更多详情，请参考Web3 React文档。

使用 Web3 Modal 进行 DApp 开发时：

安装相关依赖项
配置您的 ProjectId、元数据、链和其他必要的配置信息
调用 createWeb3Modal 方法应用配置
在应用程序内使用 w3m-button 和其他 Web 组件连接钱包

更多详情，请参考Web3 Modal文档。

自定义开发

自定义开发需要了解钱包提供者的知识。简而言之，在 BitgetWallet 中，提供者是链方法的 JavaScript 类实例。

安装 Bitget Wallet 后，当浏览器加载页面时，钱包会将带有链方法的提供者对象注入到 window 对象中。您可以调用此提供者的方法来实现与区块链的交互。Bitget Wallet 注入的对象通常是window.bitkeep[namespace]。Bitget Wallet 总共提供 10 个提供者对象：

Aptos provider = window.bitkeep.aptos;
Bitcoin provider = window.bitkeep.unisat;
Cosmos provider = window.bitkeep.keplr;
ETH provider = window.bitkeep.ethereum;
Near provider = window.bitkeep.near;
Solana provider = window.bitkeep.solana;
Starknet provider = window.starknet_bitkeep;
Sui 相对独特，通过事件获取提供者
Ton provider = window.bitkeep.ton;
Tron tronLink = window.bitkeep.tronLink; tronWeb = window.bitkeep.tronWeb

例如：在 ETH 链上您可以使用


const provider = window.bitkeep.ethereum

获取提供者，然后使用：


provider.request({ method: 'eth_requestAccounts' })

请求钱包连接并检索账户地址信息。您还可以传入不同的方法来调用不同的提供者方法，从而实现复杂的应用场景。更多详情，请参考Eth 提供者 API和其他链的提供者 API。

💡

Tip

您可以检查提供者的存在来确定用户是否已安装钱包插件。在使用提供者之前，您必须确保钱包已正确安装。如果钱包未安装，您应该引导用户下载并安装它。


const provider = window.bitkeep && window.bitkeep.ethereum
 
if (!provider) {
  window.open('https://web3.bitget.com/en/wallet-download')
}

直接访问提供者连接钱包并与其交互的方法称为`JS桥接`。

JS 桥接连接钱包的常见场景是 PC 网页链接到浏览器扩展钱包，以及应用内浏览器页面访问应用内钱包。

除了 JS 桥接，还有`Http桥接`作为交互方式。

Http 桥接连接钱包的常见场景是通过基于云的服务器作为桥梁，应用钱包扫描二维码或通过深链接跳转到钱包以建立长期连接。此类的常见实现产品是 Wallet Connect 和 Ton Connect。

Wallet Connect

通过使用 Wallet Connect 提供的开发包构建提供者对象，无需检测安装。更多详情，请参考参考/Wallet Connect文档。


import { EthereumProvider } from '@walletconnect/ethereum-provider'
let provider = await EthereumProvider.init({
  projectId: '<YOUR_PROJECT_ID>',
  chains: [chainId],
  showQrModal: true,
  qrModalOptions: {
    themeMode: 'dark',
    desktopWallets: [],
  },
})
 
await provider.connect()

Ton Connect

通过使用 Ton Connect 提供的第三方包初始化钱包连接组件，该组件将自动检索并提供兼容钱包的选择供用户连接。更多详情，请参考参考/Wallet Connect文档。


import { TonConnectUI } from '@tonconnect/ui'
const tonConnectUI = new TonConnectUI({
  manifestUrl: 'https://<YOUR_APP_URL>/tonconnect-manifest.json',
  buttonRootId: '<YOUR_CONNECT_BUTTON_ANCHOR_ID>',
})
 
await tonConnectUI.openModal()

连接钱包后的方法调用

获取提供者后，您可以调用钱包 API。常见 API 包括：

连接/断开钱包
获取钱包账户信息
获取当前网络/添加网络/切换网络
获取余额
签名常规数据
签名交易
发送交易

此外，钱包还提供事件监听器，允许 DApp 监控某些钱包操作。提供的典型事件是：

监听账户切换
监听网络切换

更多详情，请参考BitgetWallet API和Bitget Wallet 演示。

DApp 开发指南

准备工作

快速开发

自定义开发

直接访问提供者连接钱包并与其交互的方法称为JS桥接。

除了 JS 桥接，还有Http桥接作为交互方式。

连接钱包后的方法调用

相关阅读

直接访问提供者连接钱包并与其交互的方法称为`JS桥接`。

除了 JS 桥接，还有`Http桥接`作为交互方式。