微信小程序：解決url的報錯，flex，盒子模型，音樂播放，復(fù)用common.wxss【詩書畫唱】
目錄：
例子1：根據(jù)期刊的類型調(diào)用movie，essay，music組件。實現(xiàn)movie，essay，music組件都復(fù)用common.wxss的樣式
essay
為了避免我們認(rèn)為Boolean類型的變量hidden的hidden是不可重命名的變量，我下面把Boolean類型的變量hidden重命名為hn（常常通過true或false來控制多個組件的顯示和隱藏等等）
根據(jù)type來判斷（常常組件中使用屬性的值，三元表達(dá)式等等進(jìn)行判斷）
例子2：實現(xiàn)music組件的樣式:
彈性盒子的個人理解和對應(yīng)的教程視頻等等
display
flex:1等的使用，flex:0，flex:2，flex:0.5的效果
例子3：實現(xiàn)music組件的音樂播放
一開始，點擊事件等綁定的函數(shù)方法的內(nèi)容，可以先用打印語句代替，先測試下方法是否可以被觸發(fā)
一開始可以寫死數(shù)據(jù)，后面可以通過變量的添加和控制等等來把數(shù)據(jù)寫活，變成動態(tài)數(shù)據(jù)
不得不承認(rèn)，serData挺好用的，挺常用的，可以控制變量，進(jìn)行變量的值的刷新（也就是組件的刷新）
properties或data，setData，父組件傳值給子組件（在父組件中，給子組件的屬性賦值等等）等等都可以把數(shù)據(jù)寫活
個人理解：很多時候用了解構(gòu)后，變量自動被賦予對應(yīng)的值，就可以直接用解構(gòu)出來的變量，但是下面因?qū)氲腸onfig.js文件中一些關(guān)鍵字（default等等），而解構(gòu)不出來，所以下面不可以用解構(gòu)
例子4：按照例子1到例子3實現(xiàn)的代碼
具體代碼如下
components/classic/essay/index.wxml
components/classic/essay/index.wxss
components/classic/music/index.js
components/classic/music/index.wxml
components/classic/music/index.wxss
components/classic/classic_beh.js
common.wxss
pages/classic/index.wxml
"requiredBackgroundModes":?["audio"],
config.js
運(yùn)行效果
講義
例子1：根據(jù)期刊的類型調(diào)用movie，essay，music組件。實現(xiàn)movie，essay，music組件都復(fù)用common.wxss的樣式
essay
下面就開始實現(xiàn)“根據(jù)期刊的類型調(diào)用movie，essay，music組件”的功能
根據(jù)數(shù)據(jù)庫的type的值來判斷當(dāng)前期刊要顯示的那種類型的組件
為了避免我們認(rèn)為Boolean類型的變量hidden的hidden是不可重命名的變量，我下面把Boolean類型的變量hidden重命名為hn（常常通過true或false來控制多個組件的顯示和隱藏等等）
根據(jù)type來判斷（常常組件中使用屬性的值，三元表達(dá)式等等進(jìn)行判斷）
例子2：實現(xiàn)music組件的樣式:
組件中，常常用上三元表達(dá)式，組件文件夾中的js文件等中的properties或data中的等等
彈性盒子的個人理解和對應(yīng)的教程視頻等等
如果想要整個設(shè)置為彈性盒子的塊狀，就用display：flex
flex:1等的使用，flex:0，flex:2，flex:0.5的效果
display
例子3：實現(xiàn)music組件的音樂播放
升級后臺
下面的內(nèi)容也可以參考官網(wǎng)的開發(fā)者文檔
一開始，點擊事件等綁定的函數(shù)方法的內(nèi)容，可以先用打印語句代替，先測試下方法是否可以被觸發(fā)
一開始可以寫死數(shù)據(jù)，后面可以通過變量的添加和控制等等來把數(shù)據(jù)寫活，變成動態(tài)數(shù)據(jù)
不得不承認(rèn)，serData挺好用的，挺常用的，可以控制變量，進(jìn)行變量的值的刷新（也就是組件的刷新）
下面還要進(jìn)行修改
properties或data，setData，父組件傳值給子組件（在父組件中，給子組件的屬性賦值等等）等等都可以把數(shù)據(jù)寫活
個人理解：很多時候用了解構(gòu)后，變量自動被賦予對應(yīng)的值，就可以直接用解構(gòu)出來的變量，但是下面因?qū)氲腸onfig.js文件中一些關(guān)鍵字（default等等），而解構(gòu)不出來，所以下面不可以用解構(gòu)
例子4：按照例子1到例子3實現(xiàn)的代碼
個人修復(fù)的bug
Q：為什么音樂播放不了，會路徑報錯？GET http://127.0.0.1:9001/public/music/http://music.163.com/song/media/outer/url?id=393926.mp3 net::ERR_EMPTY_RESPONSE(env: Windows,mp,1.05.2105170; lib: 2.17.0)
A：
首先我排除錯誤的方法就是寫console.log的打印語句，同時發(fā)現(xiàn)
http://m10.music.126.net/20210617171232/200b492b79e7938a13133a005d07bb6d/ymusic/67d4/380d/3414/2d73b6bc1059ac4276887d82806bbaff.mp3訪問得了，那么可能是路徑錯了，那么我猜想是不是數(shù)據(jù)庫的url的問題？是不是后臺中項目的src根目錄下的index.js的內(nèi)容錯了？
我打印了以下內(nèi)容
結(jié)果：
后來查看數(shù)據(jù)庫
就明白了：
改下后臺和數(shù)據(jù)庫即可（記得清空緩存后運(yùn)行項目）
關(guān)鍵是if(req.url.search('/public/') === -1) {}部分
具體代碼如下
<!--components/classic/essay/index.wxml-->
<view?class="container"?hidden="{{hn}}">
????<image?src="{{base_img?+?img}}"?class="img"/>
????<image?src="./images/essay@tag.png"?class="tag"/>
????<text?class="content">{{content}}</text>
</view>
/*?components/classic/essay/index.wxss?*/
@import?'../common.wxss'
//?components/classic/music/index.js
import?classicBeh?from?'../classic_beh.js'
import?config?from?'../../../config.js'
//獲取音頻管理器對象?START
const?mMgr?=?wx.getBackgroundAudioManager()
//獲取音頻管理器對象?END
Component({
??behaviors:?[classicBeh],
??/**
???*?組件的屬性列表
???*/
??properties:?{
????src:?String,
????title:?String,
??},
??/**
???*?組件的初始數(shù)據(jù)
???*/
??data:?{
????pauseSrc:?'images/player@pause.png',
????playSrc:?'images/player@play.png',
????playing:?false,//是否播放音樂
??},
??/**
???*?組件的方法列表
???*/
??methods:?{
????onPlay?()?{
??????//如果需要播放音樂，只需要設(shè)置mMgr的src和title屬性
??????//?mMgr.src?='http://m10.music.126.net/20210617171232/200b492b79e7938a13133a005d07bb6d/ymusic/67d4/380d/3414/2d73b6bc1059ac4276887d82806bbaff.mp3'
??
??/*如果你的MySQL數(shù)據(jù)庫中的classic表的url例對應(yīng)的內(nèi)容是
??http://music.163.com/song/media/outer/url?id=393926.mp3，
??那么就用mMgr.src?=this.properties.src。
??
??如果你的MySQL數(shù)據(jù)庫中的classic表的url例對應(yīng)的內(nèi)容是fhg.mp3之類的
??后臺的public\music之類目錄下有的文件的文件名，那么就用
???mMgr.src?=?config.music_url?+?this.properties.src
??（這里目前我還是用自己后臺的內(nèi)容?。?/
??????mMgr.src?=?config.music_url?+?this.properties.src
??????//?mMgr.src?=this.properties.src
??????console.log(mMgr.src)
??????console.log(config.music_url)?
??????console.log(this.properties.src)
??????mMgr.title?=?this.properties.title
??????//更新播放狀態(tài)
??????this.setData({
????????playing:?true
??????})
????}
??}
})
<!--components/classic/music/index.wxml-->
<view?class="container"?hidden="{{hn}}">
????<image?src="{{base_img?+?img}}"?class="img"/>
????<image?src="{{playing???pauseSrc?:?playSrc}}"?class="player"?bind:tap="onPlay"/>
????<image?src="./images/music@tag.png"?class="tag"/>
????<text?class="content">{{content}}</text>
</view>
/*?components/classic/music/index.wxss?*/
/*?@import?'../common.wxss'?*/
/*?components/classic/music/index.wxss?*/
.container?{
????display:?flex;
????flex-direction:?column;
????align-items:?center;
??}
??.img?{
????width:?422rpx;
????height:?422rpx;
????margin-top:?60rpx;
????border-radius:?50%;
??}
??.player?{
????width:?120rpx;
????height:?120rpx;
????position:?relative;
????bottom:?270rpx;
??}
??.tag?{
????width:?44rpx;
????height:?128rpx;
????position:?relative;
????bottom:?160rpx;
????right:?310rpx;
??}
//components/classic/classic_beh.js
import?config?from?'../../config'
export?default?Behavior({
??properties:?{
????img:?String,
????content:?String,
????//控制子組件是否顯示的部分?START
????hn:?Boolean
??????//控制子組件是否顯示的部分?END
??}
//music等子組件要共用的base_img部分?START
??,
??data:?{
????base_img:?config.img_url
??}
//music等子組件要共用的base_img部分?END
})
common.wxss
/*公共的樣式文件：essay和movie樣用的樣式*/
.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;
}
<!--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>?-->
????????<!--?關(guān)于更新緩存的fav_num，like_status等的綁定?START?-->
????????<cmp-like?class="like"?count="{{fav_nums}}"?
????????????like="{{like_status}}"?bind:myLike="onLike"></cmp-like>
????????????<!--?關(guān)于更新緩存的fav_num，like_status等的綁定?END?-->
????</view>
????<!--?<cmp-movie?wx:if="{{classicData.image}}"?content="{{classicData.content}}"?
????img="{{classicData.image}}"></cmp-movie>?-->
<!--?3個子組件部分?START?-->
????<cmp-movie?wx:if="{{classicData.image}}"?content="{{classicData.content}}"?
????????img="{{classicData.image}}"?hn="{{classicData.type?!=?100}}"></cmp-movie>
????<cmp-essay?wx:if="{{classicData.image}}"?content="{{classicData.content}}"?
????????img="{{classicData.image}}"?hn="{{classicData.type?!=?300}}"></cmp-essay>
????<cmp-music?wx:if="{{classicData.image}}"?content="{{classicData.content}}"?
????????img="{{classicData.image}}"?hn="{{classicData.type?!=?200}}"
????????src="{{classicData.url}}"?title="{{classicData.title}}"></cmp-music>
????????<!--?3個子組件部分?END?-->
????<cmp-navi?class="navi"?title="{{classicData.title}}"?isFirst="{{isFirst}}"??
????isLatest="{{isLatest}}"?bind:myLeft="onNext"
????????bind:myRight="onPrev"></cmp-navi>
</view>
{
??"entryPagePath":?"pages/classic/index",
??"pages":?[
????"pages/classic/index"
??],
??"requiredBackgroundModes":?["audio"],
??"window":?{
????"navigationBarBackgroundColor":?"#fff",
????"navigationBarTextStyle":?"black",
????"navigationBarTitleText":?"聽雨軒",
????"backgroundColor":?"#eeeeee",
????"backgroundTextStyle":?"light",
????"enablePullDownRefresh":?false
??},
??"sitemapLocation":?"sitemap.json"
}
//config.js
//用來存放常量的文件
export?default?{
??base_url:?'http://127.0.0.1:9001/',
??img_url:?'http://127.0.0.1:9001/public/images/',
??music_url:?'http://127.0.0.1:9001/public/music/'
}
運(yùn)行效果
講義
準(zhǔn)備：后臺代碼處理
一、創(chuàng)建新項目和頁面
二、app.json配置導(dǎo)航欄
三、定義和使用點贊組件
"四、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中定義的屬性
期刊號補(bǔ)零（observer函數(shù)）"
"十、初步完成導(dǎo)航組件
獲取數(shù)據(jù)：title，isFirst和isLatest
自定義導(dǎo)航事件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擴(kuò)展）
"十八、根據(jù)期刊類型使用組件movie,essay和music組件
組件的自定義屬性控制組件是否顯示"
"十九、movie,essay和music組件樣式代碼的復(fù)用
@import復(fù)用樣式文件common.wxss"
二十、music組件樣式
"二十一、實現(xiàn)播放音樂
后臺提供音頻服務(wù)功能（修改中間件代碼亂碼處理邏輯）
wx.getBackgroundAudioManager()
app.json中添加配置項目：""requiredBackgroundModes"": [""audio""],"
