— 微信 · 支付宝 · 抖音 · Web —

VPT

Vite 8✿React 19✿Tailwind 4

开发者工具热更新 · 小程序全自动分包

快速开始查看 GitHub

极速启动Vite 8 + Rolldown

开发热更新React Refresh

全自动分包动态 import()

现代工具链面向未来

一个 App · 多个页面

App 渲染共享视图

导航、状态展示与全局控件只需在 App 中编写一次，便会作为共享视图持续包裹每个页面。切换页面时，App 始终保持原位。

共享视图只写一次导航、全局控件由 App 统一渲染
页面自然切换每个页面仍是 App 的 children
状态持续保留Context、Hooks 与生命周期不会重建

8:25

首页今天

DAILY RHYTHM

今天也向前一点

保留节奏，也留一点时间给自己。

专注时间2h 18m目标完成 78%

步数8,420能量486

接下来3 项

深度工作产品迭代09:30午间散步河畔路线12:20阅读时间第三章20:00

发现附近

WEEKEND PICKS

去有风的地方

三条适合周末散步的绿色路线。

距离 2.4 km溪谷植物园安静 · 适合散步

自然轻徒步咖啡

附近路线查看全部

河岸慢行绿荫 · 35 min1.8 km

松林小径安静 · 52 min3.1 km

我的个人空间

GOOD MORNING

林小满

把日子过成喜欢的样子。

连续记录12 天

28完成计划6收藏路线

本周活跃6 / 7 天

滑动页面，或点击卡片和底部 Tab

微信开发者工具 · VPT

不是重新加载，是热更新

状态原地保留

修改任意深度的 React 组件，VPT 会把最小更新送进小程序开发者工具。当前页面、表单输入和组件状态继续留在原位。

✓ 深层 React 组件即时更新
✓ App、页面与输入状态保留
✓ Tailwind 样式同步刷新

了解热更新机制

只决定何时加载，不再关心放在哪个包

动态导入，自动分包

像 Web 应用一样组织源码。VPT 沿着模块图识别同步启动链与按需边界，再自动生成符合微信、支付宝与抖音限制的主包和分包。

源码视角

一次动态导入

同步入口App / 页面

static import

启动依赖状态 · UI

import()

动态入口 0.2M报表中心

图表渲染1.5M

原生组件1.3M

PDF 导出0.6M

VPT自动规划

依赖分析
体积计算
资源类别
动态边界
拆包合并

构建产物

依赖自动拆包

主包

启动代码App页面状态 · UI

同步可达

自动包 7f3a

动态入口0.2M图表渲染1.5M

1.7M · 自动分配

自动包 c921

原生组件1.3MPDF 导出0.6M

1.9M · 自动分配

零手写配置无需维护 subPackages

依赖自动分包功能内部继续静态 import

自动满足包限制突破小程序 2M 单包限制

查看全自动分包指南

Tailwind CSS v4 · 样式热更新

Tailwind，直达小程序

让 AI 编写 Tailwind className，VPT 自动适配微信、支付宝、抖音小程序与 Web。

01import { View, Text } from 'virtual:taro/components'
02
03export function Dashboard() {
04  return (
05    <View className="min-h-screen bg-[#f4f7ec] p-5">
06      <View className="flex items-center justify-between">
07        <View>
08          <Text className="block text-xs text-slate-500">早上好</Text>
09          <Text className="mt-1 block text-2xl font-semibold">今天也向前一点</Text>
10        </View>
11        <Text className="text-lg font-semibold text-emerald-950">VPT</Text>
12      </View>
13      <View className="mt-5 rounded-3xl bg-emerald-900 p-6 text-white shadow-xl">"mt-5 rounded-[2rem] bg-[#e96f55] p-6 text-white shadow-2xl">
14        <Text className="text-xs uppercase tracking-widest text-emerald-200">今日步数</Text>
15        <Text className="mt-3 block text-4xl font-semibold">12,680</Text>
16        <Text className="mt-2 block text-xs text-emerald-200/70">目标 16,000 步</Text>
17        <View className="mt-6 h-2 overflow-hidden rounded-full bg-white/20">
18          <View className="h-full w-3/4 rounded-full bg-lime-300" />
19        </View>
20      </View>
21      <View className="mt-4 flex gap-3">
22        {useStats().map(({ label, value, unit }) => (
23          <View className="flex-1 rounded-2xl bg-white p-4 ring-1 ring-emerald-900/10">
24            <Text className="block text-xs text-slate-500">{label}</Text>
25            <Text className="mt-2 block text-xl font-semibold">{value} {unit}</Text>
26          </View>
27        ))}
28      </View>
29      <ActivityChart className="mt-4 rounded-2xl bg-white p-4" />
30    </View>
31  )
32}

微信小程序 · HMR

8:25

早上好

今天也向前一点

今日步数12,680目标 16,000 步

已完成 79%↗ 12%

✦活跃能量486 kcal

⌁行走距离8.7 km

本周活跃度查看全部

一二三四五六日

任意值样式 HMRFlexVariants

查看样式指南

编译时连接 · 零运行时封装

React 与原生组件，双向直连

用 TypeScript 声明属性与事件。VPT 自动注册、复制并分配原生资源，让 React 数据与微信、支付宝、抖音小程序的原生事件自然往返。

微信小程序 Native live

React statecount = 12状态保留

微信原生组件native-counterJSWXMLWXSS

SHARED COUNTER

点击原生按钮，观察事件回到 React

import { defineNativeComponent } from 'virtual:taro/native'

type CounterProps = {
  count: number
  onDecrement: () => void
  onIncrement: () => void
}

export const NativeCounter = defineNativeComponent<CounterProps>(
  () => import('./native-counter/counter.js')
)


<NativeCounter
  count={count}
  onDecrement={() => setCount(count - 1)}
  onIncrement={() => setCount(count + 1)}
/>

查看原生组件指南

从开发体验到生产交付

为现代小程序开发而生

熟悉的 React 开发方式，一份源码覆盖微信、支付宝、抖音小程序与 Web，不再被传统工具链拖慢。

Vite 8

由 Vite 8 和 Rolldown 驱动开发与生产构建，带来快速启动、增量构建和现代前端工具链。

Vite 8Rolldown

React 19

以 React 19 运行 App、页面和组件，直接使用 Hooks、Suspense 与 React.lazy()。

HooksSuspenseReact.lazy()

小程序开发热更新

基于 Vite 模块图和 React Refresh，为微信、支付宝与抖音小程序提供状态保留热更新；各平台模式与验证范围见热更新指南。

React Refresh状态保留

全自动分包

动态 import() 探索加载边界，自动规划主包与分包，应用层不再关心单包 2M 限制。

动态加载自动规划

Web 标准 API

继续使用熟悉的 Web 标准，在一份 React 源码中连接微信、支付宝、抖音小程序和 Web。

跨端组件统一 API

小程序原生组件

微信、支付宝与抖音原生组件均可和 React 双向调用，并自然参与全自动分包，无需维护额外的胶水层。

双向通信自动分包

Skyline 渲染模式

支持全局或按页面启用 Skyline，让复杂交互获得更流畅、更稳定的渲染体验。

按页启用流畅渲染

Tailwind CSS v4

默认模板开箱即用，候选类和样式输出自动适配微信、支付宝、抖音小程序与 Web。

零配置跨端样式

100% 测试覆盖

覆盖编译、分包、热更新、样式生成与运行时边界；大量单元测试和回归用例让每次迭代都有可靠保障。

单元测试回归保障

查看文档使用 AI

全部开源MIT协议

基于开放的 Web 生态，欢迎参与共建

VPT

今天也向前一点

去有风的地方

林小满

今天也向前一点

Vite 8

React 19

小程序开发热更新

全自动分包

Web 标准 API

小程序原生组件

Skyline 渲染模式

Tailwind CSS v4

100% 测试覆盖

赞助