67-尚硅谷-小程序-pubsub消息订阅发布，自定义事件说明

好的，我们继续啊，那上一节课呢，我们已经把这个使用N平包的准备工作我们做完了啊，那这节课呢，我们正式来看一下这个pop up GS。那大家搜一下这个pop up GS啊，然后呢，我们要看的应该是这个第二个啊，是它，那我们去看一下。嗯，往下翻。在这里。啊，那这个pop GS，呃，首先啊，我们需要下载这个包。下载完成的引入啊，那它这个下载的动作呢，在哪呢？我看一下上面没有是吧。载，他没告诉我们下载吗？啊，应该是有在哪呢在这。N名词道，注意，你们要安装的是pop杠，GS。看杠GS。那这个包可以干嘛呢？它可以帮助我们实现页面和页面之间的通信。

可以帮我们实现页面和页面的通信。好的，那现在呢，我们先去啊，下载一下这个包，执行一下当前的命令，来在我们的命令行里面让它执行对吧。那么这边一边下载啊，我们一边看一下。首先我们要引入这个包啊，引入的对象我们用这个去接收他们。有了碳，我们可以干嘛呢？大家看这。首先啊，有一个方法呢，叫。这里边我们这儿需要传一个消息的名称。里面呢，有一个概念叫订阅发布，叫消息的订阅发布。哎，这个呢，相当于是我们唯有中学的什么自定义事件。你要能很好的理解这个啊，当然必须要掌握一个很关键的东西，就是自定义实践的一些重点。好的，因为这个比较重要啊，我给大家总结到这个笔记里面。嗯，我看啊，就到我们的扩展内容里边吧，啊在这里来我们这儿呢，来一个啊第三个啊，就是这个实践相关。

或者叫啊定义事件相关，嗯，定义事件的话呢，我们啊先说这个分类啊，有什么有自定义有标准的啊盗墓事件，嗯，然后呢，就是自定义事件，嗯，我们先说啊，那这个啊标准的盗墓事件。那标准的盗墓世界有什么特点？哎，首先呢，给大家举例啊，那就是。我们用的太多了啊，比如说什么可呀啊，什么input的世界。等等吧，对吧，啊，标准的盗墓世界，注意。那首先呢，它的事件名是固定的，对吧，然后呢，这个事件由谁触发的，由浏览器触发，比如说可利事件，那我们给一个button特呢，绑定了一个可以事件，我们用户呢，只需要点击这个button，那么对应的回调。

谁来触发，其实是以浏览器去帮我们去调用这个回调。写的再严格一点啊，其实是浏览器里面的GS引擎帮我们去调用这个提前内置好的。啊，就是我们写的那个回调，人家来帮我们调用。所以呢，我们说由浏览器去触发，那再说啊，我们自定义事件。啊，这个很关键啊，自定义事件，自定义事件分为两方，一方呢是绑定事件啊，还有一方呢是触发事件。绑定事件呢？我们要关注的是啊，我们的世界名叫什么？除了世界名呢，我们还会给这个自定义的世界呢，去把另一个世界的回调。对吧，那触发事件，你怎么去触发你当初绑定的事件，你是不是一定得知道你的事件名。那除了世界名。我们还要知道什么呀，我们还要提供什么，你想你触发事件不是说就为了调用他的，哎，就为了找到他的时间名，我们还为了调用他的毁调对不对？

调用回调是通知我触发了你这个事件，在调用回调的同时，我们还需要提供一个东西叫这个事件啊参数对象，嗯，说白了，你调人家回调，你不得给人家人什么吗。给人家点什么对不对，给什么呢？给他一些数据。对，这个数据呢，可以是对象啊，也可以是四五串都可以。这个呢，哎，等同于啊，我们原生事件啊，也就是说或者叫标准的盗墓事件吧，啊，原生事件的什么呀，Event对象，而这个event对象呢，是。啊，我们GS引擎提前什么内置好的，是由他来去传入的13，那现在啊，如果说我们是自定义实现，那么这个呢，相当于需要我们去传数据。啊，我们去传出去。

而现在啊，我们看到这个pop up。哎，他说它用来实现消息的订阅发布。那里面的有订阅方。有发布啊。所谓的订阅方，那其实指的就是什么呀？嗯，来到我们笔记这一块。就是绑定世界这一方，而发布方呢，其实指的就是我们这个。触发世界的一方。嗯，那么订阅方你要注意啊，订阅方是有需要绑定回调的，而发布方呢，它是需要什么提供参数的啊，提供数据的。提供数据的，那这样的话呢，我们回头看一下啊，在这里边呢，它有一个方法呢，叫那其实第一个参数呢，就是相当于它绑定的世界名。第二个my subscribe这是干嘛的呢？是世界的回调，那说明啥说明哎，这有回调了啊，那说明啥说明是用来干嘛的。

对，它是用来干嘛的，想想。哎，它是用来去绑定世界的。说白了，它是电源方。哎，这呢，我给大家写到这儿啊，那这个呢，就是哎，我们这个啊PU啊sub。点是它，那么对应的发布方是谁呢？我们再看一眼，往下翻啊往下翻。嗯，那找找看啊，他应该是在下边吧，我往下看，给大家找一个实例，嗯，在这。哎，或者说我们就看这个事例啊，我们看看它里面有没有。呃，上来这呢，有有个subscribe对吧，那看这。紧接着这pop up，这有个publish。Publish这第一个参数呢，也写了个MY，注意跟当初定义事件的世界名一样。

二。Publish这个方法第二个参数呢，写了个字符串，Hello word。那么这个很明显是数据。很明显数据，所以现在我们看到的publish，它其实就是发布消息的一方。发布消息的时候，我们只需要指定消息的名称。啊，那么到时候呢，它会自动的去帮我们调用这个当初的回调，同时把这个数据传入到回调的内部。好，那这个时候来先给大家把笔记这写一写啊啊pop up中。哎，Pop up中这个publish呢，是发布消息的一方。啊，那知道了这个以后。那我们就可以来到我们的项目啊，去使用一下这个库。那么看了半天啊，刚才呢，我们也下载这个库了，对不对，现在啊，我们哪两个页面要通信呢。

嗯，首先是我们的详情页跟我们。页面要通信，这两个页面对不对。那这两个页面要通信，那肯定一个页面是。定远方。一个页面发布。我想问一下大家，哪个页面是订阅方，哪个页面是发布方？哎，想想看。呃。哎，可能有的小伙伴啊，刚接触这个不太熟，那这个这个时候呢，跟大家说一下，如何区分订阅方还是发布方呢，你只需要记住。嗯，来把订阅方。啊是啊，订阅方啊，是接收数据的一个。嗯，而我们的发布方。哎，发布方是干嘛。嗯，是提供数据的一方。

在我发布的时候呢，那这呢，第一个呢是消息名，第二呢是啊提供的数据呗。而订阅的时候呢，第一个呢是消息明，那么第二个呢，是世界的回调。世界的佛教，那这个消息名啊，说的严谨一点的话，我们可以认为它是世界名。看世界名，那把这个也改一下。好的。那我们就看谁提供数据，谁发布对不对。那那这样看的话，我们现在呢，是在我们的详情页。在点击切割的时候，我们拿到的类型是不是想要交给recommend，让他知道这个类型，进而帮我们去找上一首或者下一首next呀？所以我们详情页现在应该是发布发而。应该是订阅方。

那么它俩呢，都需要用到这个pop sub，所以呢，我呢先在上面呢去引入一下啊这呢port这个哎pub sub，哎from我们的pop sub-GS。嗯，那这个页面呢，也需要引入一下。因为是第三方的包啊，我就放到上面去引入。好的，引入门注意啊，我什么也没有做呢，我们这个时候来到我们的项目里面，你会这发现这报错了。啊，为什么会报错呢，大家看一下啊，我们现在呢，本来是通过import呢，直接去引入的是一个第三方的包，所以呢，我们这儿呢，不需要去指定任何的。包。直接指定报名是不是就可以了？但是实际上小程序中呢，给我们按相对路径是不是去找这个报名了，它是从。下面去找的。嗯，因为我们现在GS所处的位置是吧，就是在这个文件夹下面。

所以你看他怎么找的，是不从这个文件夹下找，那肯定找不到。为什么会出现这个问题呢？哎，那是因为我们很少步骤啊。当你下载完包的时候，还有很重要的一步是第四步，叫构建NPM。那么如何构建呢？在我们开发工具中找到工具的选项D，构建NPM就好了。那么点完这个呢，它会把我们下载note包modus中的包呢，打包到迷你program啊这个包中。这个时候来回到我们的项目，大家看一眼。那么我们平时通过NPM下载的包是不是会自动的放到notes下面？注意啊，这个时候呢，并没有什么迷你。Program。NPM这个文件夹对不对。那现在啊，没有注意啊，我们来到我们的开发工具中，我呢点开这个工具下面这有个构建NPM注意啊。

是他来，我给大家截个图。首先从工具这啊，点开它找这个东西叫构建NPM，那这一步呢，也很关键啊，如果说有的小伙伴找不到，你可以看一下我的课堂截图。哎，构建等于PM。嗯，那现在呢，我们去点一下走。哎，这说完成构建耗时多少秒，我们点个确定注意啊，这个时候项目就没有报错了。那这个时候呢，我们来到我们的这个啊，来到我们这个项目里边。那大家看这多了一个文件夹。对吧？哎，那这个文件夹怎么来的呢？我先给你展开我之前这个no modu啊，里面是不是只有一个包叫pop up。杠S，而program下面呢，其实也有。刚才的构建其实就是把no modules里面的包转换成我们小程序可以使用的包。

而且呢，它会自动放入到指定的目录下。而我们的小程序在加载第三方包的时候，只会到这个迷你program n PM下面去找。如果没有这个文件夹，或者这个文件夹上没有我要找的包，那我就会从当前的位置。出发去找。哎，这一点呢，大家要注意啊。好的，那到这儿为止呢，啊，那我们就熟悉了这个pop up的作用，以及自定义事件啊，包括pop up的包如何去下载。啊，并且引入那下一节课呢，我们正式的去使用它的功能来，那这节课呢，我们先讲到这儿。