微信小程序 19 视频列表

19.1 获取视频列表数据

---

接口：http://localhost:3000/video/group?id=58100

1. 该接口需要 登录的 cookies，需要我们 要略微 改动下 request 方法。

首先我们要知道，很多的接口可能需要 登录的 cookie，也就是 我们 要 传入 一下 header。那么 wx.request 是支持 这个功能的，只要在 传参里面 写入 一个 header 的 json 就行了。

import config from "./config";
export default (url,data = {type:2},method = "GET") => {
    return new Promise((resolve, reject) => {
        wx.request({
            url: config.host + url,
            data,
            method,
            success:(res) => {
                if(url == "login/cellphone"){
                    wx.setStorage({
                        key: 'cookies',
                        data: res.cookies
                    })
                }
                // 修改 Promise 状态 为 成功状态
                resolve(res.data);// 成功后要 返回什么数据
                //你就在 括号里 传入什么数据即可
            },
            fail:(err) => {
                reject(err);
            }
        })
    });
}

这样，我们 就能 在 每次登陆后，把 cookies 保存到 本地了。

2. 获取到 视频列表

// 获取视频列表数据
    async getVideoList(navId) {
        // http://localhost:3000/video/group?id=58100
        let videoListData = await request('video/group', {id: navId});
    },

    /**
     * 生命周期函数--监听页面加载
     */ async getVideoGroupListData() {
        let videoGroupListData = await request("video/group/list",{});
        this.setData({
            videoGroupList: videoGroupListData.data.slice(0, 14),
            navId: videoGroupListData.data[0].id
        });
        this.getVideoList(this.data.navId);
    },
    onLoad(options) {
         // 获取 导航标签的数据
        this.getVideoGroupListData();
    },

---

19.2 视频列表区域的搭建

1. 首先 我们 发现 datas 里面 没有 明显的 wx:key 就是唯一标识。所以我们 要手动添加一个 唯一标识 id。然后 我们 还要 通过 datas 每个元素里面的 vid 获取到 视频的 地址。
   获取视频url 的接口：http://localhost:3000/video/url?id=A24C8DF6283CD4356D86F92652989573

// pages/login/login.js
import request from "../../utils/request";

Page({

    /**
     * 页面的初始数据
     */
    data: {
        videoGroupList: [],
        navId:"", // 导航的标识
        videoList: [],
        videoURLs:[], // 每个标签的 视频 url
    },

    // 点击标签栏
    changeNav(event){
        let navId = event.currentTarget.id;
        this.setData({
            navId: navId
        });
        this.getVideoList(this.data.navId);
    },

    // 获取视频列表数据
    async getVideoList(navId) {
        // http://localhost:3000/video/group?id=58100
        let videoListData = await request('video/group', {id: navId});
        let index = 0;
        let videoList = videoListData.datas.map(item => {
            item.id = index++; // 每个数组里 没有 id 这个 属性，那么这里 写了 id
            // 那么 就会 自动写入。
            return item;
        })
        let videoURLs = [];
        for(let i = 0; i < videoListData.datas.length; ++i){
            // http://localhost:3000/video/url?id=A24C8DF6283CD4356D86F92652989573
            let videoURL = await request("video/url",{id: videoListData.datas[i].data.vid});
            videoURLs.push(videoURL.urls[0].url);
        }
        this.setData({
            videoList: videoListData.datas,
            videoURLs: videoURLs
        });
    },

    /**
     * 生命周期函数--监听页面加载
     */ async getVideoGroupListData() {
        let videoGroupListData = await request("video/group/list",{});
        this.setData({
            videoGroupList: videoGroupListData.data.slice(0, 14),
            navId: videoGroupListData.data[0].id
        });
        this.getVideoList(this.data.navId);
    },
    onLoad(options) {
         // 获取 导航标签的数据
        this.getVideoGroupListData();
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

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

    },

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

    },

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

    },

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

    },

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

    },

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

    }
})

<view class="videoContainer">

    <view class="header">
        <image src="/static/images/video/video.jpg">image>
        <view class="search">
            搜索商品
        view>
        <image src="/static/images/logo.png">image>
    view>


    <scroll-view scroll-x="true" class="navScroll" enable-flex="true">
        <view class="navItem" wx:for="{{videoGroupList}}" wx:key="id">
            <view class="navContent {{navId == item.id? 'active':''}}" bindtap="changeNav" id="{{item.id}}">
                {{item.name}}
            view>
        view>
    scroll-view>

    <scroll-view scroll-y="true">
        <view class="videoItem" wx:for="{{videoList}}" wx:key="id">
            <video src="{{videoURLs[index]}}">video>
            <view class="content">{{item.data.title}}view>
            <view class="footer">
                <image class="avatar" src="{{item.data.creator.avatarUrl}}">image>
                <text class="nickName">{{item.data.creator.nickname}}text>
                <view class="comments_praised">
                    <text class="item">
                        <text class="iconfont icon-weiguanzhu">text>
                        <text class="count">{{item.data.praisedCount}}text>
                    text>
                    <text class="item">
                        <text class="iconfont icon-pinglun">text>
                        <text class="count">{{item.data.commentCount}}text>
                    text>
                    <button open-type="share" class="item btn">
                        <text class="iconfont icon-gengduo">text>
                    button>
                view>
            view>
        view>
    scroll-view>
view>

.videoContainer .header {
    display: flex;
    margin: 20rpx 0;
}


.videoContainer .header image {
    width: 60rpx;
    height: 60rpx;
}

.videoContainer .header .search {
    border: 1rpx solid #eee;
    flex: 1;
    /*flex-grow 可拉伸 flex-shrink 可压缩 flex-basis 设置当前元素的宽度*/
    /*flex 默认三个值: flex-grow(0) flex-shrink(1) flex-basis(auto) 也就是说它不支持 拉伸*/
    /*flex: 1 之后，就是 flex-grow(1) flex-shrink(1) flex-basis(0%)*/

    /*当 flex: 1 后，父元素 宽度 就会变为 100 %，也就不是 你设定的那个值了。*/
    /*flex-basis(auto) 意思是说 首先 以 设定的 宽度 为 主，如果比较大的话，那么 其它元素可能被压缩。
    但 绝对不会 超出 页面的宽度。如果比较小的话，会被 自适应。*/
    font-size: 26rpx;
    text-align: center;
    line-height: 60rpx;
    margin: 0 20rpx;
    color: #d43c33;
    border-radius: 20rpx;
}

/*导航区域*/
.navScroll {
    display: flex;
    white-space: nowrap; /*不让子元素 换行*/
    height: 68rpx;
}

.navScroll .navItem {
    padding: 0 30rpx;
    font-size: 28rpx;
    height: 60rpx;
    line-height: 60rpx;
}
.navItem .active {
    border-bottom: 1rpx solid #d43c33;
}

/* 视频列表*/

.videoItem {
    padding: 0 3%;
}

.videoItem video {
    width: 100%;
    height: 360rpx;
    border-radius: 10rpx;
}

.videoItem .content {
    font-size: 26rpx;
    height:80rpx;
    line-height: 80rpx;
    max-width: 500rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* footer */
.footer {
    border-top: 1rpx solid #eee;
    padding: 20rpx 0;
}
.footer .avatar {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    vertical-align: middle;
}

.footer  .nickName {
    font-size: 26rpx;
    vertical-align: middle;
    margin-left: 20rpx;
}

.footer .comments_praised {
    float: right;
}

.comments_praised .btn {
    display: inline;
    padding: 0;
    background-color: transparent;
    border-color: transparent;
}

.comments_praised .btn:after {
    border: none;
}

.comments_praised .item {
    margin-left: 50rpx;
    position: relative;
}

.comments_praised .item .count {
    position: absolute;
    top: -20rpx;
    font-size: 20rpx;
}