Solana 核心概念：快速构建简单的dApp应用（一）

Web3 概念

什么是 Web3？

Web2 的局限性

账户由平台（如微信、淘宝）托管
数据隐私可能被泄露或滥用

Web3 的核心组成

钱包：用户直接管理的账户工具
代币：基于区块链的资产形式
常用服务：在线商品交易、全球支付、跨境支付等

Web3 的特点

用户直接拥有账户，无需中间商
支持去中心化交易和互动

什么是 Solana？

Solana 是新一代的区块链，与比特币、以太坊相比具有创新性。

Solana 的三大优势

交易速度快：1-2秒内完成
交易费用低：约 <math xmlns="http://www.w3.org/1998/Math/MathML"> 0.00025 0.00025~ </math>0.00025 0.0005每笔交易
高度去中心化：增加安全性与可靠性

应用场景

实时性高的 Web3 应用，比如支付、交易所等

学习 Solana 开发需要的环境

我们在学习 Solana 不需要掌握区块链相关的很多知识，或者是具备 Rust 等编程语言。你只需要有一台电脑并且可以安装 Nodejs 以及掌握基础的 Nodejs、TypeScript就可以了。

所需技能：基础的 Nodejs 和 TypeScript 知识
工具安装
- 安装 Nodejs v20.18.2
- 下载相关依赖库（如：@solana/web3.js）

密钥对与账户管理

密钥对的基本概念

组成：私钥 + 公钥
作用：
- 公钥用于共享和接收交易
- 私钥用于验证账户权限，需妥善保管

创建密钥，代码如下所示：

js 复制代码

import { Keypair } from "@solana/web3.js"

const keypair = Keypair.generate()
const publicKey = keypair.publicKey.toBase58()
const secretKey = keypair.secretKey
console.log(`公钥1：${publicKey}`)
console.log(`私钥1：${secretKey}`)

js 复制代码

import { Keypair } from "@solana/web3.js"

const secretKey = keypair.secretKey
const keypair = Keypair.fromSecretKey(Uint8Array.from(secretKey))
console.log(`公钥2：${keypair.publicKey.toBase58()}`)
console.log(`私钥2：${keypair.secretKey}`)

Sol 代币与网络交互

Sol 的作用

Solana 网络的原生代币，用于支付交易费用
1 sol = 10亿 lamport（solana里面最小的计量单位lamport）

连接网络

js 复制代码

import { Connection, clusterApiUrl } from '@solana/web3.js'

// devnet,testnet,mainnet
const connection = new Connection(clusterApiUrl('devnet'))

领取测试代币

使用 faucet.solana.com/

通过代码领取测试代币

js 复制代码

import { airdropIfRequired } from '@solana-developers/helpers'

await airdropIfRequired(connection, publicKey, amount, minBalance)

Solana 区块浏览器

用途

查询链上交易信息
查看交易时间、区块号、交易费等

常用 Solana 浏览器

Solana 钱包与适配器

钱包概念

查询链上资产交易信息
查看交易时间、区块号、交易费等

常用钱包

Phantom（幻影钱包）
Solflare（太阳耀斑）
Backpack（背包）
Okx（欧易）

钱包适配器

@solana/wallet-adapter-base
@solana/wallet-adapter-wallets
@solana/wallet-adapter-react
@solana/wallet-adapter-react-ui

构建dApp并连接钱包

创建项目

bash 复制代码

npx create-next-app solana-wallet-connect

集成钱包

js 复制代码

import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react'
import { WalletAdapterNetwork } from '@solana/wallet-adapter-base'
// import { WalletMultiButton, WalletDisconnectButton, WalletModalProvider } from '@solana/wallet-adapter-react-ui'
import { clusterApiUrl } from '@solana/web3.js'
import dynamic from "next/dynamic"
import '@solana/wallet-adapter-react-ui/styles.css'

// 动态导入钱包组件
const WalletMultiButton = dynamic(async () => (await import('@solana/wallet-adapter-react-ui')).WalletMultiButton, {
  ssr: false,
})

const WalletDisconnectButton = dynamic(
  async () => (await import('@solana/wallet-adapter-react-ui')).WalletDisconnectButton,
  { ssr: false }
)

const WalletModalProvider = dynamic(async () => (await import('@solana/wallet-adapter-react-ui')).WalletModalProvider, {
  ssr: false,
})

export default function Wallets() {
    // 定义网络
    const network = WalletAdapterNetwork.Devnet
    // 获取网络
    const endpoint = useMemo(() => clusterApiUrl(network), [network])
    // 钱包
    const wallets = useMemo(
        () => [], [])

    return (
        <ConnectProvider endpoint={endpoint}>
            <WalletProvider wallets={wallets} autoConnect>
                <WalletModalProvider>
                    <WalletMultiButton />
                    <WalletDisconnectButton />
                </WalletModalProvider>
            </Walletprovider>
        </ConnectProvider>
    )
}

访问账户信息

读取账户余额

js 复制代码

import { useWallet, useConnection } from '@solana/wallet-adapter-react'

const WalletBalance = () => {
    const { connection } = useConnection()
    const { publicKey } = useWallet()
    const [balance, setBalance] = useState(0)

    useEffect(() => {
      const getBalance = async () => {
        if (!publicKey) return
        const balance = await connection.getBalance(publicKey)
        setBalance(balance)
        console.log(`钱包余额：${balance / LAMPORTS_PER_SOL} SOL`)
        return balance
      };

      getBalance()
    }, [connection, publicKey])
    
    return (
      <div className="flex flex-col gap-2">
        <div>
          <b>地址：</b>
          {publicKey?.toBase58()}
        </div>
        <div>
          <b>余额：</b>
          {balance / LAMPORTS_PER_SOL} SOL
        </div>
      </div>
    )
 }

实时监听余额变化

js 复制代码

import { useConnection } from '@solana/wallet-adapter-react'
import { LAMPORTS_PER_SOL } from '@solana/web3.js'

const { connection } = useConnection()
connection.onAccountChange(publicKey, updatedAccountInfo => {
    setBalance(updatedAccountInfo.lamports / LAMPORTS_PER_SOL)
})

发送交易

创建交易

js 复制代码

const tx = new Transaction()
tx.add(SystemProgram.transfer({
    fromPubkey, 
    toPubkey, 
    lamports
}))

发送交易

js 复制代码

const signature = await sendTransaction(tx, connection)
console.log(`Transaction sent: ${signature}`)

具体代码实现

直接移步到github仓库下载查看：github.com/jackchen012...

总结

理解 Web3 和 Solana 的核心概念
掌握密钥对和账户的管理
使用钱包工具进行安全交互
构建简单的 dApp，并实现钱包连接和交易功能