本地目录：
- 1.本地数据存储
- 2.音乐播放的控制
- 3.如何实现组件间传值
- 4.给小程序设置全局属性和方法
1.本地数据存储
将数据保存到storage中
wx.setStorage({
key: 'musiclist',
data: this.data.musiclist,
})
对于不需要进行页面操作和显示的数据，我们可以不定义在data中，直接定义一个全局变量就行，这样的话进行赋值也会更加的方便。
let musiclist = []
运用同步方法去给这个变量赋值，因为获取到值需要直接进行下一步的逻辑处理
musiclist = wx.getStorageSync('musiclist')
动态的设置页面上方的导航标题
wx.setNavigationBarTitle({
title: music.name,
})
给容器动态绑定一个铺满全部的背景图片
<view class="player-container" style="background:url({{picUrl}}) center/cover no-repeat"></view>
在项目中使用iconfont
进入官网iconfont.cn，将想要的图标点击购物车图标=>加入购物车
新建项目=>加入项目，比如：demo，点击fontclass =>点击查看在线链接，生成代码，会生成一个css文件的链接地址，可以下载到本地，然后将css文件修改成wxss文件（也可以不下载，直接拷贝链接中的代码放入项目中）
此时图标wxss文件是放在项目的根目录下的，我们要在app.wxss文件中进行引用，然后在项目中就可以通过class进行使用。
@import "iconfont.wxss";
2.音乐播放的控制
小程序提供了一个wx.getBackgroundAudioManager()方法用来控制唯一背景音乐的播放，在要播放背景音乐的页面的js文件首先定义一个变量，去获取全局唯一的背景音频管理器
const backgroundAudioManager = wx.getBackgroundAudioManager()
然后通过给backgroundAudioManager 的src属性赋值，就可以实现背景音乐的额播放，同时注意，还需要同时设置title，否则会报错
backgroundAudioManager.src = JSON.parse(res.result).data[0].url
backgroundAudioManager.title = music.name
如果需要在任何界面都可以听到这个背景音乐，则需要在app.json中配置（和pages同级）
"requireBackgroundModes":[
"audio"
],
同时还可以通过为页面下方的mini播放器设置图片、歌手和专辑名称
backgroundAudioManager.coverImgUrl = music.al.picUrl
backgroundAudioManager.singer = music.ar[0].name
backgroundAudioManager.epname = music.al.name
背景音乐的暂停
backgroundAudioManager.pause()
背景音乐的播放
backgroundAudioManager.play()
在css中，animation-play-state: paused;可以让动画停在当前那一帧，只需要动态的给做动画的元素添加上这个属性，就可以实现动画播放的开始与暂停
backgroundAudioManager.duration=>获取当前背景音乐的时长，但是有时候获取到的是underfined，解决办法：
if(backgroundAudioManager.duration == undefined)
//上面这样样判定是不合理的，因为null==undefined也会是true
if(typepf backgroundAudioManager.duration ！= 'undefined')
//应该像上面那样判定
怎么动态的给data中的对象中某一个属性赋值
this.setData({
['object.xxx']:'yyyyyy'
})
this.data.progress这样给data中的数据赋值可以成功，但不会自动响应到页面上
backgroundAudioManager有一些事件，我们需要在这些事件上绑定对应的回调函数，如：
背景音乐可以播放的时候：backgroundAudioManager.onPlay
backgroundAudioManager.seek()=》重新定义当前背景音乐的正在播放的时间点，参数为要跳转的秒
子组件激活父元素的事件
this.triggerEvent('musicEnd')
父组件在调用子组件的标签中进行接收，同时接收到响应后去触发自身的onNext事件
<x-progress-bar bind:musicEnd="onNext"></x-progress-bar>
进度条的拖拽事件和backgroundAudioManager.onTimeUpdate事件是不能同时进行的，否则会造成拖拽的时候进度条会一直闪的画面，这里的解决办法是设置一个锁：isMoving
当拖拽开始的时候isMoving = true
拖拽结束的时候isMoving = false
当isMoving = false的时候，onTimeUpdate里面的代码才去执行。
小程序控制组件的显示与隐藏
hidden="{{flag}}" //flag为true时隐藏，为false显示
接收父组件传递过来的数据，如果接收的数据，这个数据除了类型，还有其他的属性，则需要写成对象的形式，如果只需要声明一个类型，则可以不用对象的形式
properties: {
isLyricShow: {
type: Boolean,
value: false
},
lyric: String
},
3.如何实现组件间传值
自组件给父组件传值：
自组件：
this.triggerEvent('timeUpdata',{
currentTime
})
调用这个子组件的父组件的页面上对应的标签
<x-process-bar bind:musicEnd="onNext" bind:timeUpdate="timeUpdata"></x-process-bar>
父组件通过触发自定义事件接受到这个数据currentTime的同时想传递给另一个子组件，
通过定义事件处理函数，通过给另一个需要接收数据的子组件标签上起名一个class
timeUpdata(event){
this.selectComponent('.lyric').update(event.detail.currentTime)
},
这样的话，另一个子组件就可以通过自身的update事件，成功接收到currentTime这个数据了。
注意：这时候子组件的update事件相当于被父组件给调用了一次。
歌词的滚动是利用了<scroll-view>组件，scroll-top属性可以规定这个容器里的内容向上滚动的距离，scroll-y属性表示上下方向的滚动，scroll-with-animatio="true"表示开启滚动过渡动画。
scroll-top的属性值只能是px，而我们设置的歌词单行高度是64rpx，不同手机这个rpx代表的实际尺寸都不同，所有这里需要进行一个换算
lifetimes: {
ready() {
wx.getSystemInfo({
success: function(res) {
lyricHeight = res.screenWidth / 750 * 64
},
})
}
},
小程序宽度是750rpx,把屏幕的宽度除以750，得到的就是1rpx
4.给小程序设置全局属性和方法
app.js中的
this.globalData = {
playingMusicId:-1
}
},
setPlayMusicId(musicId){
this.globalData.playingMusicId = musicId
},
getPlayMusicId(){
return this.globalData.playingMusicId
}
在页面获取全局的属性或者方法
const app =getApp()
//在播放的音乐的方法中设置属性
app.setPlayMusicId(musicid)
在对应的组件的页面生命周期中，当页面展示的时候，去触发方法获取到全局变量
pageLifetimes: {
show() {
this.setData({
playingId: parseInt(app.getPlayMusicId())
})
}
},
小程序下方自带的mini控制面板的暂停和播放对应的也就是背景音乐监听事件中的onPause和onPlay
backgroundAudioManager.onPlay和backgroundAudioManager.onPause
网友评论