切换上下首音乐功能的实现（消息订阅与发布的使用）

切换上下首音乐
思路：
切换歌曲，实际上是切换歌曲的id，歌曲的详情页只有当前播放歌曲的id，所以要想更新音乐的id得去每日推荐的列表页更新，切换歌曲有两种情况，一个是上一首，一个是下一首，可以绑定在一个事件上面，指定id标识上一首或者下一首，然后把类型传到列表页中去

songDetail.wxml

<text class="iconfont icon-shangyishoushangyige" id="pre" bindtap="handleSwitch"></text><text class="iconfont icon-xiayigexiayishou" id="next" bindtap="handleSwitch"></text>

把切换的类型传到每日推荐列表页去(利用消息订阅与发布)

songDetail.js

  // 点击切换歌曲的回调handleSwitch(event){// 获取切换歌曲的类型let type=event.currentTarget.id// 将切换歌曲的类型发送给recommendSong页面PubSub.publish('switchType',type)},

在recommend.js中根据不同类型的条件进行更新相应的musicId
1）首先先订阅消息，接收到切换的类型
2）获取点击歌曲的索引（使用data-index=“{{index}}”进行获取）小程序进行循环遍历的时候，有自定义的index，在这里我们直接使用就行

<view bindtap="tosongDetail" data-song='{{item}}' data-musicid="{{item.id}}"  data-index="{{index}}" class="listItem" wx:for="{{recommendList}}" wx:key="id"><image src="{{item.al.picUrl}}"></image><view class="musicInfo"><text>{{item.name}}</text><text>{{item.ar[0].name}}</text></view><view class="iconfont icon-gengduo"></view>
</view>

3）使用路由跳转到歌曲详情页的时候需要根据点击的歌曲进行更新索引，在这之前，我们可以在data中定义一个index用来保存索引，然后根据具体情况进行更新
recommendSong.js

// 跳转至songDetail的回调tosongDetail(event){let {song,musicid,index}=event.currentTarget.datasetconsole.log(song)// 更新记录点击音乐的下标this.setData({index})// 路由跳转传参可以使用query的形式wx.navigateTo({// url: '/pages/songDetail/songDetail?song='+JSON.stringify(song),url: '/pages/songDetail/songDetail?musicId='+musicid,})},

4)在onload监听中根据recommendSong.js歌单推荐页通过消息订阅收到的歌曲详情页切换歌曲的类型，我们进行索引更新，同时根据歌曲的索引(需要进行临界值判断)，获取歌曲对应的musicId，把musicid通过消息订阅与发布给歌曲详情页传过去
recommendSong.js

// 订阅songDetail发布的type消息 第一个参数是消息名，第二个参数才是收到的数据PubSub.subscribe('switchType',(msg,switchType)=>{let {recommendList,index}=this.dataif (switchType==='pre') {//上一首(index===0) && (index=recommendList.length)index-=1}else{//下一首(index===recommendList.length-1) && (index=-1)index+=1}let musicId=recommendList[index].id// 更新index状态this.setData({index})// 将最新的musicId发送给songDetailPubSub.publish('musicId',musicId)})

5）在songDetail中根据每日推荐列表页传过来的音乐id进行更新，同时切换的时候需要自动播放当前的音乐(也需要在onLoad监听中，防止重复加载)
songDetail.js

// 订阅recommendSong页面发布的消息：musicIdPubSub.subscribe('musicId',(msg,musicId)=>{// 获取最新的音乐详情数据this.getMusicInfo(musicId)// 自动播放当前音乐this.musicControl(true,musicId)})

切换上下首音乐功能的实现（消息订阅与发布的使用）相关推荐

mqttnet+emqx实现消息订阅与发布
mqttnet+emqx实现消息订阅与发布 1 在Windows操作系统下使用EMQX 1.1 部署前准备首先进入官网https://www.emqx.io/zh/downloads?os=Wind ...
【Vue2.0】— 消息订阅与发布pubsub（二十）
[Vue2.0]- 消息订阅与发布pubsub(二十)
小程序中消息订阅与发布
注:小程序中最好不要在开发工具里面使用命令行安装,最好使用外部的 1)首先要在项目中初始化一个package.json用来存放包 npm init 2)下载安装要使用的包,这里是要使用消息订阅与发布 ...
Vue（组件间通信：props、自定义事件、全局事件总线、消息订阅与发布）
一.props props不仅可以实现父给子传递信息,还可以进行子给父传递信息 1.父给子传递信息: 父组件中给子组件实例传递信息子组件利用props进行接收组件传递信息(接收方式有三种:数组.对象 ...
Vue学习之--------消息订阅和发布、基础知识和实战应用（2022/8/24）
文章目录 1.基础知识 2.代码实例 2.1 main.js 2.2 School.vue 2.3 Student.vue 2.4 App.vue 3.全局事件总线通信改为消息的订阅和发布 3.1 核 ...
ESP32的MQTT AT固件烧录+STM32以ESP32的MQTT AT固件的AT指令连接EMQX下mqtt服务器实现消息订阅和发布
目录写在前面三种方案(利用ESP32连接EMQX下的MQTT) 步骤 ESP32烧录固件并AT指令进行测试. 下载固件烧录工具下载烧录固件(选择ESP32) 关于AT 指令与MQTT服务器断开 ...
php redis消息订阅与发布_PHP使用Redis实现订阅发布与批量发送短信
原标题:PHP使用Redis实现订阅发布与批量发送短信 1 什么是redis订阅 Redis 发布订阅(pub/sub)是一种消息通信模式:发送者(pub)发送消息,订阅者(sub)接收消息.直接点, ...
mysql消息订阅与发布_消息发布与订阅
代码示例消息发布者 (即publish client) package message.kvstore.aliyun.com; import redis.clients.jedis.Jedis; p ...
php redis消息订阅与发布_php+redis 实现发布订阅功能
前言 redis可以实现发布订阅和消息队列的功能.两者的区别在于订阅者可以是多个,且可以同时处理发布上来的消息,如果订阅者不在线(服务没有启动)消息将丢失,消息没有持久化.发布和订阅是一块执行的,缺少 ...

切换上下首音乐功能的实现（消息订阅与发布的使用）

切换上下首音乐功能的实现（消息订阅与发布的使用）相关推荐

最新文章

热门文章