豆瓣评分小程序Part-3

一、主要内容

主页面“影院热映”、“近期热门剧集”、“近期热门综艺节目”模块真实数据实现（把我们原来人为写的死数据通过API接口变成活的）

影院热映效果图：

二、wx：key

1、调试器警告
在我们完成 豆瓣评分小程序Part-2 之后，可以发现调试器跳出黄色警告，让我们在stars.wxml渲染星星图片的同时加上wx：key这个属性来提高性能

好的，现在压力来到wx：key，可以查看 微信官方文档中列表渲染下的wx：key，也可以简单看如下图，换句话来说就是提供一种关键字，证明它是独一无二的，不会被动态改变，目前可以理解为我们的身份证，一人一个

这里不妨采用第二种方法，加入*this来避免警告

2、网址使用警告
在咱们没绑定相应网站上线小程序时，这些网站是被认为不安全的，所以提前在本地设置中勾选这一项

三、单布局实现

1、API接口
在主页index.js文件，onLoad（）函数中我们进行编写
创建that变量方便我们使用Page页面当中的数据
wx.request（具体查看微信官方文档-wx.request）向网站发起请求，默认会让我们加入url，这里填写API

①API？具体查看微信官方文档-API，就是一个接口，咱们需要用它去获取真实存在的数据

②(；д；)这里的API网址是别人提供的，这里不做分享
success（）表示成功请求到，里面的res是随便给的值

2、搜索数据
我们发现subject_collection_items是我们需要的数据（图中标的是另外一项，让大家知道data里还有别的东西）

3、定义movies变量
我们将res.data.subject_collection_items的值赋予movies，简便书写

4、保存数据
将获取到的信息保存在data中

5、index.wxml文件布局
当时复制了四份咱们可以都把它删掉，保留一个即可，在导航一行中加入wx：for渲染movies这个列表，而movies是有五组值的，所以这里会重复五次。wx：key相应的设置为默认项的标题

6、index.wxml影院热映布局
将原来人为设置的封面地址、电影标题、电影评分分数进行修改，这样的话其他数据就能通用了

四、整体布局

1、首页index.js文件
我们再考虑热门剧集和综艺节目的数据，只需要将影院热映中wx.request复制，进行API和变量名的修改即可（热门剧集：tvs变量；综艺节目：shows变量）

2、index.wxml文件
相应的，我们在首页wxml文件中添加这两个新增的模块（从modelGroup开始复制）再进行对应修改

五、效果图

1、效果图1

2、效果图

六、结尾

本次我们实现了主页面的基本布局，下次我们将进行相应的优化

有任何问题的话，欢迎各位指出~ ヾ(◍°∇°◍)ﾉﾞ