26. 尚硅谷_微信小程序_发送请求.avi原创

OK，现在我们要专注的去整这个电影频道啊，那这个时候呢，有一点不方便的是什么，大家看我一编译的话，它是不是上来或说写中的是list呀，那是因为啥，List是不是在最上面啊，那现在呢，我可以把这个movie呢调到最上面，OK，那这个时候我让它重新编译的话，它就到电影频道了啊，首先我们把这些都关掉，然后呢，找到movies这个配置文件在这我要换一个东西啊，它这个头部我们可以不用，它不用，那这个时候呢，我们来到这个拿过来，来到它的配置文件里面，这应该叫电影那频道。白色。没有问题，那么接下来我们去写一下里边的这个结构吧，来，首先来到这，先把这个就拆掉了，拆掉了以后我们专注的去看这个，来，我把这个也打开。首先把模拟器关掉啊，这样大家看的比较完整一点，来调试器也关了它OK，那现在在这呢，我们先整一个，不用OK，那这个其实我们写这个页面主要是练习一下如何去发请求，因为小程序里面它很多数据都得发请求码过来，但是呢，我们还是得先去搭一个静态的结构，大家看一下这些结构是不是都一样，所以其实我们写一个就够了，来来就看第一个吧。

首先它这个上来这是横向布局了，对的吧，这是不是一个，这是不是一堆这一个，哎，那这个时候呢，我们可以上来它应该先是一个image，没问题，那这个时候呢，我先去找一个静态的图片去代替一下它，呃，找一个什么呀，Index下边的car.gpg啊，我先去去找一下它，OK，那还有一个中间这是三行三个文本，所以呢，我们在这text，呃，来这个吧，霸王别姬。

只有下面这个，可能有同学说没看过，这个比较老了。呃，年份里边的文字我就先不写啊，写一个也行吧，他应该是九三年。嗯，你是不是还没出生啊导演。王远建的老大陈凯哥，那么再往下，下边单独有一个版本text，那在这呢是一个评分啊，给他个9.6 OK，那这个结构就搭好了，接下来开始给他去添加一个类class，那这个呢，我们叫它movie，然后呢啊T。这儿呢也来一个，那这个呢，就叫它movie。

啊，下边这一个。叫什么呀？Movie detail是吧，可以。DT是他那这个霸王别姬啊，这个直接就是内蒙，或者我们统一一下，那就是Mo movie伟电影的名字class，那这个呢，是一二年份导演。Class movie director是他吧，DR来还有什么这个？

Director。对，是这样是吧，嗯，那这个评分用什么呀？是你们没有项目里面那个吧，来吧，我就它吧reading OK OK，那这样的话，我们的类咱们整的差不多了，那接下来我们开始去整它的样式，来把样式表打开，那首先第一个。先给大家讲一个吧，嗯，Play black先在这放着，然后你看它外边是不是有个外边距啊。那这个时候我们可以给它加一个T，我们来20个RPX，哎，把这个整完，那么接下来我们要去整那个movie image，嗯，在它这儿，首先它肯定有个宽高，这个没有问题，来我们看一下它的宽高。

64乘以64，那也就是说我这需要整个128高的话呢，也是。嗯，OK ctrls保存一下来，我们打开我们的模拟器。出来了吧，呃，然后大家看啊，我这这三个相当于是内联元素一样，他们是不是横着去排列的。那人家这个是不是很明显是纵向的，那这时候怎么办啊。其实给大家说一下啊，我们那个能不能嵌套。就是说咱让它最外边是不是一个flex啊，那我能不能再让这个盒子它也是一个flex可以，哎，所以呢，我在这display flex，只不过这一次的flex direction是什么呢？它是个纵向排列啊来我CTRLS1保存，大家看一下。是不是竖直下来了，然后大家看这个平分的话，始终是不是在右侧，哎，那我们可以怎么做呢？你比我给它设置一个宽度。

OK，比如说来个70%。懂我的意思吗？他70%的话，那剩下那个9.6应该是在这一侧才对，嗯。OK，那还有什么，那这个东西因为和左边是不是离得太近了啊，离得太近了怎么整mark left，我们来个十个RPX看一看。好像有点。来20万。嗯，差不多了，嗯，接下来我们去整一下里边这些东西，第一个我们叫它movie name对吧？对，这个是下划线name啊，这无非不过就是给它设置，设置一些什么字体颜色，这个应该是32，然后呢，我们color的话是井号000000，是不是黑色纯黑，嗯，第一个小零零，那么接下来我们再往下还有什么啊，叫movie，呃，这个应该是一，哎，中间那个字体呢，相对来说小一点，所以说在这呢，我们来个28RPX这个卡应该是井号666。

嗯。来，还有一份这个呢，叫他ecr。这个井号。666也是中，还是三和三的中，三和三中吧，OK，没问题，这个应该是30的像素，CTRL保存一下，我们看一下，哎，大概跟这边差不多，嗯，差不多，呃，现在我们还有一个要做的是他们这个是不是有边距啊啊，那这个可以怎么写，我可以直接在中间这个去给它加个market，你比如说我们来个8RPX，那左右的话我们是不需要的，给它加一个零，就中间这个上下加个半边距，是不是把它俩推开了。

嗯，没问题，最后还有一个评分，那这个评分的话，我们叫它V啊，在这儿呢，首先我们来一个啊，这个呢你就得大一点，然后呢，最起码它有colors红色，然后呢，再来一个fo位，就加粗C保存一下。哦，前面是不是少一个他。没问题吧，哎，这个结构搭好了，其实接下来我们要做的就是去便利这个数据，遍历这个数据，那么这节课我们重点要来学一个如何去发请求来找到API，其实上来第一个是不是就是网络呀，点开。

这不就是它吗？发送网络请求啊，其实能传的东西还是挺多的啊，传的东西是挺多的，我们现在先用一个首先URL，就说必须要用，首先这个方法特别简单，那叫request，来，来到当前页面的，我们找一个东西叫GS文件。发起就想都没想，应该在这发对的吧，哎，请求的地址在哪呢？我得去我这个写好的里面找啊，这是在网上找的一个豆瓣他公开的一个地址，嗯。因为咱们是没有自己的服务器嘛，现在哎有豆瓣了。是这个你们也可以自己去找一个啊。那来到这，我呢，先把这个地址拎过来，这不这个URL吗？好URL有了以后，哎不对。

开的多了就老容易串，这不有了吗？那么接下来我们在这我去微信点request，他一回车是不需要URL，那这个时候呢，我把这个整过来，而现在我们其他的其实暂时不用我，但是我得用一个success，你请求是不是要在成功的回调里面拿数据啊OK，那这呢，我去整一个data，接下来我去conso.log这个data。CTRLS保存一下，打开调试器来，那这个时候大家注意一下。是什么意思啊？他说你发请求的地址是么？不在一下子合法域名列表中了。对。那这个时候哎，我来到我们的课件，我给大家说一下，发起图的话，就这一个套路，那么小程序这个设置，这我有个备注，小程序出于安全考虑呢，他要求你发的请求都是HTTBS协议的。

相对于安全。而我们刚刚这个请求是什么HTP请求对吧，那怎么整哎，这个时候教大家如何去配置来来到全屏，这注意这有个详情。有没有发现这有个选项啊，不校验这个安全域名，就是我勾选上它，不让它去检测我的域名是否安全，来选中它，注意他重新编译了一下这一版，不报错了，而且数据已经拿到了，这我拿到了，这不request OK吗？OK，但是上面这是不是给你一个警告呀，哎，给你一个警告。好，那这个数据拿到了，在这看不方便啊，我可以让浏览器帮我去发一次请求，我把这个地址拿到这发一个回车。

嗯，TOP250，其实这个一共是20个，嗯。20个我们要拿的这些数据呢，是在这个对象下边的subject里边啊，在这个里边，注意这个里边都是一个一个的对象，一个对象对应的是一个电影里面的详情，那比如说第二个我们找一下第二个对象。嗯，这不第一个吗，美国。嗯，那个诶他这个顺据摆在这，我想找一下张张国荣这个就是霸王别姬这个吗。嗯，这是我们刚才看到那个第二个，那现在数据拿到了，其实就好好整了，我呢在还是在这个data中啊，先去做一些工作，比如说我们来个movie是上来是么？一个空数组啊，那么接下来你拿到数据在这去更新状态值，ok.set data，那么在这movier。

怎么取，注意看你别搞错了啊，这个贝塔本身是不是对象，它里面是不是又分装了一层对的吧，所以我这应该是点贝塔，点它还不够，你要取的肯定是一个数组了。是它吧，哎，所以呢，我是不是应该点它呀，CTRLS保存一下。我们来到APP。进来了吧，这不数组吗？那数组有了，接下来我们就要操，呃，考虑如何去操作这个数据，你现在是不是要变利啊，注意，现在我们要变历生成的个体是它。

对吧，所以你得干嘛对在它的外面呢，再给它套一层啊，那这时候我们选中它，让它缩进一下。哎，这个缩进它只能这样吗？走。嗯，OK，那现在这个我们又套了一层，套了一层把这个也缩新一下，没问题，我们是不是要在这变量微信冒号放，哎，在这要变历的是个变量，所以呢，我得给它加一个它要变利的数据。叫movies，然后呢，为了提升性能，它是不是让我们去加一个K，这对应的，哎，注意这应该有个引号，里边是PO1X呀，CTRLX保存一下，打开我们的模拟器看一下。

这有20个霸王别姬，对的吧，嗯，没有问题。OK，那接下来我们就动态的去取数据，取数据先来看这一个，这是什么。Item点，首先这应该是电影的这个图片是吧？那既然我们要取数据，下边应该都是动态的，所以呢，我会把这些都换掉。那省得待会儿一个一个去拼它，先来找这个电影的图片，我们可以在这儿去找。呃，就看这个霸王别姬的图片，应该是他，我可以给他打开一下看一下，就这个。嗯，就是这个图，OK，那怎么去找呢。这的结构有点乱，我给你把上面这个收起来。呃，这是一个对象对吧，对象下边我们要找到images下边的large，哎，所以呢，在这我们可以这样去写images下边的它CTRL保存一下，先看看头像对不对。

嗯，Image，这拼错了，Ages走。还有什么问题？那肯定是我数据错了。RMAGE。这不对的吗？啊，这是没写完是吧，那我们找吧，内蒙。那是电影的名字，那这个好找，直接找一个东西，这霸王别姬嘛，所以呢，我们可以把这个放进来，还有什么年份，年份的话，93年一。

导演。找一个叫陈凯歌的人。首先大家要注意啊，这是一个数组，你说为什么是数组？因为你会发现好多电影它有导，导演有好几个。呃，什么导演谁谁谁，嗯，来，那既然他数据格式这样的，那我们只能这样了，首先先是一个数组对吧，因为他只有一个，说先取下标为零啊，那么接下来还要找谁呢。它下面应该直接是一个name吧，啊OK，整过来最后一个reading，这个上面应该也是叫reading，找一个东西叫评分，哎，Reading下边的average是他吧，拿过来。

OK con。这不就出来了吗？呃，但是呢，有个问题啊，我们应该是给他加一个这个分界线才对，要不然这样给用户的感觉太乱，OK，来到我们的样式这，给它加一个，这应该是bottom e PX solid，然后来个井号11CTRLS保存一下。这不有了吗？那么接下来看一看有没有什么问题。下边这些看着好像都挺正常的是吧，看这一个。为什么会出现这种情况呢？因为这个电影名字太长了。我这本身的宽度就70%，你放不下它是不是自动换行了，遇到这种情况怎么办？我们应该不让它换行，并且呢，超出的部分用叠叠点代替怎么写，我先找到这个name是它首先不让它换行怎么写？

不换行。这太智能了，他都知道我要撤退。是它吧，Right space等于no RA，这是不换行，那不换行的话肯定就有超出的部分了，那接下来我们是不是应该把超出的部分隐藏掉，Overflow heaven，好，那现在写到这一步，它是一个断崖式的，就是说到了这我们后边直接就切断了吗？你是不是还得用点点点代替啊，Text overflow，为什么？OK ctrls保存一下。这是不是有，哎，如果说你觉得这个长的话，你都可以单独的给它再去加一个宽度，你比如来个70%。

这不缩到这了吗？哎，这只看以后的需求，人家说你写到哪你就写到哪，嗯，那这个呢，我们就整的差不多了啊，其实主要是列一个发请求，那这个时候给他说一点小的知识点，在小程序里边发送请求，并发网络请求的数量被限制在最多五个，什么叫并发量呢？就是同时发送。就说你最多能发五个请求一次。嗯，这个我们要注意，因为啥有时候你没注意的话，动不动就去发进去，你比如说我上来同步想要发20个，你会发现有后边有15个根本发不出去。啊，不是你写错了，是人家这有限制。再有一个就是说小程序里边最多应该是能发20个请求，嗯，现在我不知道改没改啊，因为他一直在变，就是说你在里面最多发二十二十条不同的请求。

同样的道理，在小程序里面开发的时候一定要注意这些限制啊，不要超出人家的限制。OK，那我把这个停一下。