豆瓣评分小程序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、效果图
在这里插入图片描述

六、结尾

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

有任何问题的话,欢迎各位指出~ ヾ(◍°∇°◍)ノ゙

猜你喜欢

转载自blog.csdn.net/MODAX/article/details/122924062