UNI-APP+VUE3+VITE+VSCode开发经验及填坑记录（持续更新ING）

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

快速开发模板

• unibest：最好的 uniapp 开发框架，由 uniapp + Vue3 + Ts + Vite5 + UnoCss + VSCode(可选 webstorm) + uni插件+ wot-ui（可选其他 UI 库）构建，集成了多种工具和技术，使用了最新的前端技术栈，无需依靠 HBuilderX，通过命令行方式即可运行 web、小程序 和 App
• snail-uni：专为开发者打造的 UniApp 框架模板。 基于 UniApp + Vue3 + TypeScript + Vite + Wot Design Uni 的高效框架模板
• 留个坑给自己的模板：使用纯JS，以及极简依赖，在 VSCode 下开发 uni-app 应用，集成 vite6 ，自定义 tabBar、支持主题色切换、黑暗模式

uni-app不支持同名简写？

同名简写是 vue3.4+ 的新特性，非常好用，比如定义了const title=ref("")，可以直接使用 完成绑定。

我最初接触 uni-app 是 v4.36(3.0.0-4020920240930001)，该版本不支持同名简写，升级到v4.56(3.0.0-4050620250312001)后支持新特性，开发起来爽歪歪

监听系统主题变化

//当系统深浅色变化时触发
uni.onThemeChange(({theme})=> console.debug(`主题变更：`, theme))

判断运行环境

/**是否为生产环境 */
export const isPro      = process.env.NODE_ENV == 'production'
/**是否为H5 */
export const isH5       = process.env.UNI_PLATFORM === 'h5'
/**是否为微信小程序 */
export const isWeixin   = process.env.UNI_PLATFORM === 'mp-weixin'
/**是否为APP环境（包含 android、ios） */
export const isApp      = process.env.UNI_PLATFORM === 'app'

监听用户拿放手机

场景：用户使用番茄学习法开启15分钟的安静阅读时间，期间检测到手机被拿放则自动暂停倒计时

方式一：使用 wx.onAccelerometerChange（加速度传感器）

加速度传感器可以检测 设备的移动状态，当用户拿起手机时，通常会有 Z 轴变化（竖直方向）。

onMounted(() => {
  wx.startAccelerometer({
    interval: 'normal', // 采样频率，可选 'game'（最快）, 'ui', 'normal'（最慢）
  });

  wx.onAccelerometerChange((res) => {
    const { x, y, z } = res;
    console.log('加速度变化：', res);

    // 这里可以根据 X/Y/Z 轴的变化来判断设备是否被拿起
    if (z > 9) {
      console.log("设备被拿起");
    }
  });
});

onUnmounted(() => {
  wx.stopAccelerometer(); // 退出页面时关闭传感器
});

升级到 vite6

截止2025-03，官方模板/示例都是vite5，新版本的 vite 也发布几个月了，想试下能不能直接升级

//这是我的配置文件
"devDependencies": {
    "@dcloudio/uni-automator": "3.0.0-4050620250312001",
    "@dcloudio/uni-stacktracey": "3.0.0-4050620250312001",
    "@dcloudio/vite-plugin-uni": "3.0.0-4050620250312001",
    "@vitejs/plugin-legacy": "^6.0.2",
    "@vue/runtime-core": "^3.5.13",
    "sass": "1.78.0",
    "uni-mini-router": "^0.1.6",
    "uni-parse-pages": "^0.0.1",
    "unplugin-auto-import": "^19.1.1",
    "vite": "^6.2.1"
}

运行稳定✌

支持 rsbuild/rspack？

我也想，等官方的消息吧，以下是 chatGPT 给出的答案

目前 uni-app 官方尚未直接支持 rsbuild 或 rspack，但可以通过 自定义 Webpack 配置 或 nvue 原生渲染 方式进行集成。以下是一些可能的方案：

---

1. uni-app + rspack（可能可行）

rspack 是 Webpack 的高性能替代方案，理论上可以替换 Webpack 作为构建工具。uni-app 的 HBuilderX 使用的是 Vite 或 Webpack，但如果你是 uni-app Vue3 + Vite 模式，可以尝试：

✅ 可能的实现

1. 使用 rspack 作为 vue3 + vite 项目的构建工具

   • 需要替换 Vite 默认的 Rollup 插件为 rspack
   • 可能需要手动配置 rspack.config.js

2. 使用 rspack 处理 Web 端构建

   • uni-app 支持 H5 端 自定义 Webpack 配置，或许可以使用 rspack 替代

⚠️ 可能的问题

• uni-app 内部对 Webpack / Vite 依赖较深，直接替换可能会有兼容性问题
• 目前 没有官方支持 rspack 的插件

---

2. uni-app + rsbuild（理论可行，但需要手动配置）

rsbuild 是 rspack 官方提供的 Web 构建工具，主要用于 React 项目。由于 uni-app 是 Vue 体系，可能需要自定义适配。

✅ 可能的实现

• 自定义 rsbuild.config.ts 让 H5 端使用 rsbuild 构建
• 但目前 uni-app 依赖 Vite，迁移成本较高

---

结论

构建工具	是否支持 uni-app	适用场景
Webpack	✅（官方支持）	传统 Vue2 uni-app
Vite	✅（官方推荐）	Vue3 uni-app
rspack	❓（未官方支持）	可能可行，H5 端可能需要自定义 Webpack
rsbuild	❓（未官方支持）	理论可行，但需手动适配

目前 uni-app 官方推荐使用 Vite，如果你想使用 rspack 或 rsbuild，可以尝试在 H5 端进行手动适配，但小程序端仍然依赖官方构建体系，可能会遇到兼容性问题。