前言

若文章有误，欢迎读者留言反馈

💻Installation

1
git clone https://github.com/coding327/mymovies.git

分类页数据对接

首页是已经传递数据了，但是咱们分类页数据还没传递
点击更多，有三个分类，影院热映或者近期热门或者免费在线，那怎么知道向哪个接口发请求？

解决思路：每个分类里的更多都是由调用请求api里的方法得到的，我们可以往res.data里面添加method属性，告诉我是由哪个api方法请求的数据
api.js文件

1
2
res.data.method = 'loadHotFilms'
return res.data

1
2
res.data.method = 'loadLatestFilms'
return res.data
1
2
res.data.method = 'loadFreeFilms'
return res.data

进入home.js文件中，我们需要把请求时这个method保存到home页面组件的data中，再通过首页进入分类页把数据传递过去即可
加载主页数据

1
2
3
4
5
6
let type = {
    title: data.subject_collection.name,
    list: data.subject_collection_items,
    // 都要加上下面这个
    method: data.method
}

加载近期热门数据

1
2
3
4
5
6
let type = {
    title: data.subject_collection.name,
    list: data.subject_collection_items,
    // 都要加上下面这个
    method: data.method
}

加载免费在线数据

1
2
3
4
5
6
let type = {
    title: data.subject_collection.name,
    list: data.subject_collection_items,
    // 都要加上下面这个
    method: data.method
}

home.wxml传递数据过去，导航跳转（路由跳转传参，注意它是个变量，咱们加上{{}}）

1
<navigator url="/pages/list/list?method={{ item.method }}">更多 ></navigator>

验证数据是否成功传递过来，进入list.js文件，接收参数都是用onLoad做有个options

1
2
3
onLoad: function (options) {
    console.log(options); // 成功拿到
},

放到数据仓库中【data】
定义初始数据，并给初始数据赋值

【注意】放到数据仓库中，这里赋值为何不采用setData呢？
解答：this.setData是可以实现数据的响应式，只要页面用到的地方都能及时的更新，但是method的值我们只需要固定的，并且不需要在页面上展示，所以这里两个方法都可以

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/**
 * 页面的初始数据
 */
data: {
    method: '', // 调api的方法名
},
/**
 * 生命周期函数--监听页面加载
 */
onLoad: function (options) {
    console.log(options); // 成功拿到method
    // 放到数据仓库中
    this.data.method = options.method
    // 这里赋值为何不采用setData呢？
    // this.setData是可以实现数据的响应式，只要页面用到的地方都能及时的更新，但是method的值我们只需要固定的，并且不需要在页面上展示，所以这里两个方法都可以
    // this.setData({
    //     method: options.method
    // })
},

定义加载数据的方法，导入api模块

1
2
3
4
5
6
7
8
9
10
11
12
13
// 导入api模块
const api = require('../../api/api.js')
---
    // 定义加载数据方法
    loadListData() {
        // 注意method是个变量这里要用中括号
        api[this.data.method]({
            start: 0,
            count: 12
        }).then(data => {
            console.log(data) // 成功拿到数据
        }).catch(api.showError)
    },

拿到数据后我们需要存放到数据仓库中，同时它还有个分类在里面，这里涉及数据为对象

1
2
3
4
5
6
7
/**
 * 页面的初始数据
 */
data: {
    method: '', // 调api的方法名
    films: {} // 存放电影信息，由于有个分类名，这里设计为对象格式的数据
},

接着处理数据，赋值给films

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 定义加载数据方法
loadListData() {
    // 注意method是个变量这里要用中括号
    api[this.data.method]({
        start: 0,
        count: 12
    }).then(data => {
        console.log(data) // 成功拿到数据
        // 定义一个films，再赋值给数据仓库中的films即可
        let films = {
            title: data.subject_collection.name,
            list: data.subject_collection_items
        }
        this.setData({
            // films: films
            // 由于对象属性名与属性值的变量名相同可以简写为films
            films
        })
    }).catch(api.showError)
    // 这个写完可以测试一下，学会使用控制台的AppData，它是可以帮我们看这个数据的，如films中的title和list
},

这个写完可以测试一下，学会使用控制台的AppData，它是可以帮我们看这个数据的，如films中的title和list

list.js代码如下

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
// pages/list/list.js
// 导入api模块
const api = require('../../api/api.js')
Page({

    /**
     * 页面的初始数据
     */
    data: {
        method: '', // 调api的方法名
        films: {} // 存放电影信息，由于有个分类名，这里设计为对象格式的数据
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        console.log(options); // 成功拿到method
        // 放到数据仓库中
        this.data.method = options.method
        // 这里赋值为何不采用setData呢？
        // this.setData是可以实现数据的响应式，只要页面用到的地方都能及时的更新，但是method的值我们只需要固定的，并且不需要在页面上展示，所以这里两个方法都可以
        // this.setData({
        //     method: options.method
        // })
        this.loadListData()
    },
    // 定义加载数据方法
    loadListData() {
        // 注意method是个变量这里要用中括号
        api[this.data.method]({
            start: 0,
            count: 12
        }).then(data => {
            console.log(data) // 成功拿到数据
            // 定义一个films，再赋值给数据仓库中的films即可
            let films = {
                title: data.subject_collection.name,
                list: data.subject_collection_items
            }
            this.setData({
                // films: films
                // 由于对象属性名与属性值的变量名相同可以简写为films
                films
            })
        }).catch(api.showError)
        // 这个写完可以测试一下，学会使用控制台的AppData，它是可以帮我们看这个数据的，如films中的title和list
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {

    }
})

展示数据如分类、电影，进入list.js文件中
list.js代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!--pages/list/list.wxml-->
<view>
    <view class="list-type">
        <view class="type-title">
            <!-- <text>近期热门电影</text> -->
            <!-- 替换为数据仓库中的数据 -->
            <text>{{ films.title }}</text>
        </view>
        <view class="film-list">
            <!-- <film-item class="film-item" wx:for="{{ 12 }}" wx:key="index"></film-item> -->
            <!-- 替换为数据仓库中的数据，同时film-item组件还需要传递值过去，item即为电影列表中的每一项 -->
            <film-item class="film-item" wx:for="{{ films.list }}" film="{{ item }}" wx:key="index"></film-item>
        </view>
    </view>
</view>