微信小程序：緩存和更新緩存中的期刊數(shù)據(jù)，解決點(diǎn)贊數(shù)為0的bug，清緩存【詩書畫唱】
目錄：
例子1：實(shí)現(xiàn)翻頁的效果
要減少請(qǐng)求，如果請(qǐng)求多可能會(huì)被認(rèn)為黑客等等再惡意攻擊（ip被封掉）等等，同時(shí)請(qǐng)求多了，就容易加載慢，所以要多使用緩存。
每次翻頁都會(huì)往后臺(tái)做請(qǐng)求。應(yīng)該往后翻頁時(shí)就把請(qǐng)求的數(shù)據(jù)緩存到內(nèi)存中，后面的話，往前翻頁的話就是調(diào)用緩存，如果請(qǐng)求減少了，可以提高服務(wù)器的響應(yīng)速度
緩存的代碼一般是鍵值對(duì)（key，value）的形式，同時(shí)一般緩存代碼是寫在models文件夾中的js文件中，同時(shí)有個(gè)快捷鍵，在某個(gè)文件中框選中一個(gè)方法，后面按CTRL，鼠標(biāo)左見點(diǎn)擊框選到的部分，就可以進(jìn)入這個(gè)方法所在的文件中
在獲取數(shù)據(jù)的時(shí)候就要進(jìn)行緩存期刊的數(shù)據(jù)
在Network中，點(diǎn)擊Online的部分可以選擇Slow 3G來模擬很慢的網(wǎng)絡(luò)下，第一次請(qǐng)求慢，但后面調(diào)用緩存數(shù)據(jù)就會(huì)很快的現(xiàn)象
例子2：解決緩存了所有數(shù)據(jù)后，先給顯示不喜歡的一頁點(diǎn)贊，之后翻頁后再翻回來，已經(jīng)點(diǎn)贊的界面卻還是顯示不喜歡（這里是緩存沒有和數(shù)據(jù)庫同時(shí)更新的問題），解決點(diǎn)贊數(shù)為0的bug
例子3：關(guān)于例子1和例子2的具體代碼
清除全部緩存的方法就是點(diǎn)頂部的【清緩存】
models/classic.js
pages/classic/index.js
后臺(tái)代碼的改動(dòng)
運(yùn)行效果
講義
例子1：實(shí)現(xiàn)翻頁的效果
要減少請(qǐng)求，如果請(qǐng)求多可能會(huì)被認(rèn)為黑客等等再惡意攻擊（ip被封掉）等等，同時(shí)請(qǐng)求多了，就容易加載慢，所以要多使用緩存。
每次翻頁都會(huì)往后臺(tái)做請(qǐng)求。應(yīng)該往后翻頁時(shí)就把請(qǐng)求的數(shù)據(jù)緩存到內(nèi)存中，后面的話，往前翻頁的話就是調(diào)用緩存，如果請(qǐng)求減少了，可以提高服務(wù)器的響應(yīng)速度
緩存的代碼一般是鍵值對(duì)（key，value）的形式，同時(shí)一般緩存代碼是寫在models文件夾中的js文件中，同時(shí)有個(gè)快捷鍵，在某個(gè)文件中框選中一個(gè)方法，后面按CTRL，鼠標(biāo)左見點(diǎn)擊框選到的部分，就可以進(jìn)入這個(gè)方法所在的文件中
在獲取數(shù)據(jù)的時(shí)候就要進(jìn)行緩存期刊的數(shù)據(jù)
這里只是進(jìn)行了最新期刊的緩存
下面的話是將所有翻到的當(dāng)前期刊進(jìn)行緩存
以上進(jìn)行了2次緩存
緩存成功后，要學(xué)會(huì)如何取出緩存
在Network中，點(diǎn)擊Online的部分可以選擇Slow 3G來模擬很慢的網(wǎng)絡(luò)下，第一次請(qǐng)求慢，但后面調(diào)用緩存數(shù)據(jù)就會(huì)很快的現(xiàn)象
例子2：解決緩存了所有數(shù)據(jù)后，先給顯示不喜歡的一頁點(diǎn)贊，之后翻頁后再翻回來，已經(jīng)點(diǎn)贊的界面卻還是顯示不喜歡（這里是緩存沒有和數(shù)據(jù)庫同時(shí)更新的問題），解決點(diǎn)贊數(shù)為0的bug
改下后臺(tái)代碼
改前臺(tái)代碼
解決點(diǎn)贊數(shù)為0
例子3：關(guān)于例子1和例子2的具體代碼
清除全部緩存的方法就是點(diǎn)頂部的【清緩存】
//models/classic.js
import?Http?from?'../utils/http.js'
import?config?from?'../config.js'
export?default?class?ClassicModel?extends?Http{
??//獲取最新的期刊數(shù)據(jù)
??getLatest(cb){
????this.ajax({
??????url:?`${config.base_url}getLatest`,
??????//?callback:?data?=>?{
??????//???cb(data);
??????//???//自己寫的代碼?START
??????//???console.log("models/classic.js中打印的數(shù)據(jù)：",data)
??????//????//自己寫的代碼?END
??????//?}
??????success:?data?=>?{
???????????//將最新期刊號(hào)緩存起來：
????????this._setLastedIndex(data.index)
?//將最新期刊數(shù)據(jù)緩存起來?START
?let?key?=?'classic_'?+?data.index
?wx.setStorageSync(key,?data)
?//將最新期刊數(shù)據(jù)緩存起來?END
????????cb(data)
?????????//???//自己寫的代碼?START
???????console.log("models/classic.js中打印的數(shù)據(jù)：",data)
??????//????//自己寫的代碼?END
??????}
????})
??}
??//關(guān)于數(shù)據(jù)庫和頁面的點(diǎn)贊數(shù)同步更新的部分?START
??//更新點(diǎn)贊狀態(tài)
??like(data){
????this.ajax({
??????url:?`${config.base_url}like`,
??????data
????})
??}
??//關(guān)于數(shù)據(jù)庫和頁面的點(diǎn)贊數(shù)同步更新的部分?END
//關(guān)于翻頁更新對(duì)應(yīng)后臺(tái)數(shù)據(jù)庫數(shù)據(jù)功能的部分?START
??getClassic(index,status,callback)?{
????let?key?=?'classic_'?+?(status?==?'next'???(index?+?1)?:?(index?-?1))
????//嘗試從緩存中找有沒有Key對(duì)應(yīng)的數(shù)據(jù)
????let?classic?=?wx.getStorageSync(key)
????if(!classic)?{//如果緩存中沒有對(duì)應(yīng)key的數(shù)據(jù)，就向后臺(tái)發(fā)送請(qǐng)求
????this.ajax({
??????url:?`${config.base_url}getClassic`,
??????data:?{
????????index,
????????status
??????},
??????success:?res?=>?{
??????????????//緩存當(dāng)前期刊號(hào)的數(shù)據(jù)?START???????
??????????????wx.setStorageSync(key,?res)
??????????????//緩存當(dāng)前期刊號(hào)的數(shù)據(jù)?END?
????????callback(res)
??????}
????})
??}
??else?{//如果緩存中有這條數(shù)據(jù)，就直接調(diào)用callback回調(diào)函數(shù)
????callback(classic)
??}???
}
//單獨(dú)的獲取點(diǎn)贊的次數(shù)和喜歡的狀態(tài)
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緩存到內(nèi)存中
??_setLastedIndex(index){
????wx.setStorageSync('latestIndex',?index)
??}
??//獲取緩存的最新期刊號(hào)
??_getLastedIndex(){
????return?wx.getStorageSync('latestIndex')
??}
??//判斷當(dāng)前的期刊是否是第一期
??isFirst(index){
????return?index?===?1?
??}
??//判斷當(dāng)前的期刊是否是最后一期
??isLatest(index){
????let?lastedIndex?=?this._getLastedIndex()
????return?index?===?lastedIndex
??}
//關(guān)于翻頁更新對(duì)應(yīng)后臺(tái)數(shù)據(jù)庫數(shù)據(jù)功能的部分?END
}
//?pages/classic/index.js
import?ClassicModel?from?'../../models/classic.js'
//關(guān)于數(shù)據(jù)庫和頁面的點(diǎn)贊數(shù)同步更新的部分?START
import?config?from?'../../config.js'
//關(guān)于數(shù)據(jù)庫和頁面的點(diǎn)贊數(shù)同步更新的部分?END
const?classicModel?=?new?ClassicModel()
Page({
??/**
???*?頁面的初始數(shù)據(jù)
???*/
??//?data:?{
??//???classicData:?null
??//?},
??data:?{
????classicData:?null,
????isFirst:?false,
????isLatest:?true,
????//為了更新緩存數(shù)據(jù)說明的內(nèi)容?START
????fav_nums:?0,?//點(diǎn)贊的次數(shù)
????like_status:?false,?//喜歡的狀態(tài)
????//為了更新緩存數(shù)據(jù)說明的內(nèi)容?END
??},
??/**
???*?生命周期函數(shù)--監(jiān)聽頁面加載
???*/
??onLoad:?function?(options)?{
????classicModel.getLatest(data?=>?{
??????console.log("pages/classic/index.js中打印的數(shù)據(jù)：",?data)
??????//關(guān)于數(shù)據(jù)庫和頁面的點(diǎn)贊數(shù)同步更新的部分?START
??????//?console.log(data)
??????//修改image屬性的內(nèi)容：
??????//?data.image?=?config.img_url?+?data.image
??????//關(guān)于數(shù)據(jù)庫和頁面的點(diǎn)贊數(shù)同步更新的部分?END
??????//更新數(shù)據(jù)
??????this.setData({
????????classicData:?data,
????????//?更新緩存中的頁面的點(diǎn)贊數(shù)同部分?START
????????fav_nums:?data.fav_nums,
????????like_status:?data.like_status
????????//?更新緩存中的頁面的點(diǎn)贊數(shù)同部分?END
??????})
????})
??},
??//關(guān)于數(shù)據(jù)庫和頁面的點(diǎn)贊數(shù)同步更新的部分?START
??onLike(e)?{
????console.log("詩書畫唱提醒你，點(diǎn)擊后觸發(fā)了pages/classic/index.js中的onlike方法")
????//更新點(diǎn)贊的狀態(tài)
????console.log("點(diǎn)贊數(shù)",?e.detail.nums)
????classicModel.like({
??????status:?e.detail.state,
??????index:?this.data.classicData.index,
??????nums:?e.detail.nums
????})
??},
??//關(guān)于數(shù)據(jù)庫和頁面的點(diǎn)贊數(shù)同步更新的部分?END
??//導(dǎo)航欄的左翻頁和右翻頁部分?START
??onNext()?{
????console.log('獲取下一期的期刊數(shù)據(jù)')
????this._updateClassic('next')
??},
??onPrev()?{
????console.log('獲取上一期的期刊數(shù)據(jù)')
????this._updateClassic('prev')
??},
??_updateClassic(nextOrPrev)?{
????//獲取當(dāng)前的期刊號(hào)
????let?index?=?this.data.classicData.index
????classicModel.getClassic(index,?nextOrPrev,?data?=>?{
??//更新喜歡的狀態(tài)
??classicModel.getLikeStatus(data.index,res?=>?{
????this.setData(res)
??})
??????//更新緩存中的數(shù)據(jù)的部分?START
??????this.setData({
????????classicData:?data,
????????isFirst:?classicModel.isFirst(data.index),
????????isLatest:?classicModel.isLatest(data.index)
??????})
????????//更新緩存中的數(shù)據(jù)的部分?END
????})
??},
??//導(dǎo)航欄的左翻頁和右翻頁部分?END
??/**
???*?生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
???*/
??onReady:?function?()?{
??},
??/**
???*?生命周期函數(shù)--監(jiān)聽頁面顯示
???*/
??onShow:?function?()?{
??},
??/**
???*?生命周期函數(shù)--監(jiān)聽頁面隱藏
???*/
??onHide:?function?()?{
??},
??/**
???*?生命周期函數(shù)--監(jiān)聽頁面卸載
???*/
??onUnload:?function?()?{
??},
??/**
???*?頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
???*/
??onPullDownRefresh:?function?()?{
??},
??/**
???*?頁面上拉觸底事件的處理函數(shù)
???*/
??onReachBottom:?function?()?{
??},
??/**
???*?用戶點(diǎn)擊右上角分享
???*/
??onShareAppMessage:?function?()?{
??}
})
后臺(tái)代碼的改動(dòng)
運(yùn)行效果
由以上效果可見，實(shí)現(xiàn)了緩存，實(shí)現(xiàn)了緩存更新，同時(shí)解決了點(diǎn)贊數(shù)為0等的bug，總之，實(shí)現(xiàn)了例子1和例子2。
講義
準(zhǔn)備：后臺(tái)代碼處理
一、創(chuàng)建新項(xiàng)目和頁面
二、App.json配置導(dǎo)航欄
三、定義和使用點(diǎn)贊組件
"四、classic在生命周期函數(shù)中請(qǐng)求后臺(tái)數(shù)據(jù)
設(shè)置-項(xiàng)目設(shè)置-勾選不校驗(yàn)..."
五、封裝Http工具類。
六、將classic頁面的數(shù)據(jù)傳遞到like組件中（父組件傳數(shù)據(jù)到子組件）
七、實(shí)現(xiàn)movie組件
八、like組件傳遞數(shù)據(jù)到classic頁面（子傳父實(shí)現(xiàn)自定義事件）
"九、epsoide組件（組件的生命周期函數(shù)以及data和properties定義數(shù)據(jù)的區(qū)別）
data和properties會(huì)被合并成同一個(gè)對(duì)象，如果有同名屬性，會(huì)使用properties中定義的屬性
期刊號(hào)補(bǔ)零（observer函數(shù)）"
"十、初步完成導(dǎo)航組件
獲取數(shù)據(jù)：title，isFirst和isLatest
自定義導(dǎo)航事件onLeft,onRight
禁用左翻頁和右翻頁"
十一、初步實(shí)現(xiàn)music組件和essay組件
十二、提取組件的公共部分（組件的行為Behavior實(shí)現(xiàn)多繼承）
"十三、初步實(shí)現(xiàn)期刊切換前一期效果（后臺(tái)getClassic實(shí)現(xiàn)）
classic頁面的onPrev"
"十四、根據(jù)index判斷是第一期還是最后一期
classicModel中的isFirst和isLatest方法，緩存（Storage）最新期刊號(hào)_setLatest方法"
"十五、實(shí)現(xiàn)期刊切換后一期效果
classic頁面的onNext
classicModel中的getNext和getPrev代碼重構(gòu)
classic頁面的onPrev和onNext代碼重構(gòu)"
十六、期刊數(shù)據(jù)數(shù)據(jù)緩存實(shí)現(xiàn)，（model中的回調(diào)函數(shù)處理bug和大圖片顯示bug）
十七、緩存數(shù)據(jù)以后無法顯示更新后的點(diǎn)贊次數(shù)和狀態(tài)（后臺(tái)代碼getClassic擴(kuò)展）
"十八、根據(jù)期刊類型使用組件movie,essay和music組件
組件的自定義屬性控制組件是否顯示"
"十九、movie,essay和music組件樣式代碼的復(fù)用
@import復(fù)用樣式文件common.wxss"
二十、music組件樣式
"二十一、實(shí)現(xiàn)播放音樂
后臺(tái)提供音頻服務(wù)功能（修改中間件代碼亂碼處理邏輯）
wx.getBackgroundAudioManager()
App.json中添加配置項(xiàng)目：""requiredBackgroundModes"": [""audio""],"
