Problem: All data stored in wx.StorageSync is permanently lost when
user deletes the mini-program or clears cache.
Solution: Sync data to WeChat CloudBase (wx.cloud.database).
- Graceful degradation: if cloud env isn't configured, all local
storage works exactly as before.
- On app launch: if local records are empty, pull from cloud.
- On writes: push to cloud (debounced 2s) after saveRecord,
deleteRecord, saveSettings, updateStreak, setTheme.
- Clear data in settings also clears cloud.
Files:
- utils/cloud.js: cloud sync wrapper (init, pullAll, pushAll, clearAll)
- app.js: cloud.init() + restore on fresh install
- utils/storage.js: cloud.pushAll() after every mutation
- utils/theme.js: cloud.pushAll() after setTheme
- pages/settings/settings.js: cloud.clearAll() when clearing data
- project.config.json: cloudfunctionRoot added
Setup required (one-time in WeChat DevTools):
1. Open 'Cloud Development' panel → enable CloudBase
2. Create environment → copy env ID
3. In app.js, change wx.cloud.init() → wx.cloud.init({ env: 'YOUR-ENV-ID' })
4. Create 'plank_data' collection in cloud database
5. Set collection permission to 'Only creator can read/write'
Root cause: _setNavBarColor used _lastNavColor (a module-level cache)
to skip wx.setNavigationBarColor when the color appeared unchanged.
But wx.setNavigationBarColor is per-page — each tab page has its own
navigation bar and needs an explicit call. The cache prevented
subsequent pages from ever receiving the call.
Example trace:
index onShow → _setNavBarColor(#FF6B35) → _lastNavColor=#FF6B35 ✓
settings onShow → _setNavBarColor(#FF6B35) → cache hit, return ✗
User picks green → setTheme → _setNavBarColor(#43A047) ✓
index onShow → _setNavBarColor(#43A047) → cache hit, return ✗
→ Index still shows orange!
Fix: remove _lastNavColor guard entirely. Keep setTimeout debounce.
Root cause: WXSS compiler resolves var(--primary) at compile time
against page{} declarations in app.wxss. The orange defaults
(--primary:#FF6B35 etc.) were being baked into compiled WXSS,
so the inline style theme override on .container was ignored.
Records and settings pages always rendered orange regardless of
the user's theme choice.
Fix:
1. Remove --primary, --primary-light, --primary-bg, --primary-rgb
from page{} in app.wxss, forcing WXSS to resolve var() at
runtime from inline style on .container
2. Expand BASE_VARS in theme.js to include default orange theme
vars, so the initial render (before onLoad) still has valid
CSS custom properties — no flash of unstyled content
3. Export BASE_VARS from theme.js
4. Change all 4 pages + custom-tab-bar initial data.themeStyle
from '' to themeMod.BASE_VARS, eliminating the empty-string
gap between first render and onLoad
Root cause: themeStyle was on .container only, but modals (picker,
day-detail) were siblings of .container in the WXML tree. CSS custom
properties set via inline style on .container don't cascade to
sibling elements — those elements fall back to app.wxss page-level
defaults (always orange). Users saw modal buttons in orange and
concluded the whole page didn't follow theme.
Fixes:
- index.wxml: Move picker modal inside .container so it inherits
themeStyle CSS variables (position:fixed is viewport-relative,
so nesting doesn't affect modal positioning)
- index.js, records.js: Add applyThemeToPage in onLoad alongside
onShow, preventing a flash of default orange before onShow fires
- timer.js: Add onShow with applyThemeToPage as lifecycle safety
net; extract _init from onLoad for clean separation
Bug 1 (critical): setTheme lacked try/catch around wx.setStorageSync.
If storage write throws (full / permission), the theme silently
fails to persist but UI has already changed → on next cold start
getCurrentTheme falls back to orange.
→ Wrap in try/catch; still apply UI change even if storage fails
(better to see the right color now than revert immediately).
Bug 2 (display): settings onShow called applyThemeToPage (updates
'theme' object) but never refreshed 'currentThemeId'. After tab
switching, the radio highlight showed the wrong theme.
→ Add setData({ currentThemeId }) in onShow.
Redundancy: theme now also saved as themeId in user_settings.
getCurrentTheme falls back to user_settings.themeId if app_theme
key is unexpectedly missing, providing a recovery path.
Root cause: WeChat miniprogram components have style isolation by default.
Changing tab bar hardcoded #888/#666 to var(--text-secondary) broke
because --text-secondary was only defined on page{} in app.wxss and
couldn't cascade into the custom-tab-bar component.
Fix:
1. theme.js: inject BASE_VARS (--text, --text-secondary, --border, etc.)
into themeStyle string so they're available via inline style everywhere
2. Add styleIsolation: apply-shared to all 3 component JSONs so page-level
CSS variables cascade into components
- var→const/let, function→arrow/class across all 13 JS files
- Timer: prototype→class with ES6 getters
- plan days: IIFE→Array.from declarative generation
- storage/plan: unified formatDate via util.js
- Bugfix: getPlanDay now filters by planId (plan switch accuracy)
- Bugfix: getTodayRecord searches all months (cross-month boundary)
- WXML/WXSS unchanged; public API unchanged
lc