微信小程序：期刊切換，代碼重構(gòu)，緩存Storage，setStorageSync，wx:if【詩書畫唱】
目錄：
例子1：根據(jù)index判斷是第一期還是最后一期
classicModel中的isFirst和isLatest方法，緩存（Storage）最新期刊號_setLatest方法
首先的話，我們點擊前一期翻頁的“右耳朵”圖片的時候，要觸發(fā)一個可以傳含有特定的參數(shù)值的url路徑到后臺的getPrev的函數(shù)，之后后臺代碼根據(jù)url從數(shù)據(jù)庫查到特定的參數(shù)值為SQL語句中的where后面的篩選條件的后臺數(shù)據(jù)，之后前臺獲取后臺數(shù)據(jù)。getPrev的函數(shù)也是寫在models文件夾下的js文件中的。封裝，要復(fù)用，在別處要多次重復(fù)調(diào)用，進行了代碼重構(gòu)的代碼一般都寫在models文件夾下的js文件中。
用setStorageSync來把數(shù)據(jù)緩存到自己命名的變量名中，點"調(diào)試器"后,可以在Storage查看自己是否緩存成功，可以查看Key（鍵，變量名），Vue（值，數(shù)據(jù)的具體內(nèi)容），Type（數(shù)據(jù)類型）
清除緩存的方法（不清的話，基本重啟等候都會一直存在緩存）
一般是在models文件夾下的classic.js中聲明和調(diào)用關(guān)于wx.setStrorageSync等緩存的代碼的
為了讓使用者先看到最新的一期，所以進行如下的設(shè)計：這里左邊的翻頁“耳朵”是"翻到下一頁（更新的一期）",這里右邊的翻頁“耳朵”是"翻到上一頁（往前的一期）"
例子2：實現(xiàn)期刊切換后一期效果
圖示中的往前翻，和往后翻的代碼基本都是一樣的，因此可以進行代碼重構(gòu)，封裝
代碼等等要盡可能的進行封裝，方便后期的維護，修改一個封裝的部分就可以同時修改調(diào)用封裝代碼的部分
這里就是對代碼進行了封裝
例子3：對封裝代碼進行優(yōu)化，把一些callback改成success，方便對ajax獲取到的數(shù)據(jù)進行處理
ajax獲取到的數(shù)據(jù)就是在success中進行處理
例子4：解決model中的回調(diào)函數(shù)處理bug和大圖片顯示bug
子組件都要用的大圖片路徑的部分，其實要寫在關(guān)于Behavior的文件夾下的js文件中（因為data.image的部分是多個子組件都要用的部分，所以可以可以在Behavior中聲明個base_img的屬性名，data.image的部分就是base_img的屬性名對應(yīng)的值。
下面用了解構(gòu)語法，代碼變得更簡潔了，在import的同時，就給一個變量進行了賦值，之后就直接調(diào)用這個變量就可以了
注意這里的base_img對應(yīng)的內(nèi)容寫錯了，如果不改過來，會導致bug。很多bug都可能是因為變量名寫錯或有些代碼沒有注釋
用wx:if進行判斷有時可以解決渲染層網(wǎng)絡(luò)層出錯，防止加載圖片之間，界面就被渲染出來了。用wx:if進行判斷是否加載圖片為空，不為空，說明圖片不為空，那么就執(zhí)行判斷里面的代碼
例子5:代碼部分和講義
現(xiàn)在我們是只實現(xiàn)了電影組件的部分，音樂等組件的部分以后再做。
要改動的文件：
components/classic/movie/index.wxml
components/classic/classic_beh.js
models/classic.js
pages/classic/index.js
pages/classic/index.wxml
例子1：根據(jù)index判斷是第一期還是最后一期
classicModel中的isFirst和isLatest方法，緩存（Storage）最新期刊號_setLatest方法
首先的話，我們點擊前一期翻頁的“右耳朵”圖片的時候，要觸發(fā)一個可以傳含有特定的參數(shù)值的url路徑到后臺的getPrev的函數(shù)，之后后臺代碼根據(jù)url從數(shù)據(jù)庫查到特定的參數(shù)值為SQL語句中的where后面的篩選條件的后臺數(shù)據(jù)，之后前臺獲取后臺數(shù)據(jù)。getPrev的函數(shù)也是寫在models文件夾下的js文件中的。封裝，要復(fù)用，在別處要多次重復(fù)調(diào)用，進行了代碼重構(gòu)的代碼一般都寫在models文件夾下的js文件中。
Q：如果出現(xiàn)"渲染層網(wǎng)絡(luò)層錯誤"，出現(xiàn)image的字眼等等，如何解決
A：查看是不是圖片的路徑出錯，修改下關(guān)于圖片的代碼
值得注意的是，改后的代碼中關(guān)于組件的圖片路徑的data.image的部分，其實要寫在關(guān)于Behavior的文件夾下的js文件中（因為data.image的部分是多個子組件都要用的部分，所以可以可以在Behavior中聲明個base_img的屬性名，data.image的部分就是base_img的屬性名對應(yīng)的值。
用setStorageSync來把數(shù)據(jù)緩存到自己命名的變量名中，點"調(diào)試器"后,可以在Storage查看自己是否緩存成功，可以查看Key（鍵，變量名），Vue（值，數(shù)據(jù)的具體內(nèi)容），Type（數(shù)據(jù)類型）
清除緩存的方法（不清的話，基本重啟等候都會一直存在緩存）
一般是在models文件夾下的classic.js中聲明和調(diào)用關(guān)于wx.setStrorageSync等緩存的代碼的
為了讓使用者先看到最新的一期，所以進行如下的設(shè)計：這里左邊的翻頁“耳朵”是"翻到下一頁（更新的一期）",這里右邊的翻頁“耳朵”是"翻到上一頁（往前的一期）"
例子2：實現(xiàn)期刊切換后一期效果
代碼等等要盡可能的進行封裝，方便后期的維護，修改一個封裝的部分就可以同時修改調(diào)用封裝代碼的部分
例子3：對封裝代碼進行優(yōu)化，把一些callback改成success，方便對ajax獲取到的數(shù)據(jù)進行處理
ajax獲取到的數(shù)據(jù)就是在success中進行處理
例子4：解決model中的回調(diào)函數(shù)處理bug和大圖片顯示bug
子組件都要用的大圖片路徑的部分，其實要寫在關(guān)于Behavior的文件夾下的js文件中（因為data.image的部分是多個子組件都要用的部分，所以可以可以在Behavior中聲明個base_img的屬性名，data.image的部分就是base_img的屬性名對應(yīng)的值。
下面用了解構(gòu)語法，代碼變得更簡潔了，在import的同時，就給一個變量進行了賦值，之后就直接調(diào)用這個變量就可以了
用wx:if進行判斷有時可以解決渲染層網(wǎng)絡(luò)層出錯，防止加載圖片之間，界面就被渲染出來了。用wx:if進行判斷是否加載圖片為空，不為空，說明圖片不為空，那么就執(zhí)行判斷里面的代碼
例子5:代碼部分和講義
準備：后臺代碼處理
一、創(chuàng)建新項目和頁面
二、app.json配置導航欄
三、定義和使用點贊組件
"四、classic在生命周期函數(shù)中請求后臺數(shù)據(jù)
設(shè)置-項目設(shè)置-勾選不校驗..."
五、封裝Http工具類。
六、將classic頁面的數(shù)據(jù)傳遞到like組件中（父組件傳數(shù)據(jù)到子組件）
七、實現(xiàn)movie組件
八、like組件傳遞數(shù)據(jù)到classic頁面（子傳父實現(xiàn)自定義事件）
"九、epsoide組件（組件的生命周期函數(shù)以及data和properties定義數(shù)據(jù)的區(qū)別）
data和properties會被合并成同一個對象，如果有同名屬性，會使用properties中定義的屬性
期刊號補零（observer函數(shù)）"
"十、初步完成導航組件
獲取數(shù)據(jù)：title，isFirst和isLatest
自定義導航事件onLeft,onRight
禁用左翻頁和右翻頁"
十一、初步實現(xiàn)music組件和essay組件
十二、提取組件的公共部分（組件的行為Behavior實現(xiàn)多繼承）
"十三、初步實現(xiàn)期刊切換前一期效果（后臺getClassic實現(xiàn)）
classic頁面的onPrev"
"十四、根據(jù)index判斷是第一期還是最后一期
classicModel中的isFirst和isLatest方法，緩存（Storage）最新期刊號_setLatest方法"
"十五、實現(xiàn)期刊切換后一期效果
classic頁面的onNext
classicModel中的getNext和getPrev代碼重構(gòu)
classic頁面的onPrev和onNext代碼重構(gòu)"
十六、期刊數(shù)據(jù)數(shù)據(jù)緩存實現(xiàn)，（model中的回調(diào)函數(shù)處理bug和大圖片顯示bug）
十七、緩存數(shù)據(jù)以后無法顯示更新后的點贊次數(shù)和狀態(tài)（后臺代碼getClassic擴展）
要改動的文件：
<!--components/classic/movie/index.wxml-->
<view?class="container">
????<image?src="{{base_img?+?img}}"??class="img"/>
????<image?src="{{icon}}"?class="tag"/>
????<text?class="content">{{content}}</text>
</view>
//components/classic/classic_beh.js
import?config?from?'../../config'
export?default?Behavior({
??properties:?{
????img:?String,
????content:?String
??}
//music等子組件要共用的base_img部分?START
??,
??data:?{
????base_img:?config.img_url
??}
//music等子組件要共用的base_img部分?END
})
現(xiàn)在我們是只實現(xià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?=>?{
????????this._setLastedIndex(data.index)
????????cb(data)
?????????//???//自己寫的代碼?START
???????console.log("models/classic.js中打印的數(shù)據(jù)：",data)
??????//????//自己寫的代碼?END
??????}
????})
??}
??//關(guān)于數(shù)據(jù)庫和頁面的點贊數(shù)同步更新的部分?START
??//更新點贊狀態(tài)
??like(data){
????this.ajax({
??????url:?`${config.base_url}like`,
??????data
????})
??}
??//關(guān)于數(shù)據(jù)庫和頁面的點贊數(shù)同步更新的部分?END
//關(guān)于翻頁更新對應(yīng)后臺數(shù)據(jù)庫數(shù)據(jù)功能的部分?START
??getClassic(index,status,callback)?{
????this.ajax({
??????url:?`${config.base_url}getClassic`,
??????data:?{
????????index,
????????status
??????},
??????success:?res?=>?{
????????callback(res)
??????}
????})
??}
??//將index緩存到內(nèi)存中
??_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
??}
//關(guān)于翻頁更新對應(yīng)后臺數(shù)據(jù)庫數(shù)據(jù)功能的部分?END
}
//?pages/classic/index.js
import?ClassicModel?from?'../../models/classic.js'
??//關(guān)于數(shù)據(jù)庫和頁面的點贊數(shù)同步更新的部分?START
import?config?from?'../../config.js'
??//關(guān)于數(shù)據(jù)庫和頁面的點贊數(shù)同步更新的部分?END
const?classicModel?=?new?ClassicModel()
Page({
??/**
???*?頁面的初始數(shù)據(jù)
???*/
??//?data:?{
??//???classicData:?null
????
??//?},
??data:?{
????classicData:?null,
????isFirst:?false,
????isLatest:?true
??},
??/**
???*?生命周期函數(shù)--監(jiān)聽頁面加載
???*/
??onLoad:?function?(options)?{
????classicModel.getLatest(data?=>?{
??????console.log("pages/classic/index.js中打印的數(shù)據(jù)：",data)
??????//關(guān)于數(shù)據(jù)庫和頁面的點贊數(shù)同步更新的部分?START
??????//?console.log(data)
??????//修改image屬性的內(nèi)容：
??????//?data.image?=?config.img_url?+?data.image
??????//關(guān)于數(shù)據(jù)庫和頁面的點贊數(shù)同步更新的部分?END
??????//更新數(shù)據(jù)
??????this.setData({
????????classicData:?data
??????})
????})
??},
//關(guān)于數(shù)據(jù)庫和頁面的點贊數(shù)同步更新的部分?START
??onLike(e){
????console.log("詩書畫唱提醒你，點擊后觸發(fā)了pages/classic/index.js中的onlike方法")
????//更新點贊的狀態(tài)
????console.log("點贊數(shù)",e.detail.nums)
????classicModel.like({
??????status:?e.detail.state,
??????index:?this.data.classicData.index,
??????nums:?e.detail.nums
????})
??},
//關(guān)于數(shù)據(jù)庫和頁面的點贊數(shù)同步更新的部分?END
//導航欄的左翻頁和右翻頁部分?START
??onNext(){
????console.log('獲取下一期的期刊數(shù)據(jù)')
????this._updateClassic('next')
??},
??onPrev(){
????console.log('獲取上一期的期刊數(shù)據(jù)')
????this._updateClassic('prev')
??},
??_updateClassic(nextOrPrev){
????//獲取當前的期刊號
????let?index?=?this.data.classicData.index
????classicModel.getClassic(index,nextOrPrev,data?=>?{
??????//更新數(shù)據(jù)
??????this.setData({
????????classicData:?data,
????????isFirst:?classicModel.isFirst(data.index),
????????isLatest:?classicModel.isLatest(data.index)
??????})
????})
??},
//導航欄的左翻頁和右翻頁部分?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)聽用戶下拉動作
???*/
??onPullDownRefresh:?function?()?{
??},
??/**
???*?頁面上拉觸底事件的處理函數(shù)
???*/
??onReachBottom:?function?()?{
??},
??/**
???*?用戶點擊右上角分享
???*/
??onShareAppMessage:?function?()?{
??}
})
<!--pages/classic/index.wxml-->
<view?class="container">
????<view?class="header">
????????<cmp-epsoide?class="epsoide"?index="{{classicData.index}}"></cmp-epsoide>
????????<!--?下面的話就是調(diào)用了點贊的組件：?-->?????
????????<cmp-like?count="{{classicData.fav_nums}}"?like="{{classicData.like_status}}"?
????????bind:myLike="onLike"></cmp-like>
????</view>
????<cmp-movie?wx:if="{{classicData.image}}"?content="{{classicData.content}}"?img="{{classicData.image}}"></cmp-movie>
????<cmp-navi?class="navi"?title="{{classicData.title}}"?isFirst="{{isFirst}}"??
????isLatest="{{isLatest}}"?bind:myLeft="onNext"
????????bind:myRight="onPrev"></cmp-navi>
</view>
運行效果
