create-vite-taro 0.7.4 → 0.7.5-beta.0

package/README.md

@@ -1,6 +1,6 @@
 # create-vite-taro
 
-Create a Vite 8 + React 19 + Taro app for WeChat Mini Program, Alipay Mini Program, and Web targets.
+Create a Vite 8 + React 19 + Taro app for WeChat, Alipay, TikTok Mini Programs, 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

@@ -56,6 +56,7 @@ 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:tt')}`)
 console.log(`  ${getScriptCommand(packageManager, 'dev:h5')}`)
 
 function parseArgs(args) {

package/package.json

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

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)
@@ -57,6 +57,22 @@ npm install
 
 3. 用支付宝小程序开发者工具导入 `dist/zfb`，不要导入项目根目录。
 
+### 抖音小程序（TT）
+
+1. 在 `.env.local` 中填写抖音 App ID：
+
+    ```dotenv
+    VITE_VPT_TIKTOK_APP_ID=testAppId
+    ```
+
+2. 启动开发构建：
+
+    ```sh
+    npm run dev:tt
+    ```
+
+3. 用抖音小程序开发者工具导入 `dist/tt`，不要导入项目根目录。
+
 ### Web
 
 ```sh
@@ -76,7 +92,7 @@ import { Button, Text, View } from 'virtual:taro/components'
 
 不要直接安装或导入 `@tarojs/*`。在 `vite.config.ts` 中添加页面，并按当前目标修改应用与开发工具项目配置。
 
-模板包含条件编译、微信原生组件、支付宝与 Web 共用的 Taro 组件、懒加载、自定义导航栏、Tailwind CSS、CSS Modules 和全局样式示例；不需要的示例可直接删除。
+模板包含条件编译、微信原生组件、支付宝、抖音与 Web 共用的 Taro 组件、懒加载、自定义导航栏、Tailwind CSS、CSS Modules 和全局样式示例；不需要的示例可直接删除。
 
 ### 样式
 
@@ -92,17 +108,19 @@ import { Button, Text, View } from 'virtual:taro/components'
 | --- | --- | --- |
 | `npm run dev:wx` | 开发微信小程序 | `dist/wx` |
 | `npm run dev:zfb` | 开发支付宝小程序 | `dist/zfb` |
+| `npm run dev:tt` | 开发抖音小程序 | `dist/tt` |
 | `npm run dev:h5` | 开发 Web | — |
 | `npm run build:wx` | 构建微信小程序 | `dist/wx` |
 | `npm run build:zfb` | 构建支付宝小程序 | `dist/zfb` |
+| `npm run build:tt` | 构建抖音小程序 | `dist/tt` |
 | `npm run build:h5` | 构建 Web | `dist/h5` |
 | `npm run preview:h5` | 预览 Web 生产构建 | — |
 | `npm run typecheck` | TypeScript 类型检查 | — |
 
 ## 常见问题
 
-- **开发者工具无法打开项目：** 确认导入的是当前目标的 `dist/wx` 或 `dist/zfb`，且 `.env.local` 中对应的 App ID 可用。
-- **热更新失败：** 关闭对应开发者工具，停止开发命令，删除当前目标的输出目录，重新运行 `dev:wx` 或 `dev:zfb`，再导入生成目录。
+- **开发者工具无法打开项目：** 确认导入的是当前目标的 `dist/...`，且 `.env.local` 中对应的 App ID 可用。
+- **热更新失败：** 关闭对应开发者工具，停止开发命令，删除当前目标的输出目录，重新运行 `dev:...`，再导入生成目录。
 - **Tailwind 类未生效：** 保留 `src/app.css` 中的 `@source "./";`，并使用完整类名。
 - **pnpm 忽略依赖构建脚本：** 运行 `pnpm approve-builds`，批准所需脚本后重新安装。
 

package/templates/default/_env.local

@@ -1,2 +1,3 @@
 VITE_VPT_WECHAT_APP_ID=wx0000000000000000
 VITE_VPT_ALIPAY_APP_ID=2021000000000000
+VITE_VPT_TIKTOK_APP_ID=testAppId

package/templates/default/package.json

@@ -6,9 +6,11 @@
     "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:tt": "cross-env NODE_ENV=development VITE_VPT_TARGET=tt 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:tt": "cross-env NODE_ENV=production VITE_VPT_TARGET=tt 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"
@@ -23,6 +25,7 @@
         "@types/react-dom": "^19.3.0",
         "typescript": "^7.0.2",
         "cross-env": "^10.1.0",
+        "rolldown": "1.2.8",
         "vite": "8.3.0"
     },
     "overrides": {

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

@@ -2,6 +2,7 @@ import Taro from 'virtual:taro/api'
 
 const isWechatTarget = import.meta.env.VITE_VPT_TARGET === 'wx'
 const isAlipayTarget = import.meta.env.VITE_VPT_TARGET === 'zfb'
+const isTtTarget = import.meta.env.VITE_VPT_TARGET === 'tt'
 
 interface NavigationBarMetrics {
     height: number
@@ -37,9 +38,11 @@ function getFallbackMenuButtonMetrics(screenWidth: number): MenuButtonMetrics {
 }
 
 function getMenuButtonMetrics(screenWidth: number): MenuButtonMetrics {
-    if (isWechatTarget) {
+    if (isWechatTarget || isTtTarget) {
         const menuButtonMetrics = Taro.getMenuButtonBoundingClientRect()
-        if (menuButtonMetrics.width > 0 && menuButtonMetrics.height > 0) return menuButtonMetrics
+        if (menuButtonMetrics.width > 0 && menuButtonMetrics.height > 0) {
+            return menuButtonMetrics
+        }
     }
 
     return getFallbackMenuButtonMetrics(screenWidth)
@@ -74,16 +77,19 @@ function getNavigationBarMetrics(
 }
 
 function getNavigationBarMetricsCached(): NavigationBarMetrics {
-    if (cachedNavigationBarMetrics) return cachedNavigationBarMetrics
+    if (cachedNavigationBarMetrics) {
+        return cachedNavigationBarMetrics
+    }
 
     if (isAlipayTarget) {
         cachedNavigationBarMetrics = getAlipayNavigationBarMetrics(Taro.getSystemInfoSync() as AlipaySystemInfo)
         return cachedNavigationBarMetrics
     }
 
-    const windowInfo = Taro.getWindowInfo()
+    // TT exposes its window metrics through getSystemInfoSync rather than WeChat's getWindowInfo.
+    const windowInfo = isTtTarget ? Taro.getSystemInfoSync() : Taro.getWindowInfo()
     const screenWidth = windowInfo.screenWidth || 375
-    const statusBarHeight = isWechatTarget ? (windowInfo.statusBarHeight ?? 44) : 0
+    const statusBarHeight = isWechatTarget || isTtTarget ? (windowInfo.statusBarHeight ?? 44) : 0
     const menuButtonMetrics = getMenuButtonMetrics(screenWidth)
 
     cachedNavigationBarMetrics = getNavigationBarMetrics(screenWidth, statusBarHeight, menuButtonMetrics)

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

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

package/templates/default/vite.config.ts

@@ -5,9 +5,9 @@ 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
-    const alipayAppId = env.VITE_VPT_ALIPAY_APP_ID
+    const appId = getAppId(env, target)
 
     return {
         build: {
@@ -24,12 +24,12 @@ export default defineConfig(({ mode }) => {
                     }
                 ],
                 appJson: createAppJson(target),
-                projectConfigJson: createProjectConfigJson({ target, wechatAppId, alipayAppId }),
+                projectConfigJson: createProjectConfigJson({ target, appId }),
                 projectPrivateConfigJson: createProjectPrivateConfigJson(target),
                 sitemapJson: { rules: [{ action: 'allow', page: '*' }] },
                 hmr: {
-                    mode: target === 'zfb' ? 'interpreter' : 'devtools'
-                },
+                    mode: target === 'wx' ? 'devtools' : 'interpreter'
+                }
             })
         ]
     }
@@ -49,6 +49,12 @@ function createPageJson(target: VptTarget): VptJsonObject {
                 titlePenetrate: 'YES'
             }
         }
+        case 'tt': {
+            return {
+                navigationStyle: 'custom',
+                navigationBarTextStyle: 'black'
+            }
+        }
         default: {
             return {}
         }
@@ -85,25 +91,25 @@ function createAppJson(target: VptTarget): VptJsonObject {
                 }
             }
         }
+        case 'tt': {
+            return {
+                window: {
+                    navigationStyle: 'custom',
+                    navigationBarTextStyle: 'black'
+                }
+            }
+        }
         default: {
             return {}
         }
     }
 }
 
-function createProjectConfigJson({
-    target,
-    wechatAppId,
-    alipayAppId
-}: {
-    target: VptTarget
-    wechatAppId: string
-    alipayAppId: string | undefined
-}): VptJsonObject {
+function createProjectConfigJson({ target, appId }: { target: VptTarget; appId: string | undefined }): VptJsonObject {
     switch (target) {
         case 'wx': {
             return {
-                appid: wechatAppId,
+                appid: appId,
                 projectname: 'vpt-project',
                 description: '',
                 compileType: 'miniprogram',
@@ -130,7 +136,7 @@ function createProjectConfigJson({
         }
         case 'zfb': {
             return {
-                appid: alipayAppId,
+                appid: appId,
                 miniprogramRoot: './',
                 format: 2,
                 compileOptions: {
@@ -151,6 +157,21 @@ function createProjectConfigJson({
                 }
             }
         }
+        case 'tt': {
+            return {
+                appid: appId,
+                projectname: 'vpt-project',
+                miniprogramRoot: './',
+                compileHotReload: true,
+                setting: {
+                    urlCheck: false,
+                    es6: false,
+                    postcss: false,
+                    minified: false,
+                    autoCompile: true
+                }
+            }
+        }
         default: {
             return {}
         }
@@ -173,21 +194,45 @@ function createProjectPrivateConfigJson(target: VptTarget): VptJsonObject {
                 ignoreWebViewDomainCheck: true
             }
         }
+        case 'tt': {
+            return {
+                setting: {
+                    urlCheck: false
+                }
+            }
+        }
         default:
             return {}
     }
 }
 
+function getAppId(env: Record<string, string>, target: VptTarget): string {
+    switch (target) {
+        case 'wx': {
+            return env.VITE_VPT_WECHAT_APP_ID ?? ''
+        }
+        case 'zfb': {
+            return env.VITE_VPT_ALIPAY_APP_ID ?? ''
+        }
+        case 'tt': {
+            return env.VITE_VPT_TIKTOK_APP_ID ?? ''
+        }
+        default: {
+            return ''
+        }
+    }
+}
+
 function getTarget(env: Record<string, string>): VptTarget {
     const targetEnvName = 'VITE_VPT_TARGET'
 
     const target = env[targetEnvName]
 
-    if (target === 'wx' || target === 'zfb' || target === 'h5') {
+    if (target === 'wx' || target === 'zfb' || target === 'tt' || target === 'h5') {
         return target
     }
 
-    throw new Error(`${targetEnvName} must be "wx", "zfb", or "h5".`)
+    throw new Error(`${targetEnvName} must be "wx", "zfb", "tt", or "h5".`)
 }
 
 const projectRoot = fileURLToPath(new URL('.', import.meta.url))