【微信小程序】音乐播放小程序

效果展示

 

 项目总结

•  请求数据的方式采用wx.request(),将其封装称为一个Promise对象

export default (url, data={}, method = "GET") => {
    return new Promise((resolve, reject) => {
        wx.request({
            url: config.host + url,
            data,
            method,
            header: {
                cookie: wx.getStorageSync('cookies')?wx.getStorageSync('cookies').find(item => item.indexOf('MUSIC_U') !== -1):''
            },
            success: (res) => {
                if(data.isLogin) {
                    wx.setStorage({
                        key: 'cookies',
                        data: res.cookies
                    })
                }
                resolve(res.data)
            },
            fail: (err) => {        
                reject(err)
            }
        })
    })
}

• 通过在app.js中定义全局属性，将是否有音乐在播放记录下来

App({
  globalData: {
    isMusicPlay: false, // 是否有音乐在播放
    musicId: '' // 音乐id
  },
})

•  页面之间的相互通信采用pubsub-js，订阅事件与发布事件。歌单页面首先订阅播放页面发布的消息，得到一个变量是选择下一首还是上一首，然后将下一首或者上一首的歌曲的id发布给播放页面，播放页面订阅歌单页面发来的歌曲id，从而请求这首歌的播放数据。

 歌单页面

PubSub.subscribe('switchType', (msg, type) => {
    PubSub.publish('musicId', musicId)
}

 播放页面

PubSub.subscribe('musicId', (msg, musicId) => {})
PubSub.publish('switchType', type)

•  搜索功能则采用节流的方式，一直发送请求，isSend初始值为false，会发送一次请求，300毫秒之内如果用户再次输入则直接return不会到this.getSearchList()发送请求

handleInputChange(event) {
    this.setData({
        searchContent: event.detail.value.trim()
    })
    if (isSend) {
       return
    }
    isSend = true;
    this.getSearchList();

    setTimeout(() => {
        isSend = false;
    }, 300)

},

 项目源码

 gitee地址：https://gitee.com/tao-yuhan/smart-music.git