基于 UniApp(Vue3) + Vite 的多功能微信小程序:图片压缩、二维码生成、备忘录、倒计时。一套代码兼容微信 / H5 多端,完整走通「开发 → 分包优化 → 提审 → 上线」全流程。
| 工具 | 实现方式 |
|---|---|
| 图片压缩 | uni.chooseImage 选图 → canvas 重绘降采样 → 体积对比 + 保存相册 |
| 二维码生成 | weapp-qrcode 纯 JS 绘制到 canvas,可长按保存 |
| 备忘录 | uni storage 本地持久化,增删查 + 完成态 |
| 倒计时 | date picker 选日期 → 计算天数差(过去日期显示已过天数) |
- 4 个工具页拆入
subPackages(pages/tools) - 主包仅约 90KB(含首页),远低于微信 2MB 主包限制,首屏加载快
npm install
npm run dev:mp-weixin # 监听微信小程序构建
# 用微信开发者工具打开 dist/dev/mp-weixin在 src/pages.json(分包)与 src/manifest.json(应用信息)按需调整。
发布需在微信公众平台注册小程序,将 appid 填入
src/manifest.json的mp-weixin.appid(自行配置,勿提交真实 appid 至公开仓库)。
- UniApp (Vue3 script setup) + Vite + TypeScript
- 微信小程序平台(条件编译支持多端)
weapp-qrcode(二维码库)
src/
├── pages/index/ # 首页(工具导航)——主包
├── pages/tools/compress # 图片压缩——分包
├── pages/tools/qrcode # 二维码生成——分包
├── pages/tools/memo # 备忘录——分包
├── pages/tools/countdown # 倒计时——分包
├── pages.json # 页面注册 + 分包 subPackages
└── manifest.json # 应用配置