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

这篇具有很好参考价值的文章主要介绍了微信小程序 -订阅发布模式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

图形展示：

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

代码展示：

1. 安装模块 pubsub-js

npm i pubsub-js --save

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

import PubSub from 'pubsub-js'

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

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

详情页：

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

wxml页面：

<viewclass="musicControl">
    <text class="iconfont icon-iconsMusicyemianbofangmoshiShuffle"></text>
    <text
        class="iconfont icon-shangyishou"
        id="pre"
        bindtap="switchMusic"  //绑定事件
    ></text>
    <text
        class="iconfont {{isPlay ? "icon-zanting':'icon-bofang' } big"
        bindtap="musicPlay"  
    ></text>
    <text 
        class="iconfont icon-next" 
        id="next bindtap="switchMusic'  //绑定事件
    ></text>
    <text class="iconfont icon-iconsMusicyemianbofangmoshiplayList"></text>
</view>

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 方法进行发布文章来源地址https://www.toymoban.com/news/detail-759809.html

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,
        });
    });
},

到了这里，关于微信小程序 -订阅发布模式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！