next2tarolisted

# Next.js → Taro UI 转换技能 将 Next.js (App Router + Tailwind CSS + shadcn/ui) 的 UI 精确还原为 Taro 小程序 (View/Text + 手写 SCSS + PNG 图片)，遵循转换宪法规则。 ## 适用场景 - Next.js 项目迁移到微信/支付宝/抖音小程序 - 已有 Next.js UI 设计稿，需要在小程序端还原 - Taro 项目中某个页面/组件需要对照 Next.js 原版修正 --- ## 转换宪法（铁律） ### §1 标签映射 | 铁律 | Next.js | Taro | 说明 | |------|---------|------|------| | 1.1 | `<div>` | `<View>` | 所有块级容器 | | 1.2 | `<span>` / `<p>` / `<h1>`~`<h6>` | `<Text>` | 所有文本，必须用 Text 包裹 | | 1.3 | `<svg>` / 内联 SVG | `<Image>` + PNG | SVG 必须导出为 PNG，禁止内联 | | 1.4 | `<img>` | `<Image mode="aspectFit">` | 图片组件，必须设置 mode | | 1.5 | `<a>` / `<Link href>` | `Taro.navigateTo` / `switchTab` | 路由跳转（见 §6） | | 1.6 | `<button>` | `<View>` + onClick | 按钮用 View 模拟 | | 1.7 | `<input>` / `<textarea>` | `<Input>` / 自定义 `<Input type="textarea">` | 表单组件 | | 1.8 | `<label>` / `<form>` | `<View>` 模拟 | 无语义标签 | | 1.9 | `<header>` / `<main>` / `<footer>` | `<View>` | 语义标签 → View | ### §2 样式系统 | 铁律 | 规则 | 原因 | |------|------|------| | 2.1 | 单一 class 选择器（`.foo`），禁止嵌套/后代/标签选择器 | RN 兼容 + 小程序样式隔离 | | 2.2 | 只用 `px` 单位，禁止 `rpx` / `rem` / `em` | pxtransform 自动转换 | | 2.3 | 禁止 `grid` 布局，只用 `flex` | RN 不支持 grid | | 2.4 | 禁止伪类/伪元素（`:hover` / `::before` / `::after`） | RN 不支持，用额外 View 模拟 | | 2.5 | `box-shadow` 小程序可用，RN 需用 `elevation` 替代 | 跨端兼容 | | 2.6 | `transition` 小程序可用，RN 需用 `Animated` 替代 | 跨端兼容 | | 2.7 | 所有值引用 `variables.scss`，禁止魔法数字 | 可维护性 | | 2.8 | 禁止 `calc()` 表达式，用 `width:50%` + `padding` 间距替代 | 小程序兼容性差 | | 2.9 | Taro `<Text>` 多行文字必须设 `word-break: break-wo