一、应用场景
天气预报都会打开其他App 查看天气信息,该小程序可以订阅天气把今天的天气信息在特定时间推送给你, 比如设置早上八点 会把今天天气推送给你。也可以自定义设计需要展示的模块根据每个人使用习惯存储在云后台, 个人喜欢的主题等
二、目标用户
需要查看天气预报的人
三、实现思路
小程序使用Taro 框架开发,使用会本地化存储当前用户使用的数据,点击登录用把当前用户的使用配置同步到云后台,方便后面进入初始化配置信息
四、架构图
五、效果图
六、部分代码
1.初始化数据
function init() {
return new Promise((reslove, reject) => {
getUserInfo().then(ret => {
userInfo = ret;
const arr = [WeatherCloudManager.init({
userInfo: ret,
}), WeatherCloudManager.getTheme()]
Promise.all(arr).then(ret => {
initNetData(ret)
reslove()
}).catch(e => {
reject(e)
});
}).catch(e => {
const arr = [WeatherCloudManager.getDefaultPermission(), WeatherCloudManager.getTheme()]
return Promise.all(arr).then(ret => {
initLocalData(ret)
reslove()
}).catch(e => {
reject(e)
});
})
})
}
/** 没有登录初始化init数据*/
function initLocalData(ret) {
console.log('====ret本地初始化用户信息==', ret)
if (!ret) return
const permission = ret[0].result.data;
const themes = ret[1].result.data;
StoreManager.setThemeKey(THEME_STYLE.JD)
StoreManager.setCard(permission)
StoreManager.setUnit(0)
StoreManager.setThemes(themes)
StoreManager.setLocations([])
StoreManager.setLocationId('')
let arr = themes.filter(item => {
return item.theme_id == THEME_STYLE.JD
})
StoreManager.setTheme(arr[0])
}
/** 已经登录的初始化 */
function initNetData(ret) {
if (!ret || !ret[0].result) return
console.log('====ret网络初始化用户信息==', ret);
const data = ret[0].result;
const themes = ret[1].result.data;
StoreManager.setThemeKey(THEME_STYLE[data.theme_id.toLocaleUpperCase])
StoreManager.setCard(data.permission)
StoreManager.setUnit(data.unit)
StoreManager.setTheme(data.theme)
StoreManager.setThemes(themes)
}
2.登录开始同步本地数据
/**
* 开始没有登录 操作一段时间后开始登录 这时候需要保存当前操作信息
* 1. 之前没有账号的 开辟一个新的账号 (把现有的数据同步到数据库中)
* 2. 之前有新账号的更新(或者拉取云上数据库数据)然后展示
* */
function init() {
const themeId = StoreManager.getThemeKey()
const permission = StoreManager.getCard()
const unit = StoreManager.getUnit()
const locations = StoreManager.getLocations()
const locationId = StoreManager.getLocationId()
const data = {
userInfo: AppManager.getUserData(),
permission,
themeId,
unit,
locations,
locationId: locationId,
}
console.log('===params', data)
return new Promise((reslove, reject) => {
WeatherCloudManager.getUserInfo().then(ret => {
console.log('===ret', ret)
if (ret.result.data.length == 0) {
WeatherCloudManager.init(data).then(ret => reslove(ret)).catch(e => reject(e))
} else {
AppManager.init().then(ret => reslove(ret)).catch(e => reject(e))
}
}).catch(e => {
reject(e)
})
})
}
七、作品体验二维码
线上版本
演示视频:https://gitee.com/lzf_api/weather/raw/master/screenshot/1.gif
源码:https://gitee.com/lzf_api/weather
八、团推介绍
林再飞:南京新视云网络科技有限公司开发人员
刘桥敏