前后端交互

首先启动服务器

1. 根目录下执行： npm start
2. 服务器地址： http://localhost:3000
3. 示例: http://localhost:3000/banner

测试接口能不能用

 

 发起请求

看接口说明，在wx的load函数中发起请求 

 

请求成功 

封装请求功能函数

根据我们的需求封装一个请求功能的函数

然后引入并使用它

修改代码，使用promise拿到request返回回来的数据

  但是每次请求都带有http://localhost:3000,带冗余了，修改代码

最笨的办法就是用字符串拼接的方式，当然为了减少冗余，我们可以写在.js上

 在这里说明一下promise 中的resolve参数和reject参数

new promise初始化promise实例的状态为pending

resolve修改promise的状态为成功状态resolved

reject修改promise的状态为失败状态rejected

列表渲染

这样就能访问到图片资源

然后就在小程序中循环遍历这个数组

 注意这里有一点不同的是，在vue中我们需要item.id，而在微信小程序中我们可以直接点出来这个属性 

推荐歌曲动态实现

就是把下面的也修改为列表渲染

查看接口文档

 拿到的这个数据

 

自定义组件 

我们观察发现这俩部分很相似，为了代码的复用性，我们可以封装成一个组件

Component(Object object) | 微信开放文档 (qq.com)

 

文档说明 

然后把之前写好的抽取出来

 然后去复用

 

为啥上边能用，而下边不能用？

 因为我们之前写的样式，自己写的小问题 问题就出现在这里，我们需要去指定高度。

  在组件中定义一个props属性，然后把值传进去 

排行榜静态搭建

对排行榜的静态搭建 

排行榜数据动态显示

 

 需求分析

1.需要根据idx的值获取对应的数据

2.idx的取值范围是0-20，我们需要0-4

3.需要发送5次请求

在这里说一下前++和后++的区别

1.先看到的运算符还是值

2.如果先看到的是运算符就先运算再赋值

3.如果先看到的是值那么就先赋值再运算

说一下这里为什么要使用slice而不是使用splice。这是因为splice会修改原数组，可以对指定的数组进行增删改，slice不会修改原数组

 渲染到页面

 但是有一个小bug,歌曲名太长，文字都到下面了。因此我们要去设置歌曲名

 而我们这种写法会导致，网络加载的时候是白皮（没有加载出来），因为我们发起的5次请求不是并发的

 

 而放在这里不需要等待5次请求全部结束才更新，用户体验较好，但是渲染次数会多一点