create-vite-taro 0.6.20 → 0.7.0

package/README.md

@@ -1,6 +1,6 @@
 # create-vite-taro
 
-Create a Vite 8 + React 19 + Taro app for WeChat Mini Program and Web targets.
+Create a Vite 8 + React 19 + Taro app for WeChat Mini Program, Alipay Mini Program, and Web targets.
 
 > **AI-assisted development is recommended:** Follow the [VPT AI development guide](https://vpt.js.org/guides/ai/) and let a coding assistant create, develop, test, and validate your app.
 

package/index.js

@@ -51,6 +51,7 @@ console.log('Next steps:')
 if (cdCommand) console.log(`  ${cdCommand}`)
 console.log(`  ${packageManager} install`)
 console.log(`  ${getScriptCommand(packageManager, 'dev:wx')}`)
+console.log(`  ${getScriptCommand(packageManager, 'dev:zfb')}`)
 console.log(`  ${getScriptCommand(packageManager, 'dev:h5')}`)
 
 function parseArgs(args) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "create-vite-taro",
-  "version": "0.6.20",
-  "description": "Create Vite 8 + React 19 + Taro apps for H5 and WeChat Mini Program targets.",
+  "version": "0.7.0",
+  "description": "Create Vite 8 + React 19 + Taro apps for WeChat, Alipay, and H5 targets.",
   "type": "module",
   "bin": {
     "create-vite-taro": "./index.js"
@@ -27,6 +27,7 @@
     "create",
     "react",
     "wechat",
+    "alipay",
     "mini-program"
   ],
   "author": "sep2",

package/templates/default/README.md

@@ -1,6 +1,6 @@
 # VPT
 
-基于 Vite 8、React 19、Taro 4、TypeScript 和 Tailwind CSS v4，一套代码运行于微信小程序和 Web。
+基于 Vite 8、React 19、Taro 4、TypeScript 和 Tailwind CSS v4，一套代码运行于微信小程序、支付宝小程序和 Web。
 
 - [文档](https://vpt.js.org)
 - [GitHub](https://github.com/sep2/vite-plugin-taro)
@@ -41,6 +41,22 @@ npm install
 
 开发期间保持命令运行。模板已开启热更新、关闭本地开发的 URL 校验，并默认关闭开发者工具中暂不支持热更新的 Skyline。
 
+### 支付宝小程序
+
+1. 在 `.env.local` 中填写支付宝 App ID：
+
+    ```dotenv
+    VITE_VPT_ALIPAY_APP_ID=2021000000000000
+    ```
+
+2. 启动开发构建：
+
+    ```sh
+    npm run dev:zfb
+    ```
+
+3. 用支付宝小程序开发者工具导入 `dist/zfb`，不要导入项目根目录。
+
 ### Web
 
 ```sh
@@ -58,9 +74,9 @@ import Taro from 'virtual:taro/api'
 import { Button, Text, View } from 'virtual:taro/components'
 ```
 
-不要直接安装或导入 `@tarojs/*`。在 `vite.config.ts` 中添加页面并修改应用或微信项目配置。
+不要直接安装或导入 `@tarojs/*`。在 `vite.config.ts` 中添加页面，并按当前目标修改应用与开发工具项目配置。
 
-模板包含条件编译、微信原生组件、懒加载、自定义导航栏、Tailwind CSS、CSS Modules 和全局样式示例；不需要的示例可直接删除。
+模板包含条件编译、微信原生组件、支付宝与 Web 共用的 Taro 组件、懒加载、自定义导航栏、Tailwind CSS、CSS Modules 和全局样式示例；不需要的示例可直接删除。
 
 ### 样式
 
@@ -68,23 +84,25 @@ import { Button, Text, View } from 'virtual:taro/components'
 
 ### 热更新
 
-微信端热更新通常会保留 App 数据、当前页面、兼容的 React Hook 状态和原生输入值。修改 Vite 配置、组件或 Hook 结构不兼容，或更新无法安全应用时，会整页重载。详见[热更新指南](https://vpt.js.org/guides/hot-module-replacement/)。
+小程序端热更新通常会保留 App 数据、当前页面、兼容的 React Hook 状态和原生输入值。修改 Vite 配置、组件或 Hook 结构不兼容，或更新无法安全应用时，会整页重载。详见[热更新指南](https://vpt.js.org/guides/hot-module-replacement/)。
 
 ## 命令
 
 | 命令 | 用途 | 输出 |
 | --- | --- | --- |
 | `npm run dev:wx` | 开发微信小程序 | `dist/wx` |
+| `npm run dev:zfb` | 开发支付宝小程序 | `dist/zfb` |
 | `npm run dev:h5` | 开发 Web | — |
 | `npm run build:wx` | 构建微信小程序 | `dist/wx` |
+| `npm run build:zfb` | 构建支付宝小程序 | `dist/zfb` |
 | `npm run build:h5` | 构建 Web | `dist/h5` |
 | `npm run preview:h5` | 预览 Web 生产构建 | — |
 | `npm run typecheck` | TypeScript 类型检查 | — |
 
 ## 常见问题
 
-- **开发者工具无法打开项目：** 确认导入的是 `dist/wx`，且 `.env.local` 中的 App ID 可用。
-- **热更新失败：** 依次关闭微信开发者工具、停止 `dev:wx`、删除 `dist/wx`、重新运行 `npm run dev:wx`，再打开开发者工具并导入 `dist/wx`。
+- **开发者工具无法打开项目：** 确认导入的是当前目标的 `dist/wx` 或 `dist/zfb`，且 `.env.local` 中对应的 App ID 可用。
+- **热更新失败：** 关闭对应开发者工具，停止开发命令，删除当前目标的输出目录，重新运行 `dev:wx` 或 `dev:zfb`，再导入生成目录。
 - **Tailwind 类未生效：** 保留 `src/app.css` 中的 `@source "./";`，并使用完整类名。
 - **pnpm 忽略依赖构建脚本：** 运行 `pnpm approve-builds`，批准所需脚本后重新安装。
 

package/templates/default/_env.local

@@ -1 +1,2 @@
 VITE_VPT_WECHAT_APP_ID=wx0000000000000000
+VITE_VPT_ALIPAY_APP_ID=2021000000000000

package/templates/default/package.json

@@ -5,8 +5,10 @@
     "type": "module",
     "scripts": {
         "dev:wx": "cross-env NODE_ENV=development VITE_VPT_TARGET=wx vite",
+        "dev:zfb": "cross-env NODE_ENV=development VITE_VPT_TARGET=zfb vite",
         "dev:h5": "cross-env NODE_ENV=development VITE_VPT_TARGET=h5 vite",
         "build:wx": "cross-env NODE_ENV=production VITE_VPT_TARGET=wx vite build",
+        "build:zfb": "cross-env NODE_ENV=production VITE_VPT_TARGET=zfb vite build",
         "build:h5": "cross-env NODE_ENV=production VITE_VPT_TARGET=h5 vite build",
         "preview:h5": "cross-env NODE_ENV=production VITE_VPT_TARGET=h5 vite preview --outDir dist/h5",
         "typecheck": "tsc -b"
@@ -21,9 +23,9 @@
         "@types/react-dom": "^19.2.5",
         "typescript": "^7.0.2",
         "cross-env": "^10.1.0",
-        "rolldown": "1.2.5",
+        "rolldown": "1.2.7",
         "vite": "8.2.2",
-        "vite-plugin-taro": "^0.6.20"
+        "vite-plugin-taro": "^0.7.0"
     },
     "overrides": {
         "@types/react": "$@types/react"

package/templates/default/src/app.tsx

@@ -3,12 +3,10 @@ import { View } from 'virtual:taro/components'
 import type { PropsWithChildren } from 'react'
 import './app.css'
 import { Footer } from './components/footer/footer.tsx'
-import { initNavigationBar } from './components/navigation-bar/use-navigation-bar.ts'
 
 function App({ children }: PropsWithChildren) {
     useLaunch(() => {
         console.log('App launched')
-        initNavigationBar()
     })
 
     return (

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

@@ -2,8 +2,8 @@
 import { NativeCounter } from './native-counter.tsx'
 // #endif
 
-// #ifdef h5
-import { WebCounter } from './web-counter.tsx'
+// #ifndef wx
+import { SharedCounter } from './shared-counter.tsx'
 // #endif
 
 export interface CounterProps {
@@ -17,7 +17,7 @@ export function Counter(props: CounterProps) {
     return <NativeCounter {...props} />
     // #endif
 
-    // #ifdef h5
-    return <WebCounter {...props} />
+    // #ifndef wx
+    return <SharedCounter {...props} />
     // #endif
 }

package/templates/default/src/components/counter/{web-counter.tsx → shared-counter.tsx}

@@ -1,7 +1,7 @@
 import { Button, Text, View } from 'virtual:taro/components'
 import type { CounterProps } from './counter.tsx'
 
-export function WebCounter({ count, onDecrement, onIncrement }: CounterProps) {
+export function SharedCounter({ count, onDecrement, onIncrement }: CounterProps) {
     return (
         <View className="flex flex-col rounded-2xl bg-surface-muted p-4">
             <Text className="text-center text-xs font-bold tracking-widest text-foreground">SHARED COUNTER</Text>

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

@@ -11,11 +11,11 @@ function px(value: number): string {
 }
 
 export function NavigationBar({ title }: NavigationBarProps) {
-    const { navBar, menuInfo } = useNavigationBar()
-    const containerStyle: CSSProperties = { height: px(navBar.height) }
-    const statusBarStyle: CSSProperties = { height: px(navBar.top) }
-    const contentStyle: CSSProperties = { padding: `${px(navBar.py)} ${px(navBar.px)}` }
-    const sideStyle: CSSProperties = { flexBasis: px(menuInfo.width), width: px(menuInfo.width) }
+    const { height, top, paddingX, paddingY, menuWidth } = useNavigationBar()
+    const containerStyle: CSSProperties = { height: px(height) }
+    const statusBarStyle: CSSProperties = { height: px(top) }
+    const contentStyle: CSSProperties = { padding: `${px(paddingY)} ${px(paddingX)}` }
+    const sideStyle: CSSProperties = { flexBasis: px(menuWidth), width: px(menuWidth) }
 
     return (
         <View className="flex w-full flex-col text-primary" style={containerStyle}>

package/templates/default/src/components/navigation-bar/use-navigation-bar.ts

@@ -1,87 +1,95 @@
 import Taro from 'virtual:taro/api'
-import { useState } from 'react'
 
 const isWechatTarget = import.meta.env.VITE_VPT_TARGET === 'wx'
+const isAlipayTarget = import.meta.env.VITE_VPT_TARGET === 'zfb'
 
-interface NavigationBarNavInfo {
+interface NavigationBarMetrics {
     height: number
     top: number
-    py: number
-    px: number
+    paddingX: number
+    paddingY: number
+    menuWidth: number
 }
 
-interface NavigationBarMenuInfo {
-    bottom: number
+interface MenuButtonMetrics {
     height: number
-    left: number
     right: number
     top: number
     width: number
 }
 
-interface NavigationBarInfo {
-    navBar: NavigationBarNavInfo
-    menuInfo: NavigationBarMenuInfo
+/** Alipay fields narrowed from Taro's shared system-info result type. */
+type AlipaySystemInfo = ReturnType<typeof Taro.getSystemInfoSync> & {
+    statusBarHeight: number
+    titleBarHeight: number
 }
 
-let navigationBarInfo: NavigationBarInfo = {
-    navBar: { height: 0, top: 0, py: 0, px: 0 },
-    menuInfo: { bottom: 0, height: 0, left: 0, right: 0, top: 0, width: 0 }
-}
-
-function createFallbackMenuInfo(screenWidth: number): NavigationBarMenuInfo {
-    const width = 88
-    const height = 32
-    const top = 6
-    const right = Math.max(width, screenWidth - 16)
+// The app uses one immutable navigation layout per process; this mutable slot avoids repeated native reads across Page mounts.
+let cachedNavigationBarMetrics: NavigationBarMetrics | undefined
 
+function getFallbackMenuButtonMetrics(screenWidth: number): MenuButtonMetrics {
     return {
-        bottom: top + height,
-        height,
-        left: right - width,
-        right,
-        top,
-        width
+        height: 32,
+        right: Math.max(88, screenWidth - 16),
+        top: 6,
+        width: 88
     }
 }
 
-function getMenuInfo(screenWidth: number): NavigationBarMenuInfo {
+function getMenuButtonMetrics(screenWidth: number): MenuButtonMetrics {
     if (isWechatTarget) {
-        const menuButtonInfo = Taro.getMenuButtonBoundingClientRect()
-        if (menuButtonInfo.width > 0 && menuButtonInfo.height > 0) return menuButtonInfo
+        const menuButtonMetrics = Taro.getMenuButtonBoundingClientRect()
+        if (menuButtonMetrics.width > 0 && menuButtonMetrics.height > 0) return menuButtonMetrics
     }
 
-    return createFallbackMenuInfo(screenWidth)
+    return getFallbackMenuButtonMetrics(screenWidth)
 }
 
-export function initNavigationBar(): NavigationBarInfo {
-    const windowInfo = Taro.getWindowInfo()
-    const screenWidth = windowInfo.screenWidth || 375
-    const statusBarHeight = isWechatTarget ? (windowInfo.statusBarHeight ?? 44) : 0
-    const menuInfo = getMenuInfo(screenWidth)
-    const menuButtonStatusBarGap = Math.max(0, menuInfo.top - statusBarHeight)
-    const navBarHeight = menuButtonStatusBarGap * 2 + menuInfo.height + statusBarHeight
-    const paddingX = Math.max(0, screenWidth - menuInfo.right)
-
-    navigationBarInfo = {
-        navBar: {
-            height: navBarHeight,
-            top: statusBarHeight,
-            py: menuButtonStatusBarGap,
-            px: paddingX
-        },
-        menuInfo
+function getAlipayNavigationBarMetrics(systemInfo: AlipaySystemInfo): NavigationBarMetrics {
+    const { statusBarHeight, titleBarHeight } = systemInfo
+
+    return {
+        height: statusBarHeight + titleBarHeight,
+        top: statusBarHeight,
+        paddingX: 16,
+        paddingY: (titleBarHeight - 32) / 2,
+        menuWidth: 88
     }
+}
+
+function getNavigationBarMetrics(
+    screenWidth: number,
+    statusBarHeight: number,
+    menuButtonMetrics: MenuButtonMetrics
+): NavigationBarMetrics {
+    const menuButtonStatusBarGap = Math.max(0, menuButtonMetrics.top - statusBarHeight)
 
-    return navigationBarInfo
+    return {
+        height: menuButtonStatusBarGap * 2 + menuButtonMetrics.height + statusBarHeight,
+        top: statusBarHeight,
+        paddingX: Math.max(0, screenWidth - menuButtonMetrics.right),
+        paddingY: menuButtonStatusBarGap,
+        menuWidth: menuButtonMetrics.width
+    }
 }
 
-function getNavigationBarInfo(): NavigationBarInfo {
-    if (navigationBarInfo.navBar.height > 0) return navigationBarInfo
-    return initNavigationBar()
+function getNavigationBarMetricsCached(): NavigationBarMetrics {
+    if (cachedNavigationBarMetrics) return cachedNavigationBarMetrics
+
+    if (isAlipayTarget) {
+        cachedNavigationBarMetrics = getAlipayNavigationBarMetrics(Taro.getSystemInfoSync() as AlipaySystemInfo)
+        return cachedNavigationBarMetrics
+    }
+
+    const windowInfo = Taro.getWindowInfo()
+    const screenWidth = windowInfo.screenWidth || 375
+    const statusBarHeight = isWechatTarget ? (windowInfo.statusBarHeight ?? 44) : 0
+    const menuButtonMetrics = getMenuButtonMetrics(screenWidth)
+
+    cachedNavigationBarMetrics = getNavigationBarMetrics(screenWidth, statusBarHeight, menuButtonMetrics)
+    return cachedNavigationBarMetrics
 }
 
-export function useNavigationBar(): NavigationBarInfo {
-    const [currentNavigationBarInfo] = useState(getNavigationBarInfo)
-    return currentNavigationBarInfo
+export function useNavigationBar(): NavigationBarMetrics {
+    return getNavigationBarMetricsCached()
 }

package/templates/default/src/global.d.ts

@@ -1,3 +1,3 @@
 interface ImportMetaEnv {
-    readonly VITE_VPT_TARGET: 'wx' | 'h5'
+    readonly VITE_VPT_TARGET: 'wx' | 'zfb' | 'h5'
 }

package/templates/default/vite.config.ts

@@ -1,12 +1,13 @@
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
 import { defineConfig, loadEnv } from 'vite'
-import vpt, { type VptTarget } from 'vite-plugin-taro'
+import vpt, { type VptJsonObject, type VptTarget } from 'vite-plugin-taro'
 
 export default defineConfig(({ mode }) => {
     const env = loadEnv(mode, process.cwd(), 'VITE_VPT_')
     const target = getTarget(env)
-    const wechatAppId = env.VITE_VPT_WECHAT_APP_ID || 'touristappid'
+    const wechatAppId = env.VITE_VPT_WECHAT_APP_ID
+    const alipayAppId = env.VITE_VPT_ALIPAY_APP_ID
 
     return {
         build: {
@@ -19,73 +20,177 @@ export default defineConfig(({ mode }) => {
                 pages: [
                     {
                         path: 'pages/home/index',
-                        config: {
-                            navigationStyle: 'custom',
-                            navigationBarTextStyle: 'black'
-                        }
+                        config: createPageJson(target)
                     }
                 ],
-                appJson: {
-                    lazyCodeLoading: 'requiredComponents',
-                    window: {
-                        navigationStyle: 'custom',
-                        navigationBarTextStyle: 'black'
-                    },
-                    renderer: 'skyline',
-                    componentFramework: 'glass-easel',
-                    rendererOptions: {
-                        skyline: {
-                            defaultDisplayBlock: true,
-                            defaultContentBox: true
-                        }
-                    }
+                appJson: createAppJson(target),
+                projectConfigJson: createProjectConfigJson({ target, wechatAppId, alipayAppId }),
+                projectPrivateConfigJson: createProjectPrivateConfigJson(target),
+                sitemapJson: { rules: [{ action: 'allow', page: '*' }] },
+                hmr: {
+                    mode: target === 'zfb' ? 'interpreter' : 'devtools'
                 },
-                projectConfigJson: {
-                    appid: wechatAppId,
-                    projectname: 'vite-taro-app',
-                    description: '',
-                    compileType: 'miniprogram',
-                    setting: {
-                        // WeChat DevTools does not support hot reload with Skyline yet.
-                        skylineRenderEnable: false,
-                        urlCheck: false,
-                        es6: false,
-                        postcss: false,
-                        minified: false,
-                        compileHotReLoad: true,
-                        enhance: false,
-                        uglifyFileName: false,
-                        preloadBackgroundData: false,
-                        newFeature: true,
-                        autoAudits: false,
-                        coverView: true,
-                        showShadowRootInWxmlPanel: false,
-                        scopeDataCheck: false,
-                        useCompilerModule: false
+            })
+        ]
+    }
+})
+
+function createPageJson(target: VptTarget): VptJsonObject {
+    switch (target) {
+        case 'wx': {
+            return {
+                navigationStyle: 'custom',
+                navigationBarTextStyle: 'black'
+            }
+        }
+        case 'zfb': {
+            return {
+                transparentTitle: 'always',
+                titlePenetrate: 'YES'
+            }
+        }
+        default: {
+            return {}
+        }
+    }
+}
+
+function createAppJson(target: VptTarget): VptJsonObject {
+    switch (target) {
+        case 'wx': {
+            return {
+                lazyCodeLoading: 'requiredComponents',
+                renderer: 'skyline',
+                componentFramework: 'glass-easel',
+                glassEaselWebview: true,
+                rendererOptions: {
+                    skyline: {
+                        defaultDisplayBlock: true,
+                        defaultContentBox: true
                     }
                 },
-                projectPrivateConfigJson: {
-                    setting: {
-                        urlCheck: false
+                window: {
+                    navigationStyle: 'custom',
+                    navigationBarTextStyle: 'black'
+                }
+            }
+        }
+        case 'zfb': {
+            return {
+                lazyCodeLoading: 'renderedComponents',
+                useDynamicPlugins: true,
+                window: {
+                    transparentTitle: 'always',
+                    titlePenetrate: 'YES'
+                }
+            }
+        }
+        default: {
+            return {}
+        }
+    }
+}
+
+function createProjectConfigJson({
+    target,
+    wechatAppId,
+    alipayAppId
+}: {
+    target: VptTarget
+    wechatAppId: string
+    alipayAppId: string | undefined
+}): VptJsonObject {
+    switch (target) {
+        case 'wx': {
+            return {
+                appid: wechatAppId,
+                projectname: 'vpt-project',
+                description: '',
+                compileType: 'miniprogram',
+                setting: {
+                    skylineRenderEnable: false,
+                    urlCheck: false,
+                    es6: false,
+                    postcss: false,
+                    minified: false,
+                    enhance: false,
+                    uglifyFileName: false,
+                    minifyWXSS: false,
+                    minifyWXML: false,
+                    compileHotReLoad: true,
+                    preloadBackgroundData: false,
+                    newFeature: true,
+                    autoAudits: false,
+                    coverView: true,
+                    showShadowRootInWxmlPanel: false,
+                    scopeDataCheck: false,
+                    useCompilerModule: false
+                }
+            }
+        }
+        case 'zfb': {
+            return {
+                appid: alipayAppId,
+                miniprogramRoot: './',
+                format: 2,
+                compileOptions: {
+                    component2: true,
+                    globalObjectMode: 'enable',
+                    transpile: {
+                        script: {
+                            ignore: ['**']
+                        }
                     }
                 },
-                sitemapJson: {
-                    rules: [{ action: 'allow', page: '*' }]
+                developOptions: {
+                    lazyCompile: false,
+                    hotReload: true,
+                    skipTranspile: true,
+                    sourcemap: false,
+                    minify: false
                 }
-            })
-        ]
+            }
+        }
+        default: {
+            return {}
+        }
     }
-})
+}
 
-const targetEnvName = 'VITE_VPT_TARGET'
-const projectRoot = fileURLToPath(new URL('.', import.meta.url))
+function createProjectPrivateConfigJson(target: VptTarget): VptJsonObject {
+    switch (target) {
+        case 'wx': {
+            return {
+                setting: {
+                    urlCheck: false
+                }
+            }
+        }
+        case 'zfb': {
+            return {
+                ignoreHttpDomainCheck: true,
+                ignoreCertificateDomainCheck: true,
+                ignoreWebViewDomainCheck: true
+            }
+        }
+        default:
+            return {}
+    }
+}
 
 function getTarget(env: Record<string, string>): VptTarget {
+    const targetEnvName = 'VITE_VPT_TARGET'
+
     const target = env[targetEnvName]
-    if (target === 'wx' || target === 'h5') return target
-    throw new Error(`${targetEnvName} must be "wx" or "h5".`)
+
+    if (target === 'wx' || target === 'zfb' || target === 'h5') {
+        return target
+    }
+
+    throw new Error(`${targetEnvName} must be "wx", "zfb", or "h5".`)
 }
 
+const projectRoot = fileURLToPath(new URL('.', import.meta.url))
 function fromRoot(...segments: string[]): string {
     return path.resolve(projectRoot, ...segments)
 }