create-vite-taro 0.7.12 → 0.8.0-beta.0

package/index.js

@@ -9,7 +9,6 @@ import generatorPackage from './package.json' with { type: 'json' }
 
 const packageRoot = path.dirname(fileURLToPath(import.meta.url))
 const defaultProjectName = 'vite-taro-app'
-const defaultProjectTitle = 'Vite Taro App'
 const defaultWechatAppId = 'wx0000000000000000'
 const renamedFiles = {
     '_env.local': '.env.local',
@@ -128,14 +127,14 @@ function copyTemplate(sourceDirectory, targetDirectory, projectName, projectTitl
             continue
         }
 
-        const source = readFileSync(sourcePath, 'utf8')
+        const source = readFileSync(sourcePath)
         writeFileSync(targetPath, transformTemplateFile(targetName, source, projectName, projectTitle, wechatAppId))
     }
 }
 
 function transformTemplateFile(fileName, source, projectName, projectTitle, wechatAppId) {
     if (fileName === 'package.json') {
-        const template = JSON.parse(source)
+        const template = JSON.parse(source.toString('utf8'))
         // The fixed Changesets group releases the generator and plugin at the same version.
         const packageJson = {
             ...template,
@@ -149,13 +148,14 @@ function transformTemplateFile(fileName, source, projectName, projectTitle, wech
     }
 
     if (fileName === 'index.html') {
-        return source.replace(/<title>.*?<\/title>/, `<title>${projectTitle}</title>`)
+        return source.toString('utf8').replace(/<title>.*?<\/title>/, `<title>${projectTitle}</title>`)
+    }
+
+    if (fileName === '.env.local') {
+        return source.toString('utf8').replaceAll(defaultWechatAppId, wechatAppId)
     }
 
     return source
-        .replaceAll(defaultProjectName, projectName)
-        .replaceAll(defaultProjectTitle, projectTitle)
-        .replaceAll(defaultWechatAppId, wechatAppId)
 }
 
 function createWechatAppId() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-vite-taro",
-  "version": "0.7.12",
+  "version": "0.8.0-beta.0",
   "description": "Create Vite 8 + React 19 + Taro apps for WeChat, Alipay, TikTok, and H5 targets.",
   "type": "module",
   "bin": {

package/templates/default/README.md

@@ -83,7 +83,13 @@ npm run dev:h5
 
 ## 开发
 
-默认页面是 `src/pages/home/index.tsx`。VPT 通过虚拟模块提供 Taro 组件和 API：
+模板包含 Home、Explore、About 三个真实 Tab 页面，默认页面是 `src/pages/home/index.tsx`。路由、标签和图标名称统一定义在 `src/tab-pages.ts`。
+
+每个页面负责自己的全屏布局和 `TabBar`，`src/app.tsx` 负责应用生命周期和全局样式，直接返回 `children`。通过 `Taro.switchTab()` 切换 Tab 时，已访问页面的 React 状态会保留。
+
+`vite.config.ts` 显式声明页面并启用 `prerender: true`，原生 Tab 路由由 `tabPages` 生成。微信使用 `tabBar.custom: true`，由页面中的 React 标签栏负责渲染；`tabBar.list` 保留原生 `switchTab()` 所需的路由声明。支付宝使用 `tabBar.customize: true` 和 `tabBar.items`，VPT 自动生成隐藏的原生标签栏占位组件。
+
+VPT 通过虚拟模块提供 Taro 组件和 API：
 
 ```tsx
 import Taro from 'virtual:taro/api'
@@ -92,7 +98,7 @@ import { Button, Text, View } from 'virtual:taro/components'
 
 不要直接安装或导入 `@tarojs/*`。在 `vite.config.ts` 中添加页面，并按当前目标修改应用与开发工具项目配置。
 
-模板包含条件编译、微信原生组件、支付宝、抖音与 Web 共用的 Taro 组件、懒加载、自定义导航栏、Tailwind CSS、CSS Modules 和全局样式示例；不需要的示例可直接删除。
+模板包含条件编译、微信原生组件、支付宝、抖音与 Web 共用的 Taro 组件、懒加载、自定义导航栏、React 标签栏、Tailwind CSS、CSS Modules 和全局样式示例；不需要的示例可直接删除。
 
 ### 样式
 

package/templates/default/src/app.css

@@ -49,10 +49,6 @@ button {
     line-height: inherit;
 }
 
-.app-shell > .taro_page {
-    height: calc(100% - 2.5rem);
-}
-
 .brand-serif {
     font-family: Georgia, "Times New Roman", serif;
 }

package/templates/default/src/app.tsx

@@ -1,20 +1,13 @@
 import { useLaunch } from 'virtual:taro/api'
-import { View } from 'virtual:taro/components'
 import type { PropsWithChildren } from 'react'
 import './app.css'
-import { Footer } from './components/footer/footer.tsx'
 
 function App({ children }: PropsWithChildren) {
     useLaunch(() => {
         console.log('App launched')
     })
 
-    return (
-        <View className="app-shell flex h-screen flex-col overflow-hidden bg-canvas bg-canvas-botanical text-foreground">
-            {children}
-            <Footer />
-        </View>
-    )
+    return children
 }
 
 export default App

package/templates/default/src/components/tab-bar/tab-bar.tsx

@@ -0,0 +1,39 @@
+import Taro from 'virtual:taro/api'
+import { Button, Image, Text, View } from 'virtual:taro/components'
+import { tabPages } from '../../tab-pages.ts'
+import { tabIcons } from './tab-icons.ts'
+
+interface TabBarProps {
+    activePath: (typeof tabPages)[number]['path']
+}
+
+export function TabBar({ activePath }: TabBarProps) {
+    return (
+        <View className="flex h-[calc(4rem+env(safe-area-inset-bottom))] w-full shrink-0 flex-row border-t border-divider bg-surface-subtle pb-[env(safe-area-inset-bottom)]">
+            {tabPages.map(({ path, label, icon }) => {
+                const selected = activePath === path
+                return (
+                    <Button
+                        key={path}
+                        id={`tab-${icon}`}
+                        aria-current={selected ? 'page' : 'false'}
+                        className={`m-0 flex min-w-0 flex-1 flex-col items-center justify-center gap-1 rounded-none border-none bg-transparent p-0 text-xs after:content-none ${selected ? 'text-primary font-bold' : 'text-muted font-light'}`}
+                        onClick={() => {
+                            if (selected) {
+                                return
+                            }
+                            void Taro.switchTab({ url: `/${path}` })
+                        }}
+                    >
+                        <Image
+                            src={tabIcons[icon]}
+                            mode="aspectFit"
+                            className={`h-6 w-6 ${selected ? 'opacity-100' : 'opacity-50'}`}
+                        />
+                        <Text>{label}</Text>
+                    </Button>
+                )
+            })}
+        </View>
+    )
+}

package/templates/default/src/components/tab-bar/tab-icons.ts

@@ -0,0 +1,9 @@
+import aboutIcon from '../../assets/icons/about.png'
+import exploreIcon from '../../assets/icons/explore.png'
+import homeIcon from '../../assets/icons/home.png'
+
+export const tabIcons = {
+    home: homeIcon,
+    explore: exploreIcon,
+    about: aboutIcon
+} as const

package/templates/default/src/pages/about/about-page.tsx

@@ -0,0 +1,48 @@
+import { ScrollView, Text, View } from 'virtual:taro/components'
+import { NavigationBar } from '../../components/navigation-bar/navigation-bar.tsx'
+import { TabBar } from '../../components/tab-bar/tab-bar.tsx'
+import { tabPages } from '../../tab-pages.ts'
+
+const platforms = ['WeChat', 'Alipay', 'TikTok', 'Web'] as const
+
+export default function AboutPage() {
+    return (
+        <View className="flex h-screen flex-col overflow-hidden bg-canvas bg-canvas-botanical text-foreground">
+            <NavigationBar title="About" />
+            <ScrollView scrollY enableFlex className="flex min-h-0 flex-1 flex-col">
+                <View className="mx-auto flex w-full max-w-4xl flex-col px-5 pb-12 pt-10">
+                    <Text className="text-xs font-bold tracking-widest text-primary-label">A LITTLE ABOUT VPT</Text>
+                    <Text className="brand-serif mt-3 block text-5xl font-semibold text-heading">Made to travel.</Text>
+                    <Text className="mt-4 block max-w-xl text-sm leading-7 text-muted">
+                        VPT brings Vite, React and Taro together so your ideas can grow across mini programs and the
+                        web.
+                    </Text>
+
+                    <View className="mt-9 rounded-3xl bg-primary p-7 text-white shadow-xl sm:p-9">
+                        <Text className="brand-serif block text-3xl font-semibold text-white">
+                            One project. Four places.
+                        </Text>
+                        <Text className="mt-3 block text-sm leading-6 text-on-primary-muted">
+                            Share the interface and tailor the details to each platform as you go.
+                        </Text>
+                        <View className="mt-6 flex flex-row flex-wrap gap-2">
+                            {platforms.map((platform) => (
+                                <View key={platform} className="rounded-full border border-on-primary-accent px-4 py-2">
+                                    <Text className="text-xs font-bold text-white">{platform}</Text>
+                                </View>
+                            ))}
+                        </View>
+                    </View>
+
+                    <View className="mt-5 flex flex-col rounded-3xl border border-outline bg-white/85 p-7 shadow-lg">
+                        <Text className="text-lg font-bold text-heading">Ready to start?</Text>
+                        <Text className="mt-2 text-sm leading-6 text-muted">
+                            Tap the Home tab to try the counter, lazy-loaded card and your first Taro API call.
+                        </Text>
+                    </View>
+                </View>
+            </ScrollView>
+            <TabBar activePath={tabPages[2].path} />
+        </View>
+    )
+}

package/templates/default/src/pages/explore/explore-page.tsx

@@ -0,0 +1,62 @@
+import { ScrollView, Text, View } from 'virtual:taro/components'
+import { NavigationBar } from '../../components/navigation-bar/navigation-bar.tsx'
+import { TabBar } from '../../components/tab-bar/tab-bar.tsx'
+import { tabPages } from '../../tab-pages.ts'
+
+const steps = [
+    {
+        number: '01',
+        title: 'Make it yours',
+        description: 'Start with the home page. Change the copy, colors and components to match your idea.',
+        file: 'src/pages/home/index.tsx'
+    },
+    {
+        number: '02',
+        title: 'Grow another page',
+        description: 'Add a React page and register its path in the VPT pages array.',
+        file: 'vite.config.ts'
+    },
+    {
+        number: '03',
+        title: 'Ship to every target',
+        description: 'Build for WeChat, Alipay, TikTok or the web from the same source.',
+        file: 'npm run build:wx'
+    }
+] as const
+
+export default function ExplorePage() {
+    return (
+        <View className="flex h-screen flex-col overflow-hidden bg-canvas bg-canvas-botanical text-foreground">
+            <NavigationBar title="Explore" />
+            <ScrollView scrollY enableFlex className="flex min-h-0 flex-1 flex-col">
+                <View className="mx-auto flex w-full max-w-4xl flex-col px-5 pb-12 pt-10">
+                    <Text className="text-xs font-bold tracking-widest text-primary-label">YOUR NEXT STEPS</Text>
+                    <Text className="brand-serif mt-3 block text-5xl font-semibold text-heading">Room to grow.</Text>
+                    <Text className="mt-4 block max-w-xl text-sm leading-7 text-muted">
+                        This starter is a beginning, not a blueprint. Pick a path and make something of your own.
+                    </Text>
+                    <View className="mt-9 flex flex-col gap-4">
+                        {steps.map((step) => (
+                            <View
+                                key={step.number}
+                                className="flex flex-col rounded-3xl border border-outline bg-white/85 p-6 shadow-lg sm:flex-row sm:gap-6"
+                            >
+                                <Text className="brand-serif block text-3xl font-semibold text-primary-control">
+                                    {step.number}
+                                </Text>
+                                <View className="mt-3 flex min-w-0 flex-1 flex-col sm:mt-0">
+                                    <Text className="text-lg font-bold text-heading">{step.title}</Text>
+                                    <Text className="mt-2 text-sm leading-6 text-muted">{step.description}</Text>
+                                    <Text className="mt-4 self-start rounded-full bg-primary-surface px-4 py-2 text-xs font-bold text-primary">
+                                        {step.file}
+                                    </Text>
+                                </View>
+                            </View>
+                        ))}
+                    </View>
+                </View>
+            </ScrollView>
+            <TabBar activePath={tabPages[1].path} />
+        </View>
+    )
+}

package/templates/default/src/pages/home/index.tsx

@@ -1,8 +1,10 @@
 import { ScrollView, Text, View } from 'virtual:taro/components'
 import { lazy, Suspense, useState } from 'react'
-import { Counter } from '../../components/counter/counter.tsx'
 import { BotanicalSprig } from '../../components/botanical-sprig/botanical-sprig.tsx'
+import { Counter } from '../../components/counter/counter.tsx'
 import { NavigationBar } from '../../components/navigation-bar/navigation-bar.tsx'
+import { TabBar } from '../../components/tab-bar/tab-bar.tsx'
+import { tabPages } from '../../tab-pages.ts'
 
 const featureCards = [
     {
@@ -32,9 +34,9 @@ function HomePage() {
     const [count, setCount] = useState(0)
 
     return (
-        <View className="flex h-full min-h-0 flex-1 flex-col overflow-hidden">
+        <View className="flex h-screen flex-col overflow-hidden bg-canvas bg-canvas-botanical text-foreground">
             <NavigationBar title="VPT" />
-            <ScrollView scrollY className="flex min-h-0 flex-1 flex-col">
+            <ScrollView scrollY enableFlex className="flex min-h-0 flex-1 flex-col">
                 <View className="relative flex shrink-0 flex-col items-center overflow-hidden px-5 pb-8 pt-6">
                     <BotanicalSprig placement="top" />
                     <BotanicalSprig placement="side" />
@@ -43,10 +45,10 @@ function HomePage() {
                         <Text className="brand-serif mt-7 block text-[7rem] font-semibold leading-none tracking-[-0.08em] text-primary sm:text-[9rem]">
                             VPT
                         </Text>
-                        <Text className="mt-5 block max-w-2xl text-2xl font-bold leading-tight text-heading sm:text-3xl">
+                        <Text className="mt-5 block w-full max-w-2xl text-2xl font-bold leading-tight text-heading sm:text-3xl">
                             Build naturally. Ship everywhere.
                         </Text>
-                        <Text className="mt-4 block max-w-xl text-sm leading-7 text-muted sm:text-base">
+                        <Text className="mt-4 block w-full max-w-xl text-sm leading-7 text-muted sm:text-base">
                             A botanical little starter for building polished WeChat Mini Programs and Web apps with one
                             modern React codebase.
                         </Text>
@@ -96,13 +98,13 @@ function HomePage() {
                 <View className="flex shrink-0 flex-col items-center px-5 pb-12 pt-14">
                     <View className="flex w-full max-w-4xl flex-col">
                         <View className="flex flex-col items-center text-center">
-                            <Text className="text-xs font-bold tracking-widest text-primary-label">
+                            <Text className="w-full text-xs font-bold tracking-widest text-primary-label">
                                 A SMALL START, A MODERN FOUNDATION
                             </Text>
-                            <Text className="brand-serif mt-3 block text-4xl font-semibold text-heading">
+                            <Text className="brand-serif mt-3 block w-full text-4xl font-semibold text-heading">
                                 Everything is ready to grow.
                             </Text>
-                            <Text className="mt-3 block max-w-xl text-sm leading-7 text-muted">
+                            <Text className="mt-3 block w-full max-w-xl text-sm leading-7 text-muted">
                                 Keep the pieces you need, replace the rest, and let VPT handle the cross-platform build.
                             </Text>
                         </View>
@@ -136,6 +138,7 @@ function HomePage() {
                     </View>
                 </View>
             </ScrollView>
+            <TabBar activePath={tabPages[0].path} />
         </View>
     )
 }

package/templates/default/src/tab-pages.ts

@@ -0,0 +1,5 @@
+export const tabPages = [
+    { path: 'pages/home/index', label: 'Home', icon: 'home' },
+    { path: 'pages/explore/explore-page', label: 'Explore', icon: 'explore' },
+    { path: 'pages/about/about-page', label: 'About', icon: 'about' }
+] as const

package/templates/default/tsconfig.app.json

@@ -17,6 +17,7 @@
         "jsx": "react-jsx",
 
         /* Linting */
+        "strict": true,
         "noUnusedLocals": true,
         "noUnusedParameters": true,
         "erasableSyntaxOnly": true,

package/templates/default/tsconfig.node.json

@@ -2,7 +2,7 @@
     "compilerOptions": {
         "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
         "target": "es2023",
-        "lib": ["ES2023"],
+        "lib": ["ESNext"],
         "module": "esnext",
         "types": ["node"],
         "skipLibCheck": true,
@@ -15,6 +15,7 @@
         "noEmit": true,
 
         /* Linting */
+        "strict": true,
         "noUnusedLocals": true,
         "noUnusedParameters": true,
         "erasableSyntaxOnly": true,

package/templates/default/vite.config.ts

@@ -2,6 +2,7 @@ import path from 'node:path'
 import { fileURLToPath } from 'node:url'
 import { defineConfig, loadEnv } from 'vite'
 import vpt, { type VptJsonObject, type VptTarget } from 'vite-plugin-taro'
+import { tabPages } from './src/tab-pages.ts'
 
 export default defineConfig(({ mode }) => {
     const env = loadEnv(mode, process.cwd(), 'VITE_VPT_')
@@ -20,11 +21,22 @@ export default defineConfig(({ mode }) => {
                 pages: [
                     {
                         path: 'pages/home/index',
+                        prerender: true,
+                        config: createPageJson(target)
+                    },
+                    {
+                        path: 'pages/explore/explore-page',
+                        prerender: true,
+                        config: createPageJson(target)
+                    },
+                    {
+                        path: 'pages/about/about-page',
+                        prerender: true,
                         config: createPageJson(target)
                     }
                 ],
                 appJson: createAppJson(target),
-                projectConfigJson: createProjectConfigJson({ target, appId }),
+                projectConfigJson: createProjectConfigJson(target, appId),
                 projectPrivateConfigJson: createProjectPrivateConfigJson(target),
                 hmr: {
                     mode: target === 'wx' ? 'devtools' : 'interpreter'
@@ -38,7 +50,8 @@ function createPageJson(target: VptTarget): VptJsonObject {
     switch (target) {
         case 'wx': {
             return {
-                glassEaselWebview: true,
+                // 在 app json 的 window 上设置，这里就不用设置了
+                // glassEaselWebview: true,
                 navigationStyle: 'custom',
                 navigationBarTextStyle: 'black'
             }
@@ -69,6 +82,13 @@ function createAppJson(target: VptTarget): VptJsonObject {
                 renderer: 'skyline',
                 componentFramework: 'glass-easel',
                 glassEaselWebview: true,
+                tabBar: {
+                    custom: true,
+                    color: '#667085',
+                    selectedColor: '#26734d',
+                    backgroundColor: '#f8fbf4',
+                    list: tabPages.map(({ path, label }) => ({ pagePath: path, text: label }))
+                },
                 rendererOptions: {
                     skyline: {
                         defaultDisplayBlock: true,
@@ -77,6 +97,7 @@ function createAppJson(target: VptTarget): VptJsonObject {
                     }
                 },
                 window: {
+                    glassEaselWebview: true,
                     navigationStyle: 'custom',
                     navigationBarTextStyle: 'black'
                 }
@@ -86,6 +107,13 @@ function createAppJson(target: VptTarget): VptJsonObject {
             return {
                 lazyCodeLoading: 'renderedComponents',
                 useDynamicPlugins: true,
+                tabBar: {
+                    customize: true,
+                    textColor: '#667085',
+                    selectedColor: '#26734d',
+                    backgroundColor: '#f8fbf4',
+                    items: tabPages.map(({ path, label }) => ({ pagePath: path, name: label }))
+                },
                 window: {
                     transparentTitle: 'always',
                     titlePenetrate: 'YES'
@@ -94,6 +122,13 @@ function createAppJson(target: VptTarget): VptJsonObject {
         }
         case 'tt': {
             return {
+                tabBar: {
+                    custom: true,
+                    color: '#667085',
+                    selectedColor: '#26734d',
+                    backgroundColor: '#f8fbf4',
+                    list: tabPages.map(({ path, label }) => ({ pagePath: path, text: label }))
+                },
                 window: {
                     navigationStyle: 'custom',
                     navigationBarTextStyle: 'black'
@@ -106,7 +141,7 @@ function createAppJson(target: VptTarget): VptJsonObject {
     }
 }
 
-function createProjectConfigJson({ target, appId }: { target: VptTarget; appId: string | undefined }): VptJsonObject {
+function createProjectConfigJson(target: VptTarget, appId: string | undefined): VptJsonObject {
     switch (target) {
         case 'wx': {
             return {
@@ -115,6 +150,7 @@ function createProjectConfigJson({ target, appId }: { target: VptTarget; appId:
                 description: '',
                 compileType: 'miniprogram',
                 setting: {
+                    // 在这里改为 true 开启 Skyline，默认关闭
                     skylineRenderEnable: false,
                     urlCheck: false,
                     es6: false,

package/templates/default/src/components/footer/footer.tsx

@@ -1,9 +0,0 @@
-export function Footer() {
-    return (
-        <div className="mt-auto flex h-10 shrink-0 flex-row items-center justify-center border-t border-divider bg-surface-subtle/95 px-5">
-            <span className="text-center text-xs font-bold tracking-widest text-quiet">
-                VPT · OPEN SOURCE · MIT
-            </span>
-        </div>
-    )
-}