微信小程序：a=b===c，自己項目經驗的Q&A，點贊數界面和數據庫同步更新【詩書畫唱】
目錄
例子1：實現電影組件
sentence
常常用上讓內容等等沿主軸垂直水平居中的CSS樣式
例子2：實現獲取的點贊的數據是動態(tài)的，是實時更新，從數據庫中拿的（實現數據庫和界面的點贊同步更新)
models文件夾下的js文件一般是寫ajax的封裝的
例子3：實現期刊號組件epsoide
常常可以用display:flex ； flex-direction:column實現“豎向”的“列”的排列效果（其實我認為，很多布局的話，實在不行的時候，可以用上position定位，比如相對定位，絕對定位等等，也用上彈性盒子）
episode
例子4：例子1到例子3的代碼
沒有提到的代碼要么就是自己可以生成的代碼，要么就是以前的專欄中講過的代碼
index.json中的代碼基本都是自己生成的，基本一樣是
{
??"component":?true,
??"usingComponents":?{}
}
父組件就是在index.json中聲明組件后在wxml文件中調用
?比如例子中的 pages/classic/index.json
{
??"usingComponents":?{
????"cmp-like":"/components/like/index",
????"cmp-movie":"/components/classic/movie",
????"cmp-epsoide":"/components/epsoide"
??}
}
運行效果
例子5：注意事項（項目經驗之遇到的問題和我是怎么解決問題的）
Q：解決TypeError:?callback?is?not?a?function的報錯
Q：沒有觸發(fā)同個組件文件夾下index.js中聲明的onLike事件
Q：a=b==c怎么運算的
Q：點擊點贊按鈕時，數據庫點贊數加2，取消點贊按鈕時數據庫點贊數減2是什么原因導致這種bug？
Q：status = status === 'like' ? 1 : 0;是不是寫多余了，有沒有別的寫法？
A：目前我嘗試了，status = status === 'like';和status == 'like' ? status =1 : status =0;和status = status === 'like' ? 1 : 0;的效果是一樣的。暫時我認為是寫多余了。status = status === 'like' ? 1 : 0;可以理解成status = （status === 'like' ? 1 : 0）;
C語言中a=b==c這個式子相當于先算b==c,若二者相等，則將1賦值給a,否則將0賦值給a，那么我個人推理js中a=b===c這個式子相當于先算b===c,若二者相等，則將1賦值給a,否則將0賦值給a
例子1：實現電影組件
sentence
注冊組件
常常用上讓內容等等沿主軸垂直水平居中的CSS樣式
常常用rpx，display：flex的彈性布局相關的設置
例子2：實現獲取的點贊的數據是動態(tài)的，是實時更新，從數據庫中拿的（實現數據庫和界面的點贊同步更新)
models文件夾下的js文件一般是寫ajax的封裝的
例子3：實現期刊號組件epsoide
常?？梢杂胐isplay:flex ； flex-direction:column實現“豎向”的“列”的排列效果（其實我認為，很多布局的話，實在不行的時候，可以用上position定位，比如相對定位，絕對定位等等，也用上彈性盒子）
episode
例子4：例子1到例子3的代碼
//?components/classic/movie/index.js
Component({
??/**
???*?組件的屬性列表
???*/
??properties:?{
????content:String,
????img:String,
??},
??/**
???*?組件的初始數據
???*/
??data:?{
????icon:?'./images/movie@tag.png'
??},
??/**
???*?組件的方法列表
???*/
??methods:?{
??}
})
<!--components/classic/movie/index.wxml-->
<view?class="container">
????<image?src="{{img}}"?class="img"/>
????<image?src="{{icon}}"?class="tag"/>
????<text?class="content">{{content}}</text>
</view>
<!--components/classic/movie/index.wxml-->
<view?class="container">
????<image?src="{{img}}"?class="img"/>
????<image?src="{{icon}}"?class="tag"/>
????<text?class="content">{{content}}</text>
</view>
/*?components/classic/movie/index.wxss?*/
.container?{
??display:?flex;
??flex-direction:?column;
??align-items:?center;
}
.tag{
??width:?46rpx;
??height:?142rpx;
??position:?relative;
??right:?310rpx;
??bottom:?58rpx;
}
.img?{
??width:?750rpx;
??height:?500rpx;
}
.content?{
??font-size:?36rpx;
??max-width:?550rpx;
}
index.json中的代碼基本都是自己生成的，基本一樣是
{
??"component":?true,
??"usingComponents":?{}
}
<!--components/epsoide/index.wxml-->
<view?class="container">
??<view?class="index-container">
????<text?class="plain">No.</text>
????<text?class="index">08</text>
????<view?class="line"></view>
??</view>
??<view?class="date-container">
????<text?class="month">六月</text>
????<text?class="year">2021</text>
??</view>
</view>
/*?components/epsoide/index.wxss?*/
.container?{
??display:?inline-flex;
??height:?60rpx;
??flex-direction:?row;
}
.plain?{
??font-size:?32rpx;
}
.index?{
??font-size:?60rpx;
??line-height:?60rpx;
??font-weight:?800;
??margin-right:?14rpx;
}
.index-container?{
??display:?flex;
??flex-direction:?row;
??align-items:?baseline;
}
.date-container?{
??display:?flex;
??flex-direction:?column;
??margin-top:?6rpx;
}
.month?{
??font-size:?24rpx;
??line-height:?24rpx;
}
.year?{
??font-size:?20rpx;
}
.line?{
??height:?44rpx;
??border-left:?1px?solid?black;
??margin-right:?14rpx;
}
//?components/like/index.js
Component({
??/**
???*?組件的屬性列表
???*/
??properties:?{
????//如果不聲明變量數據類型，那么數據的內容可能無法在別的文件中調用
????count:?Number,
????like:?Boolean,
????//自己寫的代碼?START
????//?bookImage:String
????//自己寫的代碼?END
??},
??/**
???*?組件的初始數據
???*/
??data:?{
????yesSrc:?'/components/like/images/like.png',
????noSrc:?'/components/like/images/like@dis.png',
??},
??/**
???*?組件的方法列表
???*/
??methods:?{
????onLike(){
??????let?count?=?this.properties.count
??????let?like?=?this.properties.like
//自己寫的代碼?START
//?let?bookImage=?this.properties.image
//自己寫的代碼?END
??????count?=?like???count?-?1?:?count?+?1
??????//更新組件的狀態(tài)
??????this.setData({
????????count,
????????like:?!like,
????????//自己寫的代碼?START
????????//?bookImage:bookImage
????????//自己寫的代碼?END
??????})
//關于數據庫和頁面的點贊數同步更新的部分?START
?//觸發(fā)綁定在like組件上的自定義事件
??????//1、需要觸發(fā)的自定義事件的名字
??????//2、自定義事件需要傳遞的數據對象
??????//3、配置事件的屬性
??????this.triggerEvent('myLike',{
????????state:?this.properties.like???'like'?:?'cancel',
????????nums:?this.properties.count
??????},{})
//關于數據庫和頁面的點贊數同步更新的部分?END
????}
??}
})
<!--components/like/index.wxml-->
<view?class="container"?bind:tap="onLike">
????<image?src="{{like?==?'1'???yesSrc?:?noSrc}}"?/>
????<text>{{count}}</text>
????
????
</view>
<!--?<image?src="{{bookImage}}"?/>
<text>{{yesSrc}}1</text>
<text>{{bookImage}}1</text>?-->
/*??自己寫的代碼?START*/
.container{
float:right;
}
/*??自己寫的代碼?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
????
??},
??/**
???*?生命周期函數--監(jiān)聽頁面加載
???*/
??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
??onLike(e){
????//更新點贊的狀態(tài)
????classicModel.like({
??????status:?e.detail.state,
??????index:?this.data.classicData.index,
??????nums:?e.detail.nums
????})
??},
//關于數據庫和頁面的點贊數同步更新的部分?END
??/**
???*?生命周期函數--監(jiān)聽頁面初次渲染完成
???*/
??onReady:?function?()?{
??},
??/**
???*?生命周期函數--監(jiān)聽頁面顯示
???*/
??onShow:?function?()?{
??},
??/**
???*?生命周期函數--監(jiān)聽頁面隱藏
???*/
??onHide:?function?()?{
??},
??/**
???*?生命周期函數--監(jiān)聽頁面卸載
???*/
??onUnload:?function?()?{
??},
??/**
???*?頁面相關事件處理函數--監(jiān)聽用戶下拉動作
???*/
??onPullDownRefresh:?function?()?{
??},
??/**
???*?頁面上拉觸底事件的處理函數
???*/
??onReachBottom:?function?()?{
??},
??/**
???*?用戶點擊右上角分享
???*/
??onShareAppMessage:?function?()?{
??}
})
{
??"usingComponents":?{
????"cmp-like":"/components/like/index",
????"cmp-movie":"/components/classic/movie",
????"cmp-epsoide":"/components/epsoide"
??}
}
<!--pages/classic/index.wxml-->
<cmp-epsoide></cmp-epsoide>
<!--?下面的話就是調用了點贊的組件?-->
<!--?<div>?-->
<cmp-like?count="{{classicData.fav_nums}}"?
????like="{{classicData.like_status}}"?></cmp-like>
????<!--?bookImage="{{classicData.image}}"?-->
????<!--?<text>{{classicData.image}}</text>?-->
????<!--?<image?src="{{classicData.image}}"/>
</div>?-->
<cmp-movie?content="{{classicData.content}}"?
????img="{{classicData.image}}"></cmp-movie>
//utils/http.js
export?default?class?Http?{
??ajax({url,data?=?{},method?=?'get',callback}){
????wx.request({
??????url,
??????data,
??????method,
??????success:?res?=>?{
????????//獲取請求的狀態(tài)碼：200,404,500
????????let?code?=?res.statusCode.toString()
????????//判斷code是否是以2開頭的，如果以2開頭的才可以調用回調函數
????????if(code.startsWith('2'))?{
??????????callback(res.data)
????????}?else?{
??????????//彈出一個警告框
??????????this._showErr(code)
????????}???????
??????},
??????fail:?err?=>?{
????????this._showErr(err.errMsg)
??????}
????})
??}
??//私有的方法
??_showErr(msg){
????wx.showToast({
??????title:?`錯誤代碼:${msg}`,
??????icon:?'none',
??????duration:?2000
????})
??}
}
//config.js
//用來存放常量的文件
export?default?{
??base_url:?'http://127.0.0.1:9001/',
??img_url:?'http://127.0.0.1:9001/public/images/'
}
運行效果
例子5：注意事項（項目經驗之遇到的問題和我是怎么解決問題的）
Q：解決TypeError:?callback?is?not?a?function的報錯
A：//解決TypeError:?callback?is?not?a?function的報錯?START
??????????callback?&&?callback(res.data)
??//解決TypeError:?callback?is?not?a?function的報錯?END
Q：沒有觸發(fā)同個組件文件夾下index.js中聲明的onLike事件
A：在同個組件文件夾下index.wxml中，沒用bind:myLike="onLike"綁定onLike事件
Q：a=b==c怎么運算的
Q：點擊點贊按鈕時，數據庫點贊數加2，取消點贊按鈕時數據庫點贊數減2是什么原因導致這種bug？
A：檢查后臺和前臺代碼，是不是傳訪問路徑后，重復處理了點贊數的加減，如果前臺代碼處理過了點贊數的加減，那么后臺處理點贊數的加減的部分就要注釋掉
Q：status = status === 'like' ? 1 : 0;是不是寫多余了，有沒有別的寫法？
A：目前我嘗試了，status?= status === 'like';和status == 'like' ? status =1 : status =0;和status = status === 'like' ? 1 : 0;的效果是一樣的。暫時我認為是寫多余了。status = status === 'like' ? 1 : 0;可以理解成status = （status === 'like' ? 1 : 0）;
C語言中a=b==c這個式子相當于先算b==c,若二者相等，則將1賦值給a,否則將0賦值給a，那么我個人推理js中a=b===c這個式子相當于先算b===c,若二者相等，則將1賦值給a,否則將0賦值給a
