学子影院项目实践
https://api.tedu.cn
搭建项目的基本结构
- 新建项目。
xzyy
。 不使用模板。不使用云服务。 - 搭建项目的初始化结构。3个底部选项卡:
index
theatre
me
。- 准备3个页面:
index
theatre
me
。 - 配置
app.json
,管理:pages/window/tabbar
等配置项。
- 准备3个页面:
- 微调样式。
加载首页的电影列表(热映类别)
-
了解加载电影列表接口:
说明 请求地址 https://api.tedu.cn/index.php
请求方式 GET
请求参数 cid
:1
用于传递电影类别的ID
, 热映id=1 待映id=2 经典id=3offset
:0
用于传递读取数据的起始位置下标返回结果 返回电影列表。符合类别的要求( cid
),从offset
位置开始向后读取20条电影信息。每页20条: 热映类别下,从下标0开始向后读取20条(第一页) https://api.tedu.cn/index.php?cid=1&offset=0 热映类别下,从下标20开始向后读取20条(第二页) https://api.tedu.cn/index.php?cid=1&offset=20 热映类别下,第三页的第一部电影的名字: https://api.tedu.cn/index.php?cid=1&offset=40 待映类别下,第四页第二部电影的名字: https://api.tedu.cn/index.php?cid=2&offset=60 经典类别下,第二页第二部电影的名字: https://api.tedu.cn/index.php?cid=3&offset=20
-
重写
index
的onLoad
生命周期方法。当初次加载index
页面内容时,发送https
请求。加载热映类别下的首页文章数据。 -
获取数据后,渲染列表即可。
实现顶部导航的切换
- 完成点击顶部导航项后的样式更新。
- 在
data
中声明一个变量cid
,用于记录当前哪一项类别是选中项的类别。 - 在页面中,通过
data.cid
动态设置hot-item-active
样式类。 - 为导航项绑定
tap
事件,当点击后,修改data.cid
为当前选中项的类别ID
即可。
- 在
- 当点击了顶部导航项后,获取选中项的类别
ID
,发送一个https
请求,加载当前类别下的首页电影数据。 - 完成列表的替换并渲染。
实现列表的触底加载下一页业务
业务思路:当用户滚动列表到底后,发送一个新的https
请求,访问当前类别的下一页数据。一旦获取新数据后,将新数据追加到旧数组(this.data.movies
)的末尾。追加完毕后,数组将会扩容。
解决触底事件如何捕获?
在Page中声明onReachBottom
钩子方法,一旦触底将会自动调用。
解决如何发送下一页数据的请求?
cid=1的第二页数据:
https://api.tedu.cn/index.php?cid=1&offset=20
cid=1的第三页数据:
https://api.tedu.cn/index.php?cid=1&offset=40
cid=1的第四页数据:
https://api.tedu.cn/index.php?cid=1&offset=60
....
cid=1的第8页数据:
https://api.tedu.cn/index.php?cid=1&offset=xxx
当前已经加载了多少条 访问第几页 offset
20 2 20
40 3 40
60 4 60
80 5 80
100 6 100
n n
this.data.movies.length this.data.movies.length
异步方法的封装:loadMovies()
现阶段,有3个地方都需要发请求,访问index.php,加载电影列表:
// 接收两个参数,通过两个参数发请求,得到响应电影列表,返回给调用者
loadMovies(cid, offset){
return new Promise((resolve, reject)=>{
wx.request({
url: "https://api.tedu.cn/index.php",
data: {cid:动态, offset:动态}
success: (res)=>{
let movies = res.data // 需要返回movies数组
resolve(movies)
},
fail: (err)=>{
reject(err)
}
})
})
}
onLoad(){
loadMovies(1, 0).then(res=>{
成功之后执行的代码
}).catch(err=>{
失败之后执行的代码
})
}
tapNav(){
loadMovies(xxx, 0).then(res=>{
成功之后执行的代码
}).catch(err=>{
失败之后执行的代码
})
}
onReachBottom(){
loadMovies(xxx, xxxx).then(res=>{
成功之后执行的代码
}).catch(err=>{
失败之后执行的代码
})
}
小程序缓存设计方案
什么是缓存?
当客户端需要获取一组数据时,需要访问服务端下载。一旦下载成功,为了下次访问方便,可以将这些数据存在客户端缓存中;等下次需要获取相同数据时,先去客户端缓存中查询,如果有,则直接获取并使用(不发请求了),如果没有再发请求。
基于缓存思想,优化顶部导航的切换
- 当点击顶部导航选项卡时,本来需要发送请求,获取相应类别的首页列表来着,为了性能,先去缓存中查一查,以前有没有存过这一组数据。
- 如果查到了,则直接拿来用即可。不发请求了。
- 如果没查到,再发请求。(响应获取后需要向缓存中存一下,供下次使用)
小程序为了客户端缓存,设计了一套缓存相关API
:
向缓存中存:
wx.setStorage({
key: xx,
data: xxx
})
从缓存中取:
wx.getStorage({
key: xx,
success: (res)=>{
res就是key所对应的值
}
})
缓存的设计方案
-
什么样的数据适合设计缓存?
经常使用而且不容易变动的。
-
设计缓存方案时,需要关注缓存的更新时机。
需要考虑下项目的业务形态。新闻列表、音乐榜单列表、热映电影列表等是不一样的。
一般情况下如果做缓存的话,都需要结合如下缓存更新场景:
-
提供下拉刷新功能。
在json配置文件中开启下拉刷新功能:
{ "usingComponents": {}, "enablePullDownRefresh": true, "backgroundColor": "#666", "backgroundTextStyle": "light" }
在js中,重写onPullDownRefresh()方法,监听下拉刷新。
当响应结束,需要手动通知下拉刷新动画:
wx.stopPullDownRefresh()
-
刚进入
app
时,可以清空以前存过的缓存数据,这样需要的时候就会临时下载一次。wx.clearStorage()
-