跨运行时案例

这里是 Varo 面向使用者的跨运行时展示页：先确认采用路径，再区分浏览器实时交互、浏览器中的 Weapp 契约预览，以及微信开发者工具中的已编译证据。仓库内的 playground 仍是维护者 QA surface，不是公开安装入口。

先选择采用路径

H5 REGISTRY

H5 业务项目

pnpm dlx @varo-ui/cli add --target h5 components/button

将可编辑的 Vue 组件源码与依赖安装到业务仓库。

WEAPP REGISTRY

Weapp 业务项目

pnpm dlx @varo-ui/cli add --target weapp components/button

将 WXML-safe 的目标专用 Wevu SFC 与依赖安装到业务仓库。

RUNTIME PACKAGE

集中式 H5 runtime

pnpm add @varo-ui/h5

在明确需要统一升级时消费已发布组件包。

Registry 是默认采用路径；从安装指南开始，再按目标生成源码。

H5 Live 与 Weapp Contract Preview

下方组件可以直接操作。H5 标签运行 @varo-ui/h5 的真实浏览器组件；切换到小程序后，标签会明确变为 Weapp Contract Preview，用于检查公共 API 与视觉契约，不冒充小程序运行时。

跨端总览示例与演示

非法状态

H5 Live浏览器运行时实时交互

姓名

2/16

当前值: 林默

弹层演示组合式弹层

Weapp DevTools Verified：已编译 Blocks

下方图片由 weapp-vite 构建后的 Block 页面通过微信开发者工具自动化采集。证据快照日期为 2026-08-28；可检查采集脚本和代表性原始图片。每张卡片也会直接链接自己的原始图片。

H5 目标只切换安装命令与使用代码；当前仓库没有发布对应的 H5 图片时，卡片会继续明确标注图片为 Weapp DevTools Verified，不会暗示 H5 选择改变了截图。

REGISTRY BLOCKS

先看界面，再生成源码

每张卡片都来自真实小程序 Block：Headless 负责状态与交互，Base Kit 负责视觉。确认界面后，复制一条命令即可生成源码和递归依赖。

13 BLOCKS

显示 13 个 Block图片证据：Weapp DevTools Verified · 2026-08-28

Weapp DevTools Verified2026-08-28

login-form

登录表单

business

手机号、密码、记住状态、错误与加载反馈。

Weapppnpm dlx @varo-ui/cli add --target weapp blocks/login-form

代码

一键生成在项目根目录执行，CLI 会递归写入 Block 与所需组件源码。

使用示例src/components/blocks/login-form.vue

<script setup lang="ts">
import LoginForm from '@/components/blocks/login-form.vue'

function handleLogin(credentials: unknown) {
  console.log(credentials)
}
</script>

<template>
  <LoginForm @submit="handleLogin" />
</template>

Weapp DevTools Verified2026-08-28

profile-card

用户资料卡

business

头像、身份状态、统计信息与编辑动作。

Weapppnpm dlx @varo-ui/cli add --target weapp blocks/profile-card

代码

一键生成在项目根目录执行，CLI 会递归写入 Block 与所需组件源码。

使用示例src/components/blocks/profile-card.vue

<script setup lang="ts">
import ProfileCard from '@/components/blocks/profile-card.vue'

const user = { name: 'Varo User', status: 'Active' }
const stats = [{ label: 'Orders', value: 12 }]
function openEditor() {}
</script>

<template>
  <ProfileCard :user="user" :stats="stats" @edit="openEditor" />
</template>

Weapp DevTools Verified2026-08-28

profile-edit

资料编辑

business

姓名、手机号、城市搜索、简介与提交状态。

Weapppnpm dlx @varo-ui/cli add --target weapp blocks/profile-edit

代码

一键生成在项目根目录执行，CLI 会递归写入 Block 与所需组件源码。

使用示例src/components/blocks/profile-edit.vue

<script setup lang="ts">
import ProfileEdit from '@/components/blocks/profile-edit.vue'

const cities = [{ label: '杭州', value: 'hangzhou' }]
function saveProfile(profile: unknown) {
  console.log(profile)
}
</script>

<template>
  <ProfileEdit :cities="cities" @submit="saveProfile" />
</template>

Weapp DevTools Verified2026-08-28

product-list

商品列表

business

商品、库存、价格、空状态、选择与加购动作。

Weapppnpm dlx @varo-ui/cli add --target weapp blocks/product-list

代码

一键生成在项目根目录执行，CLI 会递归写入 Block 与所需组件源码。

使用示例src/components/blocks/product-list.vue

<script setup lang="ts">
import ProductList from '@/components/blocks/product-list.vue'

const products = []
function addToCart(payload: unknown) {
  console.log(payload)
}
</script>

<template>
  <ProductList :items="products" @add-to-cart="addToCart" />
</template>

Weapp DevTools Verified2026-08-28

order-filter

订单筛选

business

多状态选择、金额区间校验、重置与应用事件。

Weapppnpm dlx @varo-ui/cli add --target weapp blocks/order-filter

代码

一键生成在项目根目录执行，CLI 会递归写入 Block 与所需组件源码。

使用示例src/components/blocks/order-filter.vue

<script setup lang="ts">
import OrderFilter from '@/components/blocks/order-filter.vue'

function loadOrders(filters: unknown) {
  console.log(filters)
}
</script>

<template>
  <OrderFilter :result-count="128" @apply="loadOrders" />
</template>

Weapp DevTools Verified2026-08-28

agent-chat

Agent 对话

agent

增量 Markdown、工具状态、审批与输入组合。

Weapppnpm dlx @varo-ui/cli add --target weapp blocks/agent-chat

代码

一键生成在项目根目录执行，CLI 会递归写入 Block 与所需组件源码。

使用示例src/components/blocks/agent-chat.vue

<script setup lang="ts">
import AgentChat from '@/components/blocks/agent-chat.vue'

const messages = [{ id: 'welcome', role: 'assistant', content: '你好' }]
function runAgent(prompt: string) {
  console.log(prompt)
}
</script>

<template>
  <AgentChat :messages="messages" @submit="runAgent" />
</template>

Weapp DevTools Verified2026-08-28

retail-home

零售首页

retail

搜索、分类、精选商品与购物车入口。

Weapppnpm dlx @varo-ui/cli add --target weapp blocks/retail-home

代码

一键生成在项目根目录执行，CLI 会递归写入 Block 与所需组件源码。

使用示例src/components/blocks/retail-home.vue

<script setup lang="ts">
import RetailHome from '@/components/blocks/retail-home.vue'

const categories = []
const products = []
</script>

<template>
  <RetailHome :categories="categories" :products="products" />
</template>

Weapp DevTools Verified2026-08-28

retail-category

零售分类

retail

双栏分类导航、商品网格与加购动作。

Weapppnpm dlx @varo-ui/cli add --target weapp blocks/retail-category

代码

一键生成在项目根目录执行，CLI 会递归写入 Block 与所需组件源码。

使用示例src/components/blocks/retail-category.vue

<script setup lang="ts">
import { shallowRef } from 'wevu'
import RetailCategory from '@/components/blocks/retail-category.vue'

const activeId = shallowRef('women')
const categories = []
const products = []
</script>

<template>
  <RetailCategory v-model:active-id="activeId" :categories="categories" :products="products" />
</template>

Weapp DevTools Verified2026-08-28

retail-cart

购物车

retail

商品选择、数量、合计、空状态与结算。

Weapppnpm dlx @varo-ui/cli add --target weapp blocks/retail-cart

代码

一键生成在项目根目录执行，CLI 会递归写入 Block 与所需组件源码。

使用示例src/components/blocks/retail-cart.vue

<script setup lang="ts">
import RetailCart from '@/components/blocks/retail-cart.vue'

const cartItems = []
const total = 0
function checkout() {}
</script>

<template>
  <RetailCart :items="cartItems" :total="total" @checkout="checkout" />
</template>

Weapp DevTools Verified2026-08-28

retail-product-detail

商品详情

retail

商品主图、价格、库存、数量、加购与购买。

Weapppnpm dlx @varo-ui/cli add --target weapp blocks/retail-product-detail

代码

一键生成在项目根目录执行，CLI 会递归写入 Block 与所需组件源码。

使用示例src/components/blocks/retail-product-detail.vue

<script setup lang="ts">
import { shallowRef } from 'wevu'
import RetailProductDetail from '@/components/blocks/retail-product-detail.vue'

const quantity = shallowRef(1)
const product = {}
</script>

<template>
  <RetailProductDetail v-model:quantity="quantity" :product="product" />
</template>

Weapp DevTools Verified2026-08-28

retail-checkout

结算确认

retail

地址、商品、优惠、发票、金额与提交订单。

Weapppnpm dlx @varo-ui/cli add --target weapp blocks/retail-checkout

代码

一键生成在项目根目录执行，CLI 会递归写入 Block 与所需组件源码。

使用示例src/components/blocks/retail-checkout.vue

<script setup lang="ts">
import RetailCheckout from '@/components/blocks/retail-checkout.vue'

const address = {}
const items = []
const total = 0
function submitOrder() {}
</script>

<template>
  <RetailCheckout :address="address" :items="items" :total="total" @submit="submitOrder" />
</template>

Weapp DevTools Verified2026-08-28

retail-order-list

订单列表

retail

订单状态、商品摘要与履约操作。

Weapppnpm dlx @varo-ui/cli add --target weapp blocks/retail-order-list

代码

一键生成在项目根目录执行，CLI 会递归写入 Block 与所需组件源码。

使用示例src/components/blocks/retail-order-list.vue

<script setup lang="ts">
import RetailOrderList from '@/components/blocks/retail-order-list.vue'

const orders = []
function handleOrder(order: unknown) {
  console.log(order)
}
</script>

<template>
  <RetailOrderList :orders="orders" @action="handleOrder" />
</template>

Weapp DevTools Verified2026-08-28

retail-profile

会员中心

retail

会员信息、订单、地址、优惠券与售后入口。

Weapppnpm dlx @varo-ui/cli add --target weapp blocks/retail-profile

代码

一键生成在项目根目录执行，CLI 会递归写入 Block 与所需组件源码。

使用示例src/components/blocks/retail-profile.vue

<script setup lang="ts">
import RetailProfile from '@/components/blocks/retail-profile.vue'

const orderCounts = {}
</script>

<template>
  <RetailProfile name="Varo User" :points="2680" :order-counts="orderCounts" />
</template>

证据与实现边界

H5 Live：当前页面中的真实浏览器组件与交互
Weapp Contract Preview：浏览器渲染的目标契约，不是微信运行时
Weapp DevTools Verified：已编译小程序页面的开发者工具证据
weapp-vite 负责组件 JSON、复杂列表 key、类型声明与目标产物；wevu 是 @varo-ui/weapp 的运行时 peer
weapp-tailwindcss 在构建链中转译 class；原生 hover-class 表达小程序按压反馈

基础组件

表单组件

布局组件

导航组件

反馈组件

高级组件

对话与流式

执行与审批

输入与操作

上下文与产物

数据与工作区

基础控件

选择与切换

内容与布局

展开与轻浮层

遮罩与弹层

跨运行时案例

先选择采用路径

H5 业务项目

Weapp 业务项目

集中式 H5 runtime

H5 Live 与 Weapp Contract Preview

跨端总览示例与演示

Weapp DevTools Verified：已编译 Blocks

先看界面，再生成源码

登录表单

用户资料卡

资料编辑

商品列表

订单筛选

Agent 对话

零售首页

零售分类

购物车

商品详情

结算确认

订单列表

会员中心

证据与实现边界

继续阅读

跨运行时案例 ​

先选择采用路径 ​

H5 业务项目

Weapp 业务项目

集中式 H5 runtime

H5 Live 与 Weapp Contract Preview ​

Weapp DevTools Verified：已编译 Blocks ​

证据与实现边界 ​

继续阅读 ​

跨运行时案例

先选择采用路径

H5 Live 与 Weapp Contract Preview

Weapp DevTools Verified：已编译 Blocks

证据与实现边界

继续阅读