微信小程序 -订阅发布模式

图形展示：

代码展示：

1. 安装模块 pubsub-js

npm i pubsub-js --save

2. 导入模块（在需要订阅发布的 js 页面内进行导入）

import PubSub from 'pubsub-js'

注：在微信小程序中无法直接npm 下载 导入 的（安装一个就需要构建一次）

解决：菜单栏 --> 工具 -->  构建 npm  点击即可（会出现新的目录）

详情页：

1. 绑定两个事件，用于在点击 prev(上一页)  next(下一页) 时触发事件

wxml页面：

2. 触发事件，使用 PubSub 的 publish 方法进行发布 

js页面：

switchMusic(e){
    //是需要向歌曲列表页进行信息的发布
    const type = e.currentTarget.id;
    PubSub.publish("switchType",type);
},

3. 在生命周期 onLoad 中 使用 PubSub 的 subscribe 方法对列表页发布的内容进行订阅

有两个参数：

        参数一：要订阅的发布名称

        参数二：回调函数，处理订阅的 发布信息内容

                函数参数一 (msg)：发布的对应名称  如：PubSub.publish("musicId"，musicId);

                函数参数二 (musicId)：发布的对应参数  如：PubSub.publish("musicId"，musicId);
 

onLoad(options) {
    PubSub.subscribe("musicId"，(msg, musicId) => {
        console.log("musicId:", musicId);
    });
},

列表页：
1. 在生命周期 onLoad 中 使用 PubSub 的 subscribe 方法对详情页发布的内容进行订阅

有两个参数：

        参数一：要订阅的发布名称

        参数二：回调函数，处理订阅的 发布信息内容

                函数参数一 (msg)：发布的对应名称  如：  PubSub.publish("switchType",type);

                函数参数二 (type)：发布的对应参数  如： PubSub.publish("switchType",type);
 

onLoad(options) {
    PubSub.subscribe("switchType"，(msg, type) => {
        let { index, recommendList } = this.data;
        
        // 控制边界
        if(type === "next") {
            index === recommendList.length -1 && (index = -1);
            // 下一首
            index += 1;
        } else {
            index === 0 && (index = recommendList.length);
            //上一首
            index -= 1;
        }
        console.log(index);
    });
},

2. 处理完数据后，在下方使用 PubSub 的 publish 方法进行发布

onLoad(options) {
    PubSub.subscribe("switchType"，(msg, type) => {
        let { index, recommendList } = this.data;
 
        if(type === "next") {
            // 下一首
            index += 1;
        } else {
            //上一首
            index -= 1;
        }
        console.log(index);
        let musicId = recommendList[index].id;
        PubSub.publish("musicId"，musicId); //将音乐id发布到详情页
        this.setData({
            index,
        });
    });
},