《微信小程序程序设计与开发》课件 第五章 背景音乐播放与分享

第五章

主讲人：XX背景音乐播放与分享本章目标-掌握小程序背景音乐播放的API的使用现文章详情页面背景音乐功能掌握小程序页面分享微到信群和朋友圈相关API的使用实现文章的页面分享到微信群和朋友圈的功能任务一：完成多页面背景音乐播放功能实现背景音乐功能文章页面背景音乐播放时页面效果任务描述：学习微信关于媒体中关于背景音频的API的使用，并完成多页面背景音乐的播放相关功能实现文章页面背景音乐播放文章页面背景音乐播放功能使用BackgroundAudioManager对象相关方法，而具体使用步骤：通过wx.BackgroundAudioManager的方法获得一个背景音频的管理对象设置BackgroundAudioManager的属性和调用方法进行背景音乐的控制。通过监听回调方法对业务进行控制BackgroundAudioManager对象stringsrc音频的数据源（2.2.3

开始支持云文件ID）。默认为空字符串，当设置了新的src时，会自动开始播放，目前支持的格式有m4a,aac,mp3,wav。stringtitle音频标题，用于原生音频播放器音频标题（必填）。原生音频播放器中的分享功能，分享出去的卡片标题，也将使用该值。stringcoverImgUrl封面图URL，用于做原生音频播放器背景图。原生音频播放器中的分享功能，分享出去的卡片配图及背景也将使用该图。BackgroundAudioManager对象常用的属性为：BackgroundAudioManager.play()播放音乐。BackgroundAudioManager.pause()暂停音乐BackgroundAudioManager.stop()停止音乐BackgroundAudioManager.onPlay(functioncallback)监听背景音频播放事件BackgroundAudioManager.onPause(functioncallback)监听背景音频暂停事件BackgroundAudioManager.onStop(functioncallback)监听背景音频停止事件BackgroundAudioManager.onEnded(functioncallback)监听背景音频自然播放结束事件BackgroundAudioManager对象常用的方法为：官方文档地址：/miniprogram/dev/api/media/background-audio/BackgroundAudioManager.html实现单页面背景音乐播放步骤-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;}实现单页面背景音乐播放步骤-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();

//添加阅读数量

this.postDao.addReadCount(postId);

let

postData

=

this.postDao.getPostDetailById(postId);

let

post

=

postData.data;

this.setData({post:post

});

//创建动画this.setAniation();

//获取背景音乐播放器

this.data._backGroundAudioManger

=

wx.getBackgroundAudioManager();

//获得音乐对象

this.data._palyingMusic

=

post.music;

}修改post-detail.js中onLoad方法中代码，获取全局背景音乐管理对象实现单页面背景音乐播放步骤-3步骤3：onMusicTap方法中实现背景音乐的播放与暂定的操作

//播放音乐或暂停音乐

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

});实现单页面背景音乐播放步骤-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"}实现单页面背景音乐播放步骤-5步骤5：在页面关闭（执行onUnload）主动关闭音乐

onUnload:

function

()

{

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

const

backGroundAudioManger

=

this.data._backGroundAudioManger;

backGroundAudioManger.stop();

//停止音乐播放

this.setData({isPlayingMusic:false

});

},实现单页面背景音乐播放步骤-6步骤6：通过背景音乐监听，控制播放开关按钮的状态//音乐监听

setMuiscMonitor(){

console.log("=====音乐监听开始========")

//获取背景音乐管理器

const

backGroundAudioManger

=

this.data._backGroundAudioManger;

//音乐停止监听

backGroundAudioManger.onStop(()=>{

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

this.setData({isPlayingMusic:false

});

});

//音乐自然播放结束

backGroundAudioManger.onEnded(()=>{

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

this.setData({isPlayingMusic:false

});

});需要在onLoad方法中调用音乐监听的方法实现全局背景音乐播放在微信小程序中背景音乐的API原本设计为全局背景音乐的，实现全局背景音乐实现步骤：在app.js中设置全局音乐播放的控制变量。页面加载时，初始化页面音乐播放控制变量状态。修改音乐控制方法，使得音乐播放控制与全局变量同步。修改音乐监听方法，是的音乐监听与全局变量同步。全局背景音乐播放实现步骤-1步骤1：在app.js中设置全局音乐播放的控制变量。globalData:

{

//globalMessage:"Iamglobaldata",

//全局控制背景音乐播放状态g_isPlayingMuisc:

false,

//全局控制当前音乐编号g_currentMusicPosId:null

}全局背景音乐播放实现步骤-2步骤2：页面加载时，初始化页面音乐播放控制变量状态

//初始化音乐播放图标状态

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

});

}

}全局背景音乐播放实现步骤-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;

}全局背景音乐播放实现步骤-4步骤4：修改音乐监听方法，使得音乐监听与全局变量同步

//音乐监听

setMuiscMonitor()

{

console.log("=====音乐监听开始========")

//获取背景音乐管理器

const

backGroundAudioManger

=

this.data._backGroundAudioManger;

//音乐停止监听

backGroundAudioManger.onStop(()

=>

{

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

this.setData({isPlayingMusic:

false

});

app.globalData.g_isPlayingMuisc

=

false;

});

//音乐自然播放结束

backGroundAudioManger.onEnded(()

=>

{

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

this.setData({isPlayingMusic:

false

});

app.globalData.g_isPlayingMuisc

=

false;

});显示音乐的封面图片根据页面中isPalyingMusic音乐播放状态的控制变量，来控制post-deital.wxml页面文章图片显示逻辑<image

class="head-image"src="{{isPlayingMusic?post.music.coverImg:post.postImg}}"></image>任务二：完成文章分享给朋友和朋友圈文章分享功能分享文章到朋友圈任务描述：接下来在本小节我们将实现在文章详情页面实现分享给朋友、微信群和分享朋友圈的功能。文章分享给朋友、微信群和朋友圈实现页面的分享功能，需要处理Page对象中两个方法：onShareAppMessage(Objectobject)监听用户点击页面内转发按钮（button

组件

open-type="share"）或右上角菜单“转发”按钮的行为。onShareTimeline()监听右上角菜单“分享到朋友圈”按钮的行为，并自定义分享内容。(从基础库2.11.3开始支持)文章分享给朋友、微信群和朋友圈onShareAppMessage(Objectobject)：onShareAppMessage方法必须返回一个Object对象，这个对象可以保护以下属性：title转发标题,默认值：当前小程序名称。path转发路径，默认值：当前页面path，必须是以/开头的完整路径。limageUrl自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径。支持PNG及JPG。显示图片长宽比是5:4。Promise如果该参数存在，则以resolve结果为准，如果三秒内不resolve，分享会使用上面传入的默认参数onShareTimeline()事件处理函数返回一个Object，用于自定