DApp 开发指引

开发 DApp 需要一定的技术经验和知识，主要包括以下几个方面：

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

准备工作

安装 Bitget Wallet 钱包插件入口
按照指引创建钱包账户，手动添加并切换到 ETH 网络
本地开启服务运行一个 web 页面：

html

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

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

然后你可以选择以下 快捷开发 、 自定义开发 的任意方式构建 DApp 与链交互的部分。

快捷开发

当使用 Wagmi 进行 DApp 开发时：

安装 wagmi 包
然后配置 chains 和 provider
创建 BitgetWalletConnector
设置连接的 client
然后在应用内使用 hooks 与钱包交互

详情见：Wagmi

当使用 RainbowKit 进行 DApp 开发时：

安装相关 JS 依赖、RainbowKit 及对等依赖项
钱包选项配置 connectors 与初始化
将 RainbowKitProvider 添加入 React 应用
调用 ConnectButton 方法连接钱包

详情见：RainbowKit

当使用 Web3 React 进行 DApp 开发时：

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

详情见：Web3 React

当使用 Web3 Modal 进行 DApp 开发时：

安装相关依赖项
配置你的 ProjectId 、 metadata 及 chains 等 config 信息
调用 createWeb3Modal 方法使 configs 生效
在应用内使用 w3m-button 等 web-components 连接钱包

详情见：Web3 Modal

自定义开发

自定义开发需要先了解钱包 provider 的相关知识。简而言之，在 BitgetWallet 里，provider 是链方法的 js 类实例；

当你安装了 Bitget Wallet 之后，钱包会在浏览器加载页面时将带有链方法的 provider 对象注入到 window 对象下，你可以通过调用该 provider 的方法来实现与链交互。Bitget Wallet 注入的对象一般为 window.bitkeep[namespace]，Bitget Wallet 共提供了 10 个 provider 对象：

Aptos provider = window.bitkeep.aptos;
Bitcoin provider = window.bitkeep.unisat;
Cosmos provider = window.bitkeep.keplr;
ETH provider = window.bitkeep.ethreum;
Near provider = window.bitkeep.near;
Solana provider = window.bitkeep.solana;
Starknet provider = window.starknet_bitkeep;
Sui 比较特殊，通过事件获取 provider
Ton provider = window.bitkeep.ton;
Tron tronLink = window.bitkeep.tronLink; tronWeb = window.bitkeep.tronWeb

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

const provider = window.bitkeep.ethreum;

const provider = window.bitkeep.ethreum;

获取 provider，然后使用

provider.request({ method: "eth_requestAccounts" });

provider.request({ method: "eth_requestAccounts" });

来请求连接钱包并获取账户地址信息，你也可以传入不同的 method 来调用不同的 provider 方法从而实现复杂应用场景。详情见：Eth Provider APIs 及其他链 ProviderAPIs。

可以通过 provider 是否存在判断用户是否安装钱包插件。使用前必须确保钱包正确安装，未安装时应引导用户进行下载安装

const provider = window.bitkeep && window.bitkeep.ethereum;

if (!provider) {
  window.open("https://web3.bitget.com/zh-CN/wallet-download");
}

const provider = window.bitkeep && window.bitkeep.ethereum;

if (!provider) {
  window.open("https://web3.bitget.com/zh-CN/wallet-download");
}

通过以上方式直接访问 provider 链接钱包及交互的方式称为 `JS Bridge`。

JS Bridge 链接钱包的常见场景为 PC 页面链接浏览器插件钱包、App 内置浏览器页面访问 App 钱包。

除了 JS Bridge，还有 `Http Bridge` 的交互方式。

Http Bridge 链接钱包的常见场景为通过云端服务器作桥接，App 钱包扫描二维码或者 Deeplinks 跳转建立长连接通信。常见实现产品为 Wallet Connect 及 Ton Connect。

Wallet Connect

通过 wallect connect 提供的开发包构造 provider 对象，无需检测安装，更多细节请参考 Reference/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();

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 提供的第三方包初始化钱包连接组件，组件会自动获取符合标准的钱包提供选择连接；更多细节请参考 Reference/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();

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();

链接后的方法调用

获取 provider 后即可调用钱包 API，常见的 API 有

链接钱包/断开链接
获取钱包账号信息
获取当前主网/添加主网/切换主网
获取余额
普通数据签名
交易签名
发送交易

另外钱包还会提供事件监听，方便 DApp 获取钱包中的一些操作，一般提供 2 个：

监听账号切换
监听主网切换

具体细节请参考 BitgetWallet APIs 以及 Bitget Wallet Demo。

DApp 开发指引 ​

准备工作 ​

快捷开发 ​

自定义开发 ​

通过以上方式直接访问 provider 链接钱包及交互的方式称为 JS Bridge。 ​

除了 JS Bridge，还有 Http Bridge 的交互方式。 ​

链接后的方法调用 ​

相关阅读 ​