微信小程序：缓存和更新缓存中的期刊数据，解决点赞数为0的bug，清缓存【诗书画唱】
目录：
例子1：实现翻页的效果
要减少请求，如果请求多可能会被认为黑客等等再恶意攻击（ip被封掉）等等，同时请求多了，就容易加载慢，所以要多使用缓存。
每次翻页都会往后台做请求。应该往后翻页时就把请求的数据缓存到内存中，后面的话，往前翻页的话就是调用缓存，如果请求减少了，可以提高服务器的响应速度
缓存的代码一般是键值对（key，value）的形式，同时一般缓存代码是写在models文件夹中的js文件中，同时有个快捷键，在某个文件中框选中一个方法，后面按CTRL，鼠标左见点击框选到的部分，就可以进入这个方法所在的文件中
在获取数据的时候就要进行缓存期刊的数据
在Network中，点击Online的部分可以选择Slow 3G来模拟很慢的网络下，第一次请求慢，但后面调用缓存数据就会很快的现象
例子2：解决缓存了所有数据后，先给显示不喜欢的一页点赞，之后翻页后再翻回来，已经点赞的界面却还是显示不喜欢（这里是缓存没有和数据库同时更新的问题），解决点赞数为0的bug
例子3：关于例子1和例子2的具体代码
清除全部缓存的方法就是点顶部的【清缓存】
models/classic.js
pages/classic/index.js
后台代码的改动
运行效果
讲义
例子1：实现翻页的效果
要减少请求，如果请求多可能会被认为黑客等等再恶意攻击（ip被封掉）等等，同时请求多了，就容易加载慢，所以要多使用缓存。
每次翻页都会往后台做请求。应该往后翻页时就把请求的数据缓存到内存中，后面的话，往前翻页的话就是调用缓存，如果请求减少了，可以提高服务器的响应速度
缓存的代码一般是键值对（key，value）的形式，同时一般缓存代码是写在models文件夹中的js文件中，同时有个快捷键，在某个文件中框选中一个方法，后面按CTRL，鼠标左见点击框选到的部分，就可以进入这个方法所在的文件中
在获取数据的时候就要进行缓存期刊的数据
这里只是进行了最新期刊的缓存
下面的话是将所有翻到的当前期刊进行缓存
以上进行了2次缓存
缓存成功后，要学会如何取出缓存
在Network中，点击Online的部分可以选择Slow 3G来模拟很慢的网络下，第一次请求慢，但后面调用缓存数据就会很快的现象
例子2：解决缓存了所有数据后，先给显示不喜欢的一页点赞，之后翻页后再翻回来，已经点赞的界面却还是显示不喜欢（这里是缓存没有和数据库同时更新的问题），解决点赞数为0的bug
改下后台代码
改前台代码
解决点赞数为0
例子3：关于例子1和例子2的具体代码
清除全部缓存的方法就是点顶部的【清缓存】
//models/classic.js
import Http from '../utils/http.js'
import config from '../config.js'
export default class ClassicModel extends Http{
//获取最新的期刊数据
getLatest(cb){
this.ajax({
url: `${config.base_url}getLatest`,
// callback: data => {
// cb(data);
// //自己写的代码 START
// console.log("models/classic.js中打印的数据：",data)
// //自己写的代码 END
// }
success: data => {
//将最新期刊号缓存起来：
this._setLastedIndex(data.index)
//将最新期刊数据缓存起来 START
let key = 'classic_' + data.index
wx.setStorageSync(key, data)
//将最新期刊数据缓存起来 END
cb(data)
// //自己写的代码 START
console.log("models/classic.js中打印的数据：",data)
// //自己写的代码 END
}
})
}
//关于数据库和页面的点赞数同步更新的部分 START
//更新点赞状态
like(data){
this.ajax({
url: `${config.base_url}like`,
data
})
}
//关于数据库和页面的点赞数同步更新的部分 END
//关于翻页更新对应后台数据库数据功能的部分 START
getClassic(index,status,callback) {
let key = 'classic_' + (status == 'next' ? (index + 1) : (index - 1))
//尝试从缓存中找有没有Key对应的数据
let classic = wx.getStorageSync(key)
if(!classic) {//如果缓存中没有对应key的数据，就向后台发送请求
this.ajax({
url: `${config.base_url}getClassic`,
data: {
index,
status
},
success: res => {
//缓存当前期刊号的数据 START
wx.setStorageSync(key, res)
//缓存当前期刊号的数据 END
callback(res)
}
})
}
else {//如果缓存中有这条数据，就直接调用callback回调函数
callback(classic)
}
}
//单独的获取点赞的次数和喜欢的状态
getLikeStatus(index,callback){
this.ajax({
url: `${config.base_url}getClassic`,
data: {
index
},
success: res => {
let {fav_nums,like_status} = res
callback({fav_nums,like_status})
}
})
}
//将index缓存到内存中
_setLastedIndex(index){
wx.setStorageSync('latestIndex', index)
}
//获取缓存的最新期刊号
_getLastedIndex(){
return wx.getStorageSync('latestIndex')
}
//判断当前的期刊是否是第一期
isFirst(index){
return index === 1
}
//判断当前的期刊是否是最后一期
isLatest(index){
let lastedIndex = this._getLastedIndex()
return index === lastedIndex
}
//关于翻页更新对应后台数据库数据功能的部分 END
}
// pages/classic/index.js
import ClassicModel from '../../models/classic.js'
//关于数据库和页面的点赞数同步更新的部分 START
import config from '../../config.js'
//关于数据库和页面的点赞数同步更新的部分 END
const classicModel = new ClassicModel()
Page({
/**
* 页面的初始数据
*/
// data: {
// classicData: null
// },
data: {
classicData: null,
isFirst: false,
isLatest: true,
//为了更新缓存数据说明的内容 START
fav_nums: 0, //点赞的次数
like_status: false, //喜欢的状态
//为了更新缓存数据说明的内容 END
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
classicModel.getLatest(data => {
console.log("pages/classic/index.js中打印的数据：", data)
//关于数据库和页面的点赞数同步更新的部分 START
// console.log(data)
//修改image属性的内容：
// data.image = config.img_url + data.image
//关于数据库和页面的点赞数同步更新的部分 END
//更新数据
this.setData({
classicData: data,
// 更新缓存中的页面的点赞数同部分 START
fav_nums: data.fav_nums,
like_status: data.like_status
// 更新缓存中的页面的点赞数同部分 END
})
})
},
//关于数据库和页面的点赞数同步更新的部分 START
onLike(e) {
console.log("诗书画唱提醒你，点击后触发了pages/classic/index.js中的onlike方法")
//更新点赞的状态
console.log("点赞数", e.detail.nums)
classicModel.like({
status: e.detail.state,
index: this.data.classicData.index,
nums: e.detail.nums
})
},
//关于数据库和页面的点赞数同步更新的部分 END
//导航栏的左翻页和右翻页部分 START
onNext() {
console.log('获取下一期的期刊数据')
this._updateClassic('next')
},
onPrev() {
console.log('获取上一期的期刊数据')
this._updateClassic('prev')
},
_updateClassic(nextOrPrev) {
//获取当前的期刊号
let index = this.data.classicData.index
classicModel.getClassic(index, nextOrPrev, data => {
//更新喜欢的状态
classicModel.getLikeStatus(data.index,res => {
this.setData(res)
})
//更新缓存中的数据的部分 START
this.setData({
classicData: data,
isFirst: classicModel.isFirst(data.index),
isLatest: classicModel.isLatest(data.index)
})
//更新缓存中的数据的部分 END
})
},
//导航栏的左翻页和右翻页部分 END
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
后台代码的改动
运行效果
由以上效果可见，实现了缓存，实现了缓存更新，同时解决了点赞数为0等的bug，总之，实现了例子1和例子2。
讲义
准备：后台代码处理
一、创建新项目和页面
二、App.json配置导航栏
三、定义和使用点赞组件
"四、classic在生命周期函数中请求后台数据
设置-项目设置-勾选不校验..."
五、封装Http工具类。
六、将classic页面的数据传递到like组件中（父组件传数据到子组件）
七、实现movie组件
八、like组件传递数据到classic页面（子传父实现自定义事件）
"九、epsoide组件（组件的生命周期函数以及data和properties定义数据的区别）
data和properties会被合并成同一个对象，如果有同名属性，会使用properties中定义的属性
期刊号补零（observer函数）"
"十、初步完成导航组件
获取数据：title，isFirst和isLatest
自定义导航事件onLeft,onRight
禁用左翻页和右翻页"
十一、初步实现music组件和essay组件
十二、提取组件的公共部分（组件的行为Behavior实现多继承）
"十三、初步实现期刊切换前一期效果（后台getClassic实现）
classic页面的onPrev"
"十四、根据index判断是第一期还是最后一期
classicModel中的isFirst和isLatest方法，缓存（Storage）最新期刊号_setLatest方法"
"十五、实现期刊切换后一期效果
classic页面的onNext
classicModel中的getNext和getPrev代码重构
classic页面的onPrev和onNext代码重构"
十六、期刊数据数据缓存实现，（model中的回调函数处理bug和大图片显示bug）
十七、缓存数据以后无法显示更新后的点赞次数和状态（后台代码getClassic扩展）
"十八、根据期刊类型使用组件movie,essay和music组件
组件的自定义属性控制组件是否显示"
"十九、movie,essay和music组件样式代码的复用
@import复用样式文件common.wxss"
二十、music组件样式
"二十一、实现播放音乐
后台提供音频服务功能（修改中间件代码乱码处理逻辑）
wx.getBackgroundAudioManager()
App.json中添加配置项目：""requiredBackgroundModes"": [""audio""],"
