《微信小程序程序設計與開發(fā)》課件 第五章 背景音樂播放與分享

第五章

主講人：XX背景音樂播放與分享本章目標-掌握小程序背景音樂播放的API的使用現(xiàn)文章詳情頁面背景音樂功能掌握小程序頁面分享微到信群和朋友圈相關API的使用實現(xiàn)文章的頁面分享到微信群和朋友圈的功能任務一：完成多頁面背景音樂播放功能實現(xiàn)背景音樂功能文章頁面背景音樂播放時頁面效果任務描述：學習微信關于媒體中關于背景音頻的API的使用，并完成多頁面背景音樂的播放相關功能實現(xiàn)文章頁面背景音樂播放文章頁面背景音樂播放功能使用BackgroundAudioManager對象相關方法，而具體使用步驟：通過wx.BackgroundAudioManager的方法獲得一個背景音頻的管理對象設置BackgroundAudioManager的屬性和調(diào)用方法進行背景音樂的控制。通過監(jiān)聽回調(diào)方法對業(yè)務進行控制BackgroundAudioManager對象stringsrc音頻的數(shù)據(jù)源（2.2.3

開始支持云文件ID）。默認為空字符串，當設置了新的src時，會自動開始播放，目前支持的格式有m4a,aac,mp3,wav。stringtitle音頻標題，用于原生音頻播放器音頻標題（必填）。原生音頻播放器中的分享功能，分享出去的卡片標題，也將使用該值。stringcoverImgUrl封面圖URL，用于做原生音頻播放器背景圖。原生音頻播放器中的分享功能，分享出去的卡片配圖及背景也將使用該圖。BackgroundAudioManager對象常用的屬性為：BackgroundAudioManager.play()播放音樂。BackgroundAudioManager.pause()暫停音樂BackgroundAudioManager.stop()停止音樂BackgroundAudioManager.onPlay(functioncallback)監(jiān)聽背景音頻播放事件BackgroundAudioManager.onPause(functioncallback)監(jiān)聽背景音頻暫停事件BackgroundAudioManager.onStop(functioncallback)監(jiān)聽背景音頻停止事件BackgroundAudioManager.onEnded(functioncallback)監(jiān)聽背景音頻自然播放結(jié)束事件BackgroundAudioManager對象常用的方法為：官方文檔地址：/miniprogram/dev/api/media/background-audio/BackgroundAudioManager.html實現(xiàn)單頁面背景音樂播放步驟-1步驟1：在文章詳情頁面添加音樂播放開關。<!--音樂播放開關-->

<image

catchtap="onMusicTap"class="music"src="{{isPlayingMusic?'/images/icon/wx_app_music_stop.png':'/images/icon/wx_app_music_start.png'}}">

</image>頁面元素代碼：頁面樣式代碼：/*音樂播放*/.music

{

width:

110rpx;

height:

110rpx;

position:

absolute;

left:

50%;

margin-left:

-51rpx;

top:

180rpx;

opacity:

0.9;}實現(xiàn)單頁面背景音樂播放步驟-2步驟2：獲得背景音樂管理對象。data:

{

//文章詳情對象post:

{},

//音樂是否播放標簽isPlayingMusic:

false,

//背景音樂播放管理器_backGroundAudioManger:

null,

//音樂對象_palyingMusic:

null

}修改post-detail.js中data屬性，添加音樂管理相關屬性

onLoad:

function

(options)

{

//獲得文章編號

let

postId

=

options.postId;

this.postDao

=

new

PostDao();

//添加閱讀數(shù)量

this.postDao.addReadCount(postId);

let

postData

=

this.postDao.getPostDetailById(postId);

let

post

=

postData.data;

this.setData({post:post

});

//創(chuàng)建動畫this.setAniation();

//獲取背景音樂播放器

this.data._backGroundAudioManger

=

wx.getBackgroundAudioManager();

//獲得音樂對象

this.data._palyingMusic

=

post.music;

}修改post-detail.js中onLoad方法中代碼，獲取全局背景音樂管理對象實現(xiàn)單頁面背景音樂播放步驟-3步驟3：onMusicTap方法中實現(xiàn)背景音樂的播放與暫定的操作

//播放音樂或暫停音樂

onMusicTap(event)

{

//獲取背景音樂管理器

const

backGroundAudioManger

=

this.data._backGroundAudioManger;

//獲得音樂

const

palyMusic

=

this.data._palyingMusic;

console.log("palyMusic",palyMusic);

//如果正在播放

if(this.data.isPlayingMusic){

backGroundAudioManger.pause();

}

else

{

//設置音樂屬性

backGroundAudioManger.title

=

palyMusic.title;

backGroundAudioManger.src

=

palyMusic.url;

backGroundAudioManger.coverImgUrl

=

palyMusic.coverImg;

backGroundAudioManger.play();

}

this.setData({isPlayingMusic:

!this.data.isPlayingMusic

});實現(xiàn)單頁面背景音樂播放步驟-4步驟4：在app.json中配置requiredBackgroundModes屬性{

"pages":

[

"pages/welcome/welcome",

"pages/index/index",

"pages/posts/posts",

"pages/test/test",

"pages/post-detail/post-detail",

"pages/post-comment/post-comment"

],

"window":

{

"backgroundTextStyle":

"light",

"navigationBarBackgroundColor":

"#fff",

"navigationBarTitleText":

"Weixin",

"navigationBarTextStyle":

"black"

},

"requiredBackgroundModes":

[

"audio",

"location"

],

"style":

"v2",

"sitemapLocation":

"sitemap.json"}實現(xiàn)單頁面背景音樂播放步驟-5步驟5：在頁面關閉（執(zhí)行onUnload）主動關閉音樂

onUnload:

function

()

{

console.log("post-detail:onUnload");

const

backGroundAudioManger

=

this.data._backGroundAudioManger;

backGroundAudioManger.stop();

//停止音樂播放

this.setData({isPlayingMusic:false

});

},實現(xiàn)單頁面背景音樂播放步驟-6步驟6：通過背景音樂監(jiān)聽，控制播放開關按鈕的狀態(tài)//音樂監(jiān)聽

setMuiscMonitor(){

console.log("=====音樂監(jiān)聽開始========")

//獲取背景音樂管理器

const

backGroundAudioManger

=

this.data._backGroundAudioManger;

//音樂停止監(jiān)聽

backGroundAudioManger.onStop(()=>{

console.log("====setMuiscMonitor===onStop=============");

this.setData({isPlayingMusic:false

});

});

//音樂自然播放結(jié)束

backGroundAudioManger.onEnded(()=>{

console.log("====setMuiscMonitor===onEnded=============");

this.setData({isPlayingMusic:false

});

});需要在onLoad方法中調(diào)用音樂監(jiān)聽的方法實現(xiàn)全局背景音樂播放在微信小程序中背景音樂的API原本設計為全局背景音樂的，實現(xiàn)全局背景音樂實現(xiàn)步驟：在app.js中設置全局音樂播放的控制變量。頁面加載時，初始化頁面音樂播放控制變量狀態(tài)。修改音樂控制方法，使得音樂播放控制與全局變量同步。修改音樂監(jiān)聽方法，是的音樂監(jiān)聽與全局變量同步。全局背景音樂播放實現(xiàn)步驟-1步驟1：在app.js中設置全局音樂播放的控制變量。globalData:

{

//globalMessage:"Iamglobaldata",

//全局控制背景音樂播放狀態(tài)g_isPlayingMuisc:

false,

//全局控制當前音樂編號g_currentMusicPosId:null

}全局背景音樂播放實現(xiàn)步驟-2步驟2：頁面加載時，初始化頁面音樂播放控制變量狀態(tài)

//初始化音樂播放圖標狀態(tài)

initMusicStatus()

{

let

currentPostId

=

this.data.post.postId;

if(app.globalData.g_isPlayingMuisc

&&

app.globalData.g_currentMusicPosId

===

currentPostId){

this.setData({isPlayingMusic:

true

});

}

else

{

this.setData({isPlayingMusic:

false

});

}

}全局背景音樂播放實現(xiàn)步驟-3步驟3：修改音樂控制方法，使得音樂播放控制與全局變量同步onMusicTap(event)

{

//獲取背景音樂管理器

const

backGroundAudioManger

=

this.data._backGroundAudioManger;

//獲得音樂

const

palyMusic

=

this.data._palyingMusic;

console.log("palyMusic",

palyMusic);

//如果正在播放

if(this.data.isPlayingMusic){

backGroundAudioManger.pause();

app.globalData.g_isPlayingMuisc

=

false;

}

else

{

//設置音樂屬性

backGroundAudioManger.title

=

palyMusic.title;

backGroundAudioManger.src

=

palyMusic.url;

backGroundAudioManger.coverImgUrl

=

palyMusic.coverImg;

backGroundAudioManger.play();

}

this.setData({isPlayingMusic:

!this.data.isPlayingMusic

});

app.globalData.g_isPlayingMuisc

=

true;

app.globalData.g_currentMusicPosId

=

this.data.post.postId;

}全局背景音樂播放實現(xiàn)步驟-4步驟4：修改音樂監(jiān)聽方法，使得音樂監(jiān)聽與全局變量同步

//音樂監(jiān)聽

setMuiscMonitor()

{

console.log("=====音樂監(jiān)聽開始========")

//獲取背景音樂管理器

const

backGroundAudioManger

=

this.data._backGroundAudioManger;

//音樂停止監(jiān)聽

backGroundAudioManger.onStop(()

=>

{

console.log("====setMuiscMonitor===onStop=============");

this.setData({isPlayingMusic:

false

});

app.globalData.g_isPlayingMuisc

=

false;

});

//音樂自然播放結(jié)束

backGroundAudioManger.onEnded(()

=>

{

console.log("====setMuiscMonitor===onEnded=============");

this.setData({isPlayingMusic:

false

});

app.globalData.g_isPlayingMuisc

=

false;

});顯示音樂的封面圖片根據(jù)頁面中isPalyingMusic音樂播放狀態(tài)的控制變量，來控制post-deital.wxml頁面文章圖片顯示邏輯<image

class="head-image"src="{{isPlayingMusic?post.music.coverImg:post.postImg}}"></image>任務二：完成文章分享給朋友和朋友圈文章分享功能分享文章到朋友圈任務描述：接下來在本小節(jié)我們將實現(xiàn)在文章詳情頁面實現(xiàn)分享給朋友、微信群和分享朋友圈的功能。文章分享給朋友、微信群和朋友圈實現(xiàn)頁面的分享功能，需要處理Page對象中兩個方法：onShareAppMessage(Objectobject)監(jiān)聽用戶點擊頁面內(nèi)轉(zhuǎn)發(fā)按鈕（button

組件

open-type="share"）或右上角菜單“轉(zhuǎn)發(fā)”按鈕的行為。onShareTimeline()監(jiān)聽右上角菜單“分享到朋友圈”按鈕的行為，并自定義分享內(nèi)容。(從基礎庫2.11.3開始支持)文章分享給朋友、微信群和朋友圈onShareAppMessage(Objectobject)：onShareAppMessage方法必須返回一個Object對象，這個對象可以保護以下屬性：title轉(zhuǎn)發(fā)標題,默認值：當前小程序名稱。path轉(zhuǎn)發(fā)路徑，默認值：當前頁面path，必須是以/開頭的完整路徑。limageUrl自定義圖片路徑，可以是本地文件路徑、代碼包文件路徑或者網(wǎng)絡圖片路徑。支持PNG及JPG。顯示圖片長寬比是5:4。Promise如果該參數(shù)存在，則以resolve結(jié)果為準，如果三秒內(nèi)不resolve，分享會使用上面?zhèn)魅氲哪J參數(shù)onShareTimeline()事件處理函數(shù)返回一個Object，用于自定