28. 尚硅谷_微信小程序_电影详情页完成.avi原创

来我们接着上节课来讲，那么上节课呢，我们把这个列表，电影频道这个列表页面呢，我们整完了，那么这节课呢，我们要做哪一个呢？就是从这个点击我可以跳转到电影详情这个页面。OK，那首先要整这个呢，我先去还是一样的道理啊，把这些收起来，那么在这呢，我要去整一个目录，嗯，这个呢，我们叫它什么呀，叫movie啊detail OK，呃，然后呢，在这个下面对应的我们去创建个页面啊，就叫它movie掉，页面有了以后啊，我们要去进行，首先我们点击这是不是能跳转到这个页面才对啊，我们之前是怎么做的。跳转页面怎么跳转，哎，对，咱们是不是用的一个API叫navigate to啊啊，那是一种方式啊，现在再给大家去介绍一种方式来，呃，来到我们这一块往下翻一下，这注意啊，我现在是在组件里边，那么下边这有个导航有个组件叫navigator。

哎，这个组件呢，也可以帮助我们去跳转页面，那下面呢，其他的大家可以去看一下，我先说一下这个，这有个URL，这个URL对应的就是在小程序内的跳转链接，说白了需要你给他一个路径，那这个navigator怎么用呢？我们来到movies的结构中，按理按我们之前写的，我是不是应该给他们去绑定一个。点击事件，然后navigate to直接跳转就行了，那那这个时候呢，不用大家可以看着。我呢？把这个view换成navigator。

Navigator，然后我在这去写一个东西叫URL，这是不是需要一个路径啊，首先这个路径呢，它是叫什么呢？叫movie detail啊，然后下边也应该是它，哎，前面是不是少一个，你比如我们应该还有个叫pages吧，我就写到这CTRLS我们去保存一下。来，随便找一个霸王别姬。你会发现它就好了，那这个其实在某种意义上说，它要比我们之前用那个name to要简单的多吧，哎，你也不需要绑定什么点击事件。OK，这是第一步，那我们来到这个movie detail，我直接来到GS。首先我们从上面这个跳转到这个页面的时候，你是不是应该给我一个标识啊，为什么说要标识呢？

大家看我不同的电影在点击跳转进来的话，它这显示的内容是不是不一样的呀？啊所以呢啊，我们需要传一个标识进去，那这个传标识传到哪还记得吧。这是不是有个options呀，来我们之前是通过点击事件那种方式传达，那么现在这个更方便，你直接在它后面写，比如说我这写个index等于。注意等于的后面是是不是一个变量，哎，那这个时候你得用它，这很方便啊，直接写index。那这写好了，以后我在这呢，去这个。来，我们打开调试器，来到console log，这那这个时候我点击一下。大家看是不是直接传过来了，哎很方便，哎这种方式呢，我们也要知道行，把准备工作做好了，那也说接下来我们就顺着去写什么呢，写它里边的结构，来写这个结构，来看一下这个结构呢，比较简单，比较简单。

诶。来这些就不要了，我们把模拟器也关掉它首先上面我用，那来一个image，在这里面呢，我们先整一个src，好，那这个呢，我还是去找一个静态的图，先去代表一下image下边index下边的part.JPG。这是这个大图，那么接下来再往下，这应该有个text对吧，我们就来个霸王别姬，再往下这有三项内容啊三项内容，所以呢，我可以去给他一个view，那么在这呢，都是text，呃，首先有个呃评分复制一下。

三个，嗯，那这个呢叫导也再往下主也啊，其实应该来说是都给人加一个，哎冒号是不是才对，嗯，加空格没问题，那这个再往下是个button啊，这个是我要欢迎结构就出来了，然后呢，给他们一些类class，那这个呢是movie，嗯，Detail。这个。Class，那这其实我还能叫到什么？我们这样起吧，Movie image都用下划线。class，那这个呢，是movie name在这呢，来个movie detail。

没问题，那么接下来再往下这个button，因为它就一个button，我就不需要给它设置内都可以，OK，那这个时候我们来到对应的样式文件，首先第一个先拿到这个容器上来，来在这display flax，然后呢，注意他这一把什么纵向的，所以呢，我们在这应该是flag direction啊。然后有没有发现它是居中的啊，其实在这个时候呢，我们可以怎么写is center，嗯，没问题，来打开我们的模拟器看一下。出来了吧，那么接下来我们去调一下下面这个我们叫它啊image，那这个图呢，它应该是宽，我直接就写了70%。

啊高的话大概是700RPS。就这样嘛，然后呢，给他来一个market，你把上下来个多少啊。来个22PS左右呢，其实不用设，嗯，来再来一次吧，就让他每次点一下吧。差不多吧，主要这个图跟人家这个比，没有人家那个好看，我们再往下的话还有什么，接下来我们有一个叫movie name，嗯，好，那首先呢，我给它来一个这个字体颜色，哎，Fo size，我们来个40RPX，然后加粗一下。OK ctrl s保存一下。霸王别姬。

对的吧，那么接下来这三项，它因为它是纵向排列的，所以呢，我可以怎么写movie detail，对f flag，那这个呢，是flex没问题吧，啊这还是没法点击的时候稍微有点烦，那怎么办？把这个东西提到上面去。背一下，嗯，出来了，出来了以后大家看一下啊，它这个是不在中间啊。在中间啊，那怎么整啊。按理来说，我们是不是应该让它靠左边一点，那我们可以用什么？你们想说什么就水平位移是吗？其实我可以往回拉一下就完了嘛，对吧，我们来一个多少呀，嗯，百分之拿百分比。

哎，这个应该是用什么呀，哎，对。都可以，其实方式还是有很多的，那这个。40。差不多在这儿，然后这个字体大小吧，这个有点大，呃，我们可以让它稍微稍微小一点，你比如来个32R PXCTRLX变一下。这不稍微小一点吗？后面现在没有数据啊，没有数据，待会我就不写数据了，因为待会儿这儿的数据啊，我们待会要动态的，是不是填充一下，嗯。还有什么呀，还有一个8OK来，那这个时候我们给他来一个宽度吧。这个巴特你也可以去让它大一点，高的话是80RPX。

我们再来一个background background的话可以来个绿色。还有什么那个字黑色的太丑，井号FF，没问题吧？信息的同学可能发现了他这个文字偏下了。对吧，我们肯定是想让他是吧，水平居中啊，哎，那这个时候来个80。嗯，靠上一点没问题，如果说你还想，那和上边这个是不是有点距离比较好一点。让他这个往下移一点，嗯，大概就这样，而这个有点还是有点我感觉。来个50吧。嗯，差不多OK，那接下来那这个进程写完了，我们无非不过就是要把数据是不是渲染进来，没有问题，那这个渲染数据你说我应该怎么做。

哎，我听到有同学说了再发一个请求，其实在这你最好不要再发了。如果你确定了我当前这个小程序里面就发过一次，那你再发无所谓，我刚刚给大家提到过，我们说它那个小程序里面它有两个限制，第一个是请求的总数是不是有限制啊，第二个是你的并发量有限制，那万一你其他的地方还要发请求呢？所以说这个能省就省一点，因为再发一次请求，无非不就和我们之前这个请求是一模一样的吧，然后你通过下标是不去取数组里面的每每那个某一项啊。那现在既然这有这个数据了，这不是这个数组吗？我们就不要再发了。也就我们能不能用现成的呢，可以因为啥你最终是不是通过那个电影列表跳转到这个页面的，那我在电影列表是不是已经拿到这个数据了。

那怎么整？在哪查？啊，有同学说，呃，你有有没有同学想的是在这儿传呀。我这是不能传下标吗？那为什么不能传这个东西呢？还是谁啊？你这不是遍历数组吗？Item是不是正好是我想要的对象啊，我希望大家能想到这一点行不行再说行不行再说，那这个时候来到AB杰森，我呢，把那个位置拎下来，CTRLS保存，哎，把这个逗号去掉。注意看，我现在要从这边往过跳走。这是我传过去的。

为什么会这样呢？对，就是你传的是一个对象放进来，这它会自动调用to string方法是不是转成字符串形式了，所以那在这儿不行，那我希望大家能想到这一个，那你下边有了，刚刚刚我们是不是用过这个东西啊。哎，他两个页面是不是都能看到这个里边，那也就是说在我们movie里面上来，我拿到数据能不能交给APP。然后再详情页是不是再取一下，哎，那这个时候呢，我们来一个吧，Move上来是不是没有啊。那么接下来在电影列表的GS。大家看在这我是不是拿到了数据啊。我除了要更新自己页面的那个data塔的时候，我是不是应该把那个数据放到APPGS里边，哎，那这个时候在上面应该你是不先拿到那个APP的数据，Let一个APP啊，等于什么get APP调用对吧。

那接下来怎么去写呢？就比较简单了，ABB data塔，它里面是不是有个data塔点movie等于谁呢？就就这一对。对了吧，哎，从进去了以后，那你在。它的详情里边就是movie detail里面能不能拿出据呢？那肯定能，所以在这是同样的道理啊，是不是上来还是先拿到这个东西啊？那我就直接放到这了，注意我在这是不是也引入它了，引入了以后这个数据有了，我们可以去lo看一下。APP来cons保存一下。

找我们的details，大家看一下这个。这不第三行吗？是不是正好是我打印的，来看一下这个对象里面。把它点开这儿是不是有一个内。莫斯里面有数据吗？这不有吗？不正好是那个数组吗？数组有了以后，那么接下来我们界面想要数据，那肯定是在这了末。就叫它detail，那你在lo的时候是否下标，在这能不能取到下标，可以吧，下标也有了，数字也有了，那我就可以做一件事情，点set data塔，那在这里边我们要更新的其实就是它啊，那这样的初始化应该是个空对象，那么接下来在这应该取的是什么呢？AB是点它下面是不是有个movie，然后怎么取option，是不是对象里面有一个属性叫什么啊index。

来重新编译一下，我让他跳转到这个详情页，我们来到APP data里面确认一下有没有。是不是有数据了？哎，里边有15项嘛，我们可以展开，那其实剩下的工作就特别简单了，在这首先这个大图不能用它了，嗯，在这呢，我们叫它看movie detail点我记得没错的话，应该是为下面的，哎，有个large是他吧。我们可以在这看一下。这不是他吗？嗯。还有什么霸王别姬，嗯，那这个我们可以把这个先拿过来，对象对象点谁呢？霸王别姬这个其实我们之前也拿过它。

呃，应该是这个。对了吧，这个内嘛，嗯，还有什么评分，呃，评分的话在哪呢。这一对。这一针拿过来，我是不是得把这个对象换成它，倒也咱也有吧，导演的话是哪个是。哎，这一个。拎过来前面给它加一个对象，哎，上边呢，之前没有什么没有主演，那这个主眼我们去看一下。霸王别姬找张国荣他们。嗯。三个。这不有个数组吗？数组里面的每一个对象下面是不是有个内吗？哎，这个呢，如果说你写的严谨一点的话，你说我应该怎么去做这个主演，我看了一下他这个豆瓣为我们提供这个数据啊，他不管哪个电影。

上边列的这个都是三个。都是三个，那我们前提知道了，上边主也是不是有三个，那这个时候其实我可以直接去取一下，你比如说我能不能先找到这个数组，能找到，然后数组下边零，这是不是第一个对象啊，点一个name，那剩下的这些你就可以去干嘛复制一份，我只需要说把这个换成一。这个换成二呀，嗯，但是做的严谨一点是啥，你不知道主也有几个的情况下，你这应该再去遍历一下。因为便利的话，它有几个，咱是不是写几个呀，来CTRLS保存一下。呃，肖申克的救赎，来看一下这个。这个电影大家看过吗？看过是吧？

现在数据拿不到，我们看看他这边是不是也没有报错啊，没有报错，那我们来看一个东西，APP data，这是我这的叫movie de。这不是吗？呃，你说哪的问题啊，是我们在GS里面，在这我应该是取这个。T，嗯，同样的，下边这个是不是一换就好了。对的吧，但是有问题，有什么问题啊，你可以看一下他这个刚刚那个的问题，诶我这好像丢了个东西一样。它是不是左边有个样式不对的啊，当然了，这个时候呢，我们来到这，我们刚刚这是怎么去写的这个呢，是不是Mar left呀，我们先把这个撤掉它。

撤掉它，我们随便进来一个。你说为啥好了，它自动居中对吧，居中是整体的内容是不居中啊，我们刚刚为什么在这我说有点丑啊，因为内容是不是只有这点东西啊，评分嗯，行，那这个我要观影，这就咱们实现不了，其实在小程序上面，你是呃，你们小程序的游戏应该玩过，或者是一些小程序的功能，它上面是不会主张去给你发视频的。啊，所以说在这儿通常来说看不了啊，有的像有的那个他怎么去做呢？这这个我要关于可以点你一点的话，通常是跳转到他的公众号平台。在那去看。嗯，或者说直接直接就是访问人家那个官网，他不可能在小程序里面去给大家去放这个东西。

OK，那这个呢，是我们想起的这个东西。