27. 尚硅谷_微信小程序_发送ajax请求实现数据交互.avi原创

OK，现在我们要专注的去整这个电影频道啊，那这个时候呢，有一点不方便的是什么，大家看我一编译的话，它是不是上来，或者说写中的是list呀，那是因为啥，List是不是在最上面呀，那现在呢，我可以把这个movie呢调到最上面，OK，那这个时候我让它重新编译的话，它就到电影频道了，哎，首先我们把这些都关掉，然后呢，找到movies这个配置文件在这我要换一个东西啊，它这个头部我们可以不用它，不用它，那这个时候呢，我们来到这个拿过来，来到他的配置文件里面，这应该叫电影那频道。白色。没有问题，那么接下来我们去写一下里边的这个结构吧，来，首先来到这，先把这个就拆掉了，拆掉了以后我们专注的去看这个，来，我把这个也打开。首先把模拟器关掉啊，这样大家看的比较完整一点，来调试器也关了它。

OK，那现在在这呢，我先整一个没有OK，那这个其实我们写这个页面主要是练习一下如何去发请求，因为小程序里面它很多数据都得发请求码过来，但是呢，我们还是得先去搭一个静态的结构，大家看一下这些结构是不是都一样啊，所以其实我们写一个就够了，来来就看第一个吧。首先他这个上来这是横向布局了。对的吧，这是不是一个，这是不是一堆这一个，哎，那这个时候呢，我们可以上来，它应该先是一个image，没问题，那这个时候呢，我先去找一个静态的图片去代替一下它，呃，找一个什么呀，Index下边的car.jpg啊，我先去去找一下它，OK，那还有一个中间这是三行三个文本，所以呢，我们在这text，嗯，来这个吧，霸王别姬。

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

这呢也来一个，那这个呢，就叫它movie。啊，下边这一个。叫什么呀？Detail是吧，可以。DT是他那这个霸王别姬啊，这个直接就是内蒙，或者我们统一一下，那就是Mo movie为电影的名字。Class，那这个呢，是一。年份、导演。Class。Movie。Director CTO是吧？Drto来还有什么这个。哪个省了DR？

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

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

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

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

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

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

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

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

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

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

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

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

我们可以这样去写images下边的它CTRL保存一下，先看看头像对不对。嗯，Image，这拼错了，Ages走。还有什么问题啊，这是没写完是吧，那我们找吧，那么。那个是电影的名字，那这个好找，直接找一个东西，这霸王别姬吗？所以呢，我们可以把这个放进来，还有什么年份，年份的话，93年一。导演。找一个叫陈凯歌的人。首先大家要注意啊，这是一个数组，你说为什么是数组？

因为你会发现好多电影它有导，导演有好几个。嗯，什么导演谁谁谁，嗯来，那既然它数据格式这样的，那我们只能这样了，首先先是一个数组对吧，因为它只有一个，说先许下标为零啊，那么接下来还要找谁呢？它下面应该直接是一个name吧，啊OK，整过来最后一个RA，这个上面应该也是叫RA，找一个东西叫评分，哎，Reading下边的average是道吧。拿过来。OK。这不就出来了吗？呃，但是呢，有个问题啊，我们应该是给他加一个这个分界线才对，要不然这样给用户的感觉太乱，OK，来到我们的样式这，给它加一个，这应该是bottom epx solid，然后来个井号11CTRLS保存一下。

这不有了吗？那么接下来看一看有没有什么问题。下面这些看着好像都挺正常的是吧，看这一个。哎，为什么会出现这种情况呢？因为这个电影名字太长了。我这本身的宽度就70%，你放不下它是不是自动换行了，遇到这种情况怎么办？我们应该不让它换行，并且呢，超出的部分用点点点代替。怎么写，我先找到这个name是他首先不是让他换行怎么写。不换行。这太智能了，他都知道我要测这个。

是它吧，Right space等于no RA，这是不换行，那不换行的话肯定进入超出的部分了，那接下来我们是不是应该把超出的部分隐藏掉，Overflow heaven，好，那现在写到这一步，它是一个断崖式的，就是说到了这我们后边直接就切断了吗？你是不是还得用点点点代替啊，Text overflow，为什么？OK ctrls保存一下。这是不是有啊，如果说你觉得这个长的话，你都可以单独的给他再去加一个宽度，你不来个70%。这不说到这了吗？啊，这只看以后的需求，人家说你写到哪你就写到哪，嗯，那这个呢，我们就整的差不多了啊，其实主要是列一个发请求，那这个时候给他说一点小的知识点，在小程序里边发送请求，并发网络请求的数量被限制在最多五个，什么叫并发量呢？就是同时发送。

就说你最多能发五个请求一次。嗯，这个我们要注意，因为啥有时候你没注意的话，动不动就去发请求，你比如说我上来同步想要发20个，你会发现有后边有15个根本发不出去。啊，不是你写错了，是人家这有限制。四。再有一个就是说小程序里边最多应该是能发20个请求，现在我不知道改没改啊，因为他一直在变，就是说你在里面最多发二十二十条不同的请求。同样的道理，在小程序里面开发的时候一定要注意这些限制啊，不要超出人家的限制。OK，那我把这个停一下。