WEIXIN day_05(8.22) 学子影院项目实践1

学子影院项目实践

https://api.tedu.cn

搭建项目的基本结构

1. 新建项目。 xzyy。 不使用模板。不使用云服务。
2. 搭建项目的初始化结构。3个底部选项卡：index theatre me。
   1. 准备3个页面：index theatre me。
   2. 配置app.json，管理：pages/window/tabbar等配置项。
3. 微调样式。

加载首页的电影列表（热映类别）

1. 了解加载电影列表接口：

   	说明
   请求地址	https://api.tedu.cn/index.php
   请求方式	GET
   请求参数	cid:1 用于传递电影类别的ID, 热映id=1 待映id=2 经典id=3 offset: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
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11

2. 重写index的onLoad生命周期方法。当初次加载index页面内容时，发送https请求。加载热映类别下的首页文章数据。

3. 获取数据后，渲染列表即可。

实现顶部导航的切换

1. 完成点击顶部导航项后的样式更新。
   1. 在data中声明一个变量cid，用于记录当前哪一项类别是选中项的类别。
   2. 在页面中，通过data.cid动态设置hot-item-active样式类。
   3. 为导航项绑定tap事件，当点击后，修改data.cid为当前选中项的类别ID即可。
2. 当点击了顶部导航项后，获取选中项的类别ID，发送一个https请求，加载当前类别下的首页电影数据。
3. 完成列表的替换并渲染。

实现列表的触底加载下一页业务

业务思路：当用户滚动列表到底后，发送一个新的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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

异步方法的封装：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=>{
        失败之后执行的代码 
    })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

小程序缓存设计方案

什么是缓存？

当客户端需要获取一组数据时，需要访问服务端下载。一旦下载成功，为了下次访问方便，可以将这些数据存在客户端缓存中；等下次需要获取相同数据时，先去客户端缓存中查询，如果有，则直接获取并使用（不发请求了），如果没有再发请求。

基于缓存思想，优化顶部导航的切换

1. 当点击顶部导航选项卡时，本来需要发送请求，获取相应类别的首页列表来着，为了性能，先去缓存中查一查，以前有没有存过这一组数据。
2. 如果查到了，则直接拿来用即可。不发请求了。
3. 如果没查到，再发请求。（响应获取后需要向缓存中存一下，供下次使用）

小程序为了客户端缓存，设计了一套缓存相关API：

向缓存中存：

wx.setStorage({
    key: xx,
    data: xxx
})
1
2
3
4

从缓存中取：

wx.getStorage({
    key: xx,
    success: (res)=>{
        res就是key所对应的值
    }
})
1
2
3
4
5
6

缓存的设计方案

1. 什么样的数据适合设计缓存？

   经常使用而且不容易变动的。

2. 设计缓存方案时，需要关注缓存的更新时机。

   需要考虑下项目的业务形态。新闻列表、音乐榜单列表、热映电影列表等是不一样的。

   一般情况下如果做缓存的话，都需要结合如下缓存更新场景：

   1. 提供下拉刷新功能。

      在json配置文件中开启下拉刷新功能：

      {
        "usingComponents": {},
        "enablePullDownRefresh": true,
        "backgroundColor": "#666",
        "backgroundTextStyle": "light"
      }
      1
      2
      3
      4
      5
      6

      在js中，重写onPullDownRefresh()方法，监听下拉刷新。

      当响应结束，需要手动通知下拉刷新动画：

      wx.stopPullDownRefresh()
      1

   2. 刚进入app时，可以清空以前存过的缓存数据，这样需要的时候就会临时下载一次。

      wx.clearStorage()
      1