00:00
好的,我们继续啊,那上一上一节课呢,我们是利用这个APP。嗯,Data,我也相当于是APP中的global data,我们是不是解决了这个相当于是两个页面通信的问题啊,就是说在详情页页面销毁的时候呢,我们先把这个状态呢从到全局对吧,然后呢,从这个页面再进来的时候,我们再把全局的状态读出来。去解决了这个状态显示的问题,那这节课呢,我们来做这个切换歌曲的功能。啊,所谓的切换歌曲呢,就是点击这两个图标,那分别呃,对应的功能是上一首以及下一首歌曲呗。那首先我们需要给这两个按钮呢,分别绑定一个点击事件啊,那这个时候呢,来到我们的代码里面。好的,那上一首和下一首的图标呢,在这里啊,一个叫上一首,一个就叫next。那我们去绑定一个点击事件,叫tap。对吧,那这里呢,应该叫,呃,我就叫他一个Switch吧,Switch music。
01:05
切换音乐。没问题,那啊或者是这样吧,那这个是回调函数,我这儿呢叫做head Switch来处理这个切换,而下边这个啊,注意它呢,它的功能呢,也是切割,所以呢这两个。地方,我用一个回调去解决这个问题。那给它隔开一点啊,我用一个回调去解决这个问题,注意啊这两个。那么用一个回调解决这个问题,我们到对应的GS里边啊,先把这些都关了来,嗯,把这些我们都收一下啊,都收起来。我们继续往下走,那接下来呢,我们定义的是呃,电液机。嗯,切割的,嗯。回掉,嗯,是他呗。因为你共用了一个函数啊,但是最终我们目的不一样,我们是要切换上一首或者下一首,所以呢,在点击的同时,我们必须要传一个标识进去啊,告诉我们接下来的任务,到底是要切换上一首还是下一首。
02:14
对了吧,那这样的话呢,来我们这儿通过ID去向世界对象的even的传参呗,啊那这样呢,传一个pre代表上一首,再来一个啊ID我们这儿来一个next代表下一首。那这样的话呢,在对应的这个英文的回调中啊,我们去获取一下这个切换的类型。啊,获取这个切割的类型对吧,Let一个啊,我们来个type,等于点current type.id是不是就可以了。没有问题啊,我们测试一下,打印一下这个态度。嗯,过来。来,我们随便点击一首啊,练习啊,我们进来。好了,那这时候下一首上一首没有问题了,对吧,那么现在呢。
03:01
点击切割的类型我们知道了,但是啊,我们想一下,我们现在呢,是在详情页知道我们要切割的类型,对吧。可是呢,在详情页,我们当前页面都有啥数据呀,你想想看,来到AP。我们只有当前歌曲的详情信息,只有当前歌曲的音乐ID。那还有is play。那其实这些东西仅仅代表当前的歌曲,跟我的上一首和下一首都没有关系。所以说在当前的页面。我们根本没有办法去。找到我们的上一首或者下一首的音乐链接。你想你要切换到上一首或者下一首,你是不是得要拿到上一首下一首的音乐详情以及对应的音乐链接啊?在这儿找不到。那么详情也找不到,谁有啊?
04:01
那页面有。的页面,你别忘了啊,我们这儿的音乐是从点击过来的呀。页面是不是有这个音乐列表的数组?你比如说我点击练习进去啊,假如说啊啊,那他现在应该第几个是这个对吧,下边为三的。是练习我要找他的下一首的话,那肯定是下标为四的这个哎,我别走对吧。哎,上一层呢,它也是一个道理。哎,那数据源在页面。那也就是说,他可以帮我们找到上一首或者下一首。那这样看的话,我们在详情页知道了切割的类型没用,我们是不是得将这个上一首或者下一首。交配到页面,他帮我们去找上一首或者下一首里面的内容。对吧。
05:01
找啥内容呢?你帮我找到上一首下一首的资源,你还得给我呀,因为我当前的页面有显示。大家想一想啊,我们当初我们详情页的数据都是怎么来的?首先我们是点击跳转过来,是不是传了个音乐ID。有了音乐ID,我们就能够拿到详情,有了音乐ID,我们就能够拿到我们的播放链接。所以啊,你只需要啊,比如说我们在练习这。那我让你找下一首,你只需要帮我把下一首的ID给到我就可以了,那剩下的我来处理。对吧,那这样的话呢,就涉及到啊,当我们点击的时候呢,我们要把这个类型传给。哪个页面传给每日推荐页面?然后每日推荐页面,再把对应的音乐ID回传给我。那这样的话呢,就涉及到页面通信。啊,两个页面通信,而且你看是在我页面不动的情况下,你比如说我这一点,我就要跟那个推荐页面通信。
06:08
哎,那两个页面如何通信呢?那那接下来呢,给大家说一下啊,小程序里边,那在第八章就在我的课件里边,重点知识汇总里面,其中有一张叫小程序使用NPM包。对,是他。那么在我们之前的小程序里边啊,它都不支持NPM,那么现在支持了,我就给他设计进来。嗯,那我们如何使用NPM包呢?对吧。啊,那首先第一步我们要初始化杰森。然后再执行后续的流程,这里啊给大家一个建议,如果说你不熟悉这一套流程,你最好是按照我的这里面的步骤来走。啊1234,如果说不按照我的这四步走,那么你很有可能会出现第五步带来的错误,啊,对应的错误截图我也给你放到这儿了。
07:10
好的。那现在啊,我们按照这个来写初始化这个package杰森。通过的命令呢,是n PM in。那在哪初始化呢?在我们当前项目的根目录。那来打开我的命令行,哎,我呢通过n PM in it去初始化啊,两种方式,你通过n PM in直接。去初始化阶层呢?他会挨个问你。报名用不用这个名称,那么当前这个名称呢,是我们当前项目的根目录。如果你要用,你就回车,你不用,你可以在后边再起一个新的苞米。注意,这个包名不能有中文,不能有大写。好的,那如果要用啊,你回车它会问你版本号要不要这个1.0.0,如果你要用啊,移动回车一直到avi OK yes,一婚车就好了,那这样的话呢,在我们项目就多了一个packet杰森。
08:13
哎,是他那么还有一种方式啊,看着。我先把这个删掉,既然刚才这个派杰呢是我们一路回车过来的,那我们还不如n PM in一个杠弯。杠弯的意思,这个弯就是yes的意思啊,杠弯就是一路yes来走一回车,那么它直接就帮我们生成这个拍点,跟刚才的一模一样。啊,是这样的啊,那现在我们说一下这个阶层的作用是什么。为什么要先初始化它?啊,注意啊,这个文件呢,是我们整个项目,或者说这个工程也可以叫这个包的说明书。
09:01
那么在这个说明书里面呢,会描述当前我们的项目叫什么,我们的版本号是多少,那以及相关的一些信息。而在这个里面必须的两个属性呢,是包名和版本号。你想你一个包。必须要有包名假设啊,我们写自己写了一个项目,我们最终呢,通过NPM呢发布了这个包。那么你发布的时候必须要有报名,否则的话你发布不了。这其一其二,假设你发布了一个没有包名的包,那么我们别人需要用你的包啊,比如说我n PM install,我要安装你的包,我后边是不是要跟你的包名,你没有报名,我是不是下载不了呀。那说明你这个包是个废包。对吧,所以name是必须的,那这个版本也是一个必须属性。那版本号为什么是必须的呢?你想你的项目你不可能是一成不变的,如果你的项目迭代,你的版本号是不是要随着升级啊,还有一点,那我们NPM来下载包的时候,你比如说我NPM一个叉叉叉。
10:12
我是不是有可能艾特他的包名啊,以及艾特他的什么,艾特他的版本号。比如我要下载你一点几的版本呀,二点几的版本呀,是不是都有可能呀。那你没有版本号不行啊。这个大家也要了解啊,那么除了这两个属性啊,剩下的我们不要都没有关系,就留这两个干净一点。啊,那初始化完这个以后呢,接下来我们要干嘛呢?来我们再看一下我的课件啊,在这里面第二步叫勾选允许使用NPM。在哪勾选呢?下边这我有一个截图。啊,一看到这儿呢,这个很明显的是我们的微信开发者工具。在这个里面呢,有一个本地设置。在本地设置这呢,勾选上这个模块。
11:01
那那这个时候呢,来到我们的开发工具啊,首先来到详情找到我们的本地设置啊,这里大家看我们需要将当前的这个选项给它勾选上。打个对勾。就好了。嗯,那截图这呢,没有截完整啊,我可以给大家截一个完整的图,好是这个注意啊,首先从详情这找到本地设置,然后把这个勾选上,那这个呢叫允许使用NPM。哎,那这呢是第二个啊,允许使用我们的NPM。对,那前面呢,给大家加一个什么,加个勾选来回车。把这个高血上完以后。我们再看下一步要干嘛啊,下一步其实就可以下载你对应的包了。啊,用NPM嘛,那肯定是我们去下载一个包啊,那这个时候呢,嗯。知道了,呃,我们前期的工作呢,我再给大家推荐一个包啊,再给大家推荐一个包啊,那这个包呢,对应的我们需要来到kind上面去搜一下这个包。
12:08
好的,那么我们接下来用用的包呢,叫pop萨啊,你回撤去搜一下啊,那这个包到底是干嘛的啊,我们待会儿来看,那么刚才我们做的工作呢,就是使用NPM包的一个准备工作啊,别忘了你需要去初始化你的pack杰森。对吧,以及你要在我们的开发工具中去勾选上允许使用NPM加上啊之前给大家分析的我们两个页面是不是要通信呀。好的,那这节课呢,我们先讲到这里啊。
我来说两句