lc
a04c017e37
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'
121 lines
3.0 KiB
JavaScript
121 lines
3.0 KiB
JavaScript
const THEMES = [
|
|
{
|
|
id: 'orange',
|
|
name: '活力橙',
|
|
primary: '#FF6B35',
|
|
primaryLight: '#FF8C5A',
|
|
primaryBg: '#FFF3ED',
|
|
primaryRgb: '255,107,53'
|
|
},
|
|
{
|
|
id: 'blue',
|
|
name: '深海蓝',
|
|
primary: '#2979FF',
|
|
primaryLight: '#5C9CFF',
|
|
primaryBg: '#EDF4FF',
|
|
primaryRgb: '41,121,255'
|
|
},
|
|
{
|
|
id: 'green',
|
|
name: '森林绿',
|
|
primary: '#43A047',
|
|
primaryLight: '#6EC072',
|
|
primaryBg: '#EDF7EE',
|
|
primaryRgb: '67,160,71'
|
|
},
|
|
{
|
|
id: 'purple',
|
|
name: '优雅紫',
|
|
primary: '#7E57C2',
|
|
primaryLight: '#A08AD6',
|
|
primaryBg: '#F5F0FA',
|
|
primaryRgb: '126,87,194'
|
|
},
|
|
{
|
|
id: 'pink',
|
|
name: '樱花粉',
|
|
primary: '#EC407A',
|
|
primaryLight: '#F06A9A',
|
|
primaryBg: '#FDEEF3',
|
|
primaryRgb: '236,64,122'
|
|
}
|
|
]
|
|
|
|
const BASE_VARS = '--text:#333;--text-secondary:#999;--bg:#F5F5F5;--card-bg:#FFFFFF;--border:#EEE;--success:#4CAF50;--primary:#FF6B35;--primary-light:#FF8C5A;--primary-bg:#FFF3ED;--primary-rgb:255,107,53;'
|
|
const DEFAULT_THEME_ID = 'orange'
|
|
const THEME_KEY = 'app_theme'
|
|
let _navColorTimer = null
|
|
|
|
const getThemeById = (id) => THEMES.find(t => t.id === id) || THEMES[0]
|
|
|
|
const getCurrentTheme = () => {
|
|
let id = wx.getStorageSync(THEME_KEY)
|
|
if (!id) {
|
|
// fallback: try recovering from user_settings backup
|
|
try {
|
|
const s = wx.getStorageSync('user_settings')
|
|
if (s && s.themeId) id = s.themeId
|
|
} catch (e) {}
|
|
}
|
|
return getThemeById(id || DEFAULT_THEME_ID)
|
|
}
|
|
|
|
const _setNavBarColor = (primary) => {
|
|
if (_navColorTimer) clearTimeout(_navColorTimer)
|
|
_navColorTimer = setTimeout(() => {
|
|
try {
|
|
wx.setNavigationBarColor({
|
|
frontColor: '#ffffff',
|
|
backgroundColor: primary
|
|
})
|
|
} catch (e) {}
|
|
}, 50)
|
|
}
|
|
|
|
const setTheme = (id) => {
|
|
try {
|
|
wx.setStorageSync(THEME_KEY, id)
|
|
// redundant backup in user_settings
|
|
try {
|
|
const s = wx.getStorageSync('user_settings') || {}
|
|
s.themeId = id
|
|
wx.setStorageSync('user_settings', s)
|
|
} catch (e) {}
|
|
} catch (e) {
|
|
console.error('Failed to save theme:', e)
|
|
}
|
|
const theme = getThemeById(id)
|
|
_setNavBarColor(theme.primary)
|
|
const app = getApp()
|
|
if (app && app.globalData) app.globalData.theme = theme
|
|
|
|
// sync to cloud (lazy-require to avoid circular deps)
|
|
try { require('./cloud').pushAll() } catch (e) {}
|
|
return theme
|
|
}
|
|
|
|
const applyThemeToPage = (self) => {
|
|
const theme = getCurrentTheme()
|
|
self.setData({
|
|
theme,
|
|
themeStyle: `${BASE_VARS}--primary:${theme.primary};--primary-light:${theme.primaryLight};--primary-bg:${theme.primaryBg};--primary-rgb:${theme.primaryRgb};`
|
|
})
|
|
_setNavBarColor(theme.primary)
|
|
}
|
|
|
|
const getThemeStyle = (theme) => {
|
|
const t = theme || getCurrentTheme()
|
|
return `${BASE_VARS}--primary:${t.primary};--primary-light:${t.primaryLight};--primary-bg:${t.primaryBg};--primary-rgb:${t.primaryRgb};`
|
|
}
|
|
|
|
module.exports = {
|
|
THEMES,
|
|
DEFAULT_THEME_ID,
|
|
BASE_VARS,
|
|
getThemeById,
|
|
getCurrentTheme,
|
|
setTheme,
|
|
applyThemeToPage,
|
|
getThemeStyle
|
|
}
|