浅谈view 入门

浅谈view 入门 要求 本文简单举个例子 使用 vite +react 进行web3 Dapp 开发 目标掌握 view 的基本应用 以及后续可以代替 ethers.js

view 简介 Viem 是一个现代、高性能、强类型的以太坊交互库，用于替代传统的 ethers.js。
它通过 TypeScript 支持、速度优化与更安全的 API，让 Web3 应用的开发更加可靠与简洁。

• 📖 官方文档：viem.sh/docs
• 🥉 开发团队：wagmi.dev（与 wagmi、rainbowkit 同团队）

🤩 二、核心概念

概念	说明
Client（客户端）	与区块链通信的核心对象，有 PublicClient（读）和 WalletClient（写）两种类型
Chain（链）	区块链网络配置，如 mainnet、polygon、bsc
Transport（传输层）	网络通信方式，如 http() 或 webSocket()
ABI	智能合约接口定义（告诉 Viem 如何与合约交互）
Account	钱包账户信息，用于签名和交易发送

三 、项目初始化

创建 Vite + React 项目

npm create vite@latest viem-tutorial --template react

cd viem-tutorial

安装依赖

npm install viem wagmi @tanstack/react-query

四 、创建基础Client import {createPublicClient,http }from "view/chains"

export const client = createPublicClient({

chain:mainnet, // 默认链接主网络 transport:http() })

五、读取连上数据（PulbicClient 1、查询区块号 const blockNumber = await client.getBlockNumber()

console.log(blockNumber)

2、查询某地址余额 const balance = await client.getBalance({

address: '0x00000000219ab540356cBB839Cbe05303d7705Fa'

})

console.log(balance) 3、查询区块详情 const block = await client.getBlock()

console.log(block)

六、钱包交互（WalletClient） import { createWalletClient, custom } from 'viem'

import { mainnet } from 'viem/chains'

export const walletClient = createWalletClient({

chain: mainnet,

transport: custom(window.ethereum!)

})

连接钱包 const accounts = await walletClient.requestAddresses()

console.log(accounts) 发送交易

import { parseEther } from 'viem'

const hash = await walletClient.sendTransaction({

to: '0xReceiverAddress',

value: parseEther('0.001')

})

console.log('交易哈希:', hash)

七、调用智能合约方法 1、调用 ERC20.balanceOf import { erc20Abi } from 'viem'

const balance = await client.readContract({

address: '0xTokenAddress',

abi: erc20Abi,

functionName: 'balanceOf',

args: ['0xUserAddress'],

})

console.log(balance) 2、写操作（发送交易） await walletClient.writeContract({

address: '0xTokenAddress',

abi: erc20Abi,

functionName: 'transfer',

args: ['0xReceiver', parseEther('1')],

}) 八、监听事件（实时更新 client.watchContractEvent({

address: '0xTokenAddress',

abi: erc20Abi,

eventName: 'Transfer',

onLogs: (logs) => {

console.log('检测到转账事件:', logs)

}

}) 九、在 React 中结合 Wagmi 使用 import { useAccount, useConnect, useDisconnect, useBalance } from 'wagmi'

import { injected } from 'wagmi/connectors'

export default function WalletExample() {

const { connect } = useConnect({ connector: injected() })

const { disconnect } = useDisconnect()

const { address, isConnected } = useAccount()

const { data: balance } = useBalance({ address, query: { enabled: isConnected } })

return (

)

}

十、进阶功能

功能	方法

监听新区块	client.watchBlocks()

获取交易详情	client.getTransaction({ hash })

批量调用	client.multicall()

离线签名消息	walletClient.signMessage()

模拟交易	client.simulateContract()

十一、学习路线建议

阶段	内容
🌱 入门	创建 client、查询余额、连接钱包
⚡ 进阶	读写合约、监听事件、发送交易
🔐 高级	签名消息、simulateContract、multicall
🧩 实战	构建完整 DApp（代币转账、NFT Mint、DeFi 操作）
🧠 精通	掌握 Viem Transport、ChainConfig、自定义 Cache 机制

十二、常用工具函数

函数	说明
parseEther('1')	将 1 ETH 转为 wei
formatEther(value)	将 wei 转为 ETH
encodeFunctionData()	手动编码函数调用数据
decodeEventLog()	解码事件日志

十三、官方资源

• 🌐 Viem 官网文档：viem.sh/docs

• 💾 GitHub 仓库：github.com/wagmi-dev/v…

• 🧩 配套库：

  • wagmi — React 钱包管理库
  • rainbowkit — 钱包 UI 组件
  • @tanstack/react-query — 异步状态管理