一、环境介绍

开发平台
微信开放文档

下载稳定版本开发工具

二、开发设置

项目名称：XXX
AppID：在后台获取id或者使用测试id
选择是否使用云服务
语言：JavaScript
详情 > 测试版本库：选择占比最高的
详情 > 不校验合法域名：勾选

三、目录结构

sitemap.json ：哪些文件可以被微信搜索到

project.config.json ：项目配置文件

app.json ：小程序配置

app.wxss ：小程序的css

utils ：小程序的工具函数文件夹

pages ：小程序页面文件夹

logs 记录

第二章 wxml语法

一、数据绑定

data中数据初始化
修改数据：this.setData

修改数据的行为始终是同步的

二、获取用户基本信息

用户未授权（首次登陆）

button open-type='getUserInfo'

用户已经授权（再次登陆）

wx.getUserInfo

三、事件绑定

bind绑定：事件绑定不会阻止冒泡事件向上冒泡
catch绑定：事件绑定可以阻止冒泡事件向上冒泡

四、列表渲染

五、条件渲染

六、模板使用

七、生命周期

第三章实战

一、添加轮播图

wxml代码

<view>
    <swiper class="h-slider" indicator-dots indicator-color="#fff" indicator-active-color="#000">
      <swiper-item>
        <image src="/static/imgs/swipe/home1.jpg"></image>
      </swiper-item>
      <swiper-item>
        <image src="/static/imgs/swipe/home2.webp"></image>
      </swiper-item>
      <swiper-item>
        <image src="/static/imgs/swipe/home3.webp"></image>
      </swiper-item>
    </swiper>
  </view>

wxss代码

swiper.h-slider{
  width: 100%;
  height: 300rpx;
}
swioper.h-slider swiper-item image{
  width: 100%;
  height: 300rpx;
}

二、添加icon

1.获取icon

icon网址
选择自己需要的icon加入购物车
在购物车内将icon添加到项目
获取项目的css代码

2.引入icon

新建文件:/static/iconfont/iconfont.wxss
将上一步获取的css代码复制到iconfint.wxss文件内

在app.wxss文件内添加代码引入：

@import "/static/iconfont/iconfont.wxss";

更新项目里面的icon之后，需要重新获取代码，把css代码更新到iconfint.wxss文件内

3.wxss代码

<!-- 图标导航区域 -->
  <view class="navContainer">
    <view class="navItem">
      <text class="iconfont icon-tuijian"></text>
      <text>xxxx</text>
    </view>
    <view class="navItem">
      <text class="iconfont icon-shipu"></text>
      <text>xxxx</text>
    </view>
    <view class="navItem">
      <text class="iconfont icon-yunshipu"></text>
      <text>xxxx</text>
    </view>
    <view class="navItem">
      <text class="iconfont icon-shipuhantangliang"></text>
      <text>xxxx</text>
    </view>
  </view>

4.wxss代码

/* <!-- 图标导航区域 --> */
.navContainer{
  display: flex;
}
.navItem{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 25%;
}
.navItem .iconfont{
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  text-align: center;
  line-height: 100rpx;
  background: #fd4953;
  font-size: 50rpx;
  color: white;
  margin: 20rpx 0;
}
.navItem text{
  font-size: 26rpx;
}

三、添加左右滑块（scroll-view 适用于展示推荐内容等）

1.wxml代码

<view class="recommendContainer">
    <view class="header">
      <text class="title">猜你喜欢</text>
      <view>
        <text>为你精心推荐</text>
        <text class="more">查看更多</text>
      </view>
    </view>
    <!-- 内容区域 -->
    <scroll-view class="recommendScroll" enable-flex scroll-x>
      <view class="scrollItem">
        <image src="/static/imgs/swipe/home1.jpg"></image>
        <text>推荐1</text>
      </view>
      <view class="scrollItem">
        <image src="/static/imgs/swipe/home1.jpg"></image>
        <text>推荐2</text>
      </view>
      <view class="scrollItem">
        <image src="/static/imgs/swipe/home1.jpg"></image>
        <text>推荐3</text>
      </view>
      <view class="scrollItem">
        <image src="/static/imgs/swipe/home1.jpg"></image>
        <text>推荐4</text>
      </view>
    </scroll-view>
  </view>

2.wxss代码

/* 推荐区域 */
.recommendContainer{
  padding: 20rpx;
}
.recommendContainer .header{
  padding-bottom: 20rpx;
}
.recommendContainer .header .title{
  font-size: 32rpx;
  line-height: 80rpx;
  color: #666;
}
.recommendContainer .header .more{
  float: right;
  border: 1rpx solid #333;
  padding: 10rpx 20rpx;
  font-size: 24rpx;
  border-radius: 30rpx;
}
/* 推荐内容区 */
.recommendScroll{
  display: flex;
}
.scrollItem{
  width: 200rpx;
  margin-right: 20rpx;
}
.scrollItem image{
  width: 200rpx;
  height: 200rpx;
  border-radius: 10rpx;
}
.scrollItem text{
  font-size: 26rpx;
  /* 单行文本溢出隐藏 省略号代替 */
  /* display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; */

  /* 多行文本溢出隐藏 省略号代替 */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;/*设置对齐模式*/
  -webkit-line-clamp: 2;/*两行*/
}

3.注意

设置scroll-view 的display: flex;属性时，需要为元素添加enable-flex属性，并添加 scroll-x或scroll-y属性用来确定滑动方向。

四、前后端交互

1.封装请求功能函数

在utils文件夹下新建文件：config.js ,用于存放服务器配置相关的js代码

//配置服务器相关信息
export default{
    host: 'https://www.deepcre.com'
}

在utils文件夹下新建文件：request.js ,用于存放请求相关的js代码

// 发送ajax请求
/*
1、封装功能函数
  1.1 功能点明确
  1.2 函数内部应该保留固定代码（静态的）
  1.3 将动态的数据抽取成形参，由使用者根据自身情况动态传入实参
  1.4 一个良好的功能函数应该设置形参的默认值
2、封装功能组件
  2.1 功能点明确
  2.2 组件内部保留静态代码
  2.3 将动态的数据抽取成props参数，由使用者根据自身的情况以标签属性的形式动态传入props数据
  2.4 一个良好的组件应该设置组件的必要性及数据类型
  props:{
    msg:{
      required:true,
      default:默认值,
      type:String
    }
  }
**/
import config from './config'
export default (url,data={},method='GET') =>{
    return new Promise((resolve, reject) => {
        //1. new Promise 初始化promise实例的状态为pending

        wx.request({
            url: config.host + url,
            data,
            method,
            success:(res) =>{
              console.log('请求成功:',res)
              resolve(res.data);
            },
            fail:(err) =>{
              console.log('请求失败:',err);
              reject(err)
            }
        })
    })
}

调用函数请求数据，js代码：

import request from '../../utils/request.js'

onLoad: async function (options) {
    let result = await request('/products-2/',{type: 2})
    console.log('结果数据：',result);
  }

2.注意点

协议必须是https协议
一个接口最多配置20个域名
并发贤至上限是10个
开发过程中设置不校验合法域名：开发工具 --> 右上角详情 --> 本地设置 --> 不校验

五、本地存储

1.语法

wx.setStorage() || wx.setStorageSync()

2.注意点

1. 建议存储的数据为json数据
2. 单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB
3. 属于永久存储，同H5的localStorage一样。除非用户主动删除或因存储空间原因被系统清理，否则数据都一直可用。

六、须登录才能获取资源实现

通过cookie实现

1. cookie信息获取

在登陆成功之后，需要将返回的cookie信息保存到本地

在登陆请求时，添加参数：isLogin: true，表示这是一个登陆请求，和其他请求区分开，login.js文件内后端验证部分代码：

let result = await request('/login/cellphone', {phone, password, isLogin: true})

登陆成功时，判断isLogin参数是否是true，是则将cookie信息保存到本地。request.js代码：

success:(res) =>{
    // console.log('请求成功:',res)
    //-------------添加此部分代码------------------
    if(data.isLogin){//登陆请求
        //将用户的cookie信息保存到本地
        wx.setStorage({//异步
            key: 'cookies',
            data: res.cookies
        })
    }
    //-------------------------------------------
    resolve(res.data);
},

2. 添加含cookie的请求头

修改请求的文件request.js ，每次请求的时候加上一个包含cookie信息的请求头

在请求时，判断是否是登陆请求，如果是，则在请求时判断本地是否含有cookie信息。request.js代码：

wx.request({
//-----添加如下代码-----------
//wx.getStorageSync('cookies')：同步获取cookie数据，同步方式是为了保证之后代码可准确执行
//find(item => item.indexOf('MUSIC_U') !== -1)：cookies内包含多组数据，找到需要的MUSIC_U的值，若有则返回，没有则返回-1。所以使用判断语句，判断是否等于-1，不是则返回值，是则给cookie赋值为空

header: {
	cookie: wx.getStorageSync('cookies') ? wx.getStorageSync('cookies').find(item => item.indexOf('MUSIC_U') !== -1 ):''
},
//-------------------------
})

七、视频下拉列表实现

1.wxml代码

<scroll-view scroll-y class="menuScroll">
    <view class="menuItem" wx:for="{{videoList}}" wx:key="id">
        <video 
            src="{{item.data.urlInfo.url}}"
            bindplay="handlePlay"
            id="{{item.data.vid}}"
        ></video>
    </view>
</scroll-view>

2.多个视频同时播放问题解决

在标签内，绑定一个播放事件：bindplay=“handlePlay”，并传递id：id="{{item.data.vid}}"。相应的js代码如下：

//点击播放、继续播放的回调
handlePlay(event){
    /**
    * 问题：多个视频同时播放的问题
    * 
    * 需求
    *  1.在点击播放的事件中需要找到上一个播放的视频
    *  2.在播放新的视频之前关闭上一个正在播放的视频
    * 关键
    *  1.如何找到上一个视频的实例对象
    *  2.如何确认点击播放的视频和正在播放的视频不是同一个视频
    * 单例模式
    *  1.需要创建多个对象的场景下，通过一个变量接收，始终保持只有一个对象
    *  2.节省内存空间
    */

    let vid = event.currentTarget.id;
    //关闭上一个播放的视频
    this.vid !== vid && this.videoContext && this.videoContext.stop();
    this.vid = vid;
    //创建控制video标签的实例对象
    this.videoContext = wx.createVideoContext(vid);
},

3.优化视频显示，用图片代替视频

由于一次加载时，要加载全部视频，会遇到加载速度太慢，用户体验感较差的情况。故采取用封面图片代替视频的方式。

首选为页面添加数据：

videoId: ‘’, // 视频id标识，初始为空，代表一开始没有选中任何一个视频，界面中也全部都是以封面图片的形式呈现。

wxml代码：

<video 
    src="{{item.data.urlInfo.url}}"
    bindplay="handlePlay"
    id="{{item.data.vid}}"
    poster="{{item.data.coverUrl}}"
    class="common"
    object-fit="cover"
    wx:if='{{videoId === item.data.vid}}'
    bindtimeupdate="handleTimeUpdate"
    bindended="handleEnded"
></video>
<!-- 性能优化：使用image图片代替video标签 -->
<image 
    wx:else 
    bindtap="handlePlay" 
    id="{{item.data.vid}}" 
    class="common" 
    src="{{item.data.coverUrl}}">
</image>

wxjs代码：

//点击播放、继续播放的回调
    handlePlay(event){
      /**
       * 问题：多个视频同时播放的问题
       * 
       * 需求
       *  1.在点击播放的事件中需要找到上一个播放的视频
       *  2.在播放新的视频之前关闭上一个正在播放的视频
       * 关键
       *  1.如何找到上一个视频的实例对象
       *  2.如何确认点击播放的视频和正在播放的视频不是同一个视频
       * 单例模式
       *  1.需要创建多个对象的场景下，通过一个变量接收，始终保持只有一个对象
       *  2.节省内存空间
       */

       let vid = event.currentTarget.id;
       //关闭上一个播放的视频
      //  this.vid !== vid && this.videoContext && this.videoContext.stop();
      //  this.vid = vid;

       //更新data中videoId的状态数据
       this.setData({
         videoId: vid
       })
       //创建控制video标签的实例对象
       this.videoContext = wx.createVideoContext(vid);
       this.videoContext.play();
    },

对比发现，优化之后不再存在视频加载过慢的问题，于是下面两行代码无需添加：

// this.vid !== vid && this.videoContext && this.videoContext.stop();
// this.vid = vid;

4.视频内容大小和video不一致问题解决

设置video标签的object-fit属性，有三个合法值：contain：包含 , fill：填充 , cover：覆盖.这里设置成fill或者cover都可以。

object-fit="cover"

5.下拉视频，保持头部和导航栏位置固定不变

设置scrollview的高度，用calc函数计算高度。下方152rpx包含：header高度，导航栏高度，scrollview的margin-top的高度。对于底部的tabBar的高度，小程序会自动扣除。

.menuScroll {
    margin-top: 10rpx;
    /* calc: 可以动态计算css的宽高， 运算符左右两侧必须加空格，否则计算会失效 */
    /* 视口单位： vh vw  1vh = 1%的视口高度  1vw = 1%的视口宽度*/
    height: calc(100vh - 152rpx);
    /*height: calc(100vh - 100rpx); 用来测试页面上拉触底*/
}

6.从上次播放到的位置继续播放

首先要为video标签绑定时间变化函数：

bindtimeupdate="handleTimeUpdate"

在wxjs中实现该函数：

//添加如下数据用来记录时间(放在data中)
videoUpdateTime: [], // 记录video播放的时长

//监听视频播放进度的回调
handleTimeUpdate(event){
    let videoTimeObj = {vid: event.currentTarget.id, currentTime: event.detail.currentTime};
    let {videoUpdateTime} = this.data;
    /*
    * 思路： 判断记录播放时长的videoUpdateTime数组中是否有当前视频的播放记录
    *   1. 如果有，在原有的播放记录中修改播放时间为当前的播放时间
    *   2. 如果没有，需要在数组中添加当前视频的播放对象
    *
    * */
    let videoItem = videoUpdateTime.find(item => item.vid === videoTimeObj.vid);
    if(videoItem){ // 之前有
        videoItem.currentTime = event.detail.currentTime;
    }else { // 之前没有
    	videoUpdateTime.push(videoTimeObj);
    }
    // 更新videoUpdateTime的状态
    this.setData({
    	videoUpdateTime
    })
},

在handlePlay(event)函数里面添加如下判断代码，在播放之前，先判断是否有播放记录，有的话要跳到之前播放的位置继续播放。代码添加位置在play（）之前，在实例对象this.videoContext创建之后。

// 判断当前的视频之前是否播放过，是否有播放记录, 如果有，跳转至指定的播放位置
let {videoUpdateTime} = this.data;
let videoItem = videoUpdateTime.find(item => item.vid === vid);
if(videoItem){
    this.videoContext.seek(videoItem.currentTime);
}

但是如果上次播放时，视频已经播放结束，则再次播放就无需继续，重头播放即可。

首先给video标签绑定结束的触发函数

bindended="handleEnded"

在wxjs中实现该函数：

//视频播放结束调用
handleEnded(event){
    //移除记录播放时长数组中当前视频的对象
    let {videoUpdateTime} = this.data;
    videoUpdateTime.splice(videoUpdateTime.findIndex(item => item.vid === event.currentTarget.id), 1);
    this.setData({
        videoUpdateTime
    })
},

八、单行文本溢出隐藏

/* 单行文本溢出隐藏 省略号代替 */
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

九、多行文本溢出隐藏

/* 多行文本溢出隐藏 省略号代替 */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;/*设置对齐模式*/
-webkit-line-clamp: 2;/*两行*/

十、下拉列表刷新（scrollview）

1.给scollview组件绑定触发函数

refresher-enabled  //改属性表示开启自定义下拉刷新
bindrefresherrefresh="handleRefresher" //绑定刷新的触发函数

2.js中实现handleRefresher函数

// 自定义下拉刷新的回调： scroll-view
handleRefresher(){
    // 再次发请求，获取最新的视频列表数据
    this.getVideoList(this.data.navId);
},

3.解决下拉时三个小圆点一直显示问题

首先添加变量记录刷新状态(js文件的data中)

isTriggered: false, // 标识下拉刷新是否被触发

在scrollview标签内添加属性：

refresher-triggered="{{isTriggered}}"

getVideoList（）方法中，数据加载之后，添加隐藏状态的代码：

this.setData({
    isTriggered: false // 关闭下拉刷新
})

十一、上拉列表加载（scrollview）

1.给scollview组件绑定触发函数

bindscrolltolower="handleToLower"

2.js中实现handleToLower函数

console.log('scroll-view 上拉触底');
      // 数据分页： 1. 后端分页， 2. 前端分页
      console.log('发送请求 || 在前端截取最新的数据 追加到视频列表的后方');
      console.log('网易云音乐暂时没有提供分页的api');
      // 模拟数据
      let newVideoList = [
        {
          "type": 1,
          "displayed": false,
          "alg": "onlineHotGroup",
          "extAlg": null,
          "data": {
            "alg": "onlineHotGroup",
            "scm": "1.music-video-timeline.video_timeline.video.181017.-295043608",
            "threadId": "R_VI_62_E02A88CF2AE65C449CADD2371C315F18",
            "coverUrl": "https://p2.music.126.net/XIY-ggs6OMhSsrGcx4yUcw==/109951164996630305.jpg",
            "height": 1080,
            "width": 1920,
            "title": "李宇春华晨宇合作好炸《西门少年》，真是神仙合作啊！",
            "description": "李宇春华晨宇合作好炸《西门少年》，真是神仙合作啊！",
            "commentCount": 186,
            "shareCount": 516,
            "resolutions": [
              {
                "resolution": 240,
                "size": 29450044
              },
              {
                "resolution": 480,
                "size": 49904667
              },
              {
                "resolution": 720,
                "size": 72480174
              },
              {
                "resolution": 1080,
                "size": 137540575
              }
            ],
            "creator": {
              "defaultAvatar": false,
              "province": 440000,
              "authStatus": 0,
              "followed": false,
              "avatarUrl": "http://p1.music.126.net/WbQbH2nMF8_30bj-wH92vg==/109951164781511113.jpg",
              "accountStatus": 0,
              "gender": 0,
              "city": 445200,
              "birthday": -2209017600000,
              "userId": 3247598879,
              "userType": 0,
              "nickname": "一起爱上好音乐",
              "signature": "",
              "description": "",
              "detailDescription": "",
              "avatarImgId": 109951164781511120,
              "backgroundImgId": 109951162868128400,
              "backgroundUrl": "http://p1.music.126.net/2zSNIqTcpHL2jIvU6hG0EA==/109951162868128395.jpg",
              "authority": 0,
              "mutual": false,
              "expertTags": null,
              "experts": null,
              "djStatus": 0,
              "vipType": 0,
              "remarkName": null,
              "avatarImgIdStr": "109951164781511113",
              "backgroundImgIdStr": "109951162868128395",
              "avatarImgId_str": "109951164781511113"
            },
            "urlInfo": {
              "id": "E02A88CF2AE65C449CADD2371C315F18",
              "url": "http://vodkgeyttp9.vod.126.net/vodkgeyttp8/UPF3ch3c_2981347105_uhd.mp4?ts=1602902982&rid=3009063014E119FC636C42FBC02D0085&rl=3&rs=emnEcbTFOFCBkvOhDuUKTDioVBbYMoej&sign=74f043e422f309fb1f240ed7c535a9f5&ext=f0xw0mOJqGcf8yfMQn4khLo0vOAZ2Oret6FDS9VvANIOB778zOa0GNkWKbpJigsUUQr5jG+TbSVFBopWbJqfxOMWz6qSwzClvQwG9aI/msQPte7+2SQ2gGKFPduzNhXy/81Ne8nvhkod6vr0JXFqCRZ2dpI6sWzVchry/GdmoJaRw2s1XDLSAyQ1oqJLHpSvPOrqeMkLsgG48vej5u25h9Xk4Oz5m3oL3T7bKoVzbcDl3L+mCrSoqLHT+K/n0tyB",
              "size": 137540575,
              "validityTime": 1200,
              "needPay": false,
              "payInfo": null,
              "r": 1080
            },
            "videoGroup": [
              {
                "id": -8013,
                "name": "#人气飙升榜#",
                "alg": "groupTagRank"
              },
              {
                "id": 23118,
                "name": "华晨宇",
                "alg": "groupTagRank"
              },
              {
                "id": 59101,
                "name": "华语现场",
                "alg": "groupTagRank"
              },
              {
                "id": 59108,
                "name": "巡演现场",
                "alg": "groupTagRank"
              },
              {
                "id": 1100,
                "name": "音乐现场",
                "alg": "groupTagRank"
              },
              {
                "id": 58100,
                "name": "现场",
                "alg": "groupTagRank"
              },
              {
                "id": 5100,
                "name": "音乐",
                "alg": "groupTagRank"
              }
            ],
            "previewUrl": null,
            "previewDurationms": 0,
            "hasRelatedGameAd": false,
            "markTypes": null,
            "relateSong": [
              {
                "name": "西门少年 (Live)",
                "id": 1442842608,
                "pst": 0,
                "t": 0,
                "ar": [
                  {
                    "id": 861777,
                    "name": "华晨宇",
                    "tns": [],
                    "alias": []
                  },
                  {
                    "id": 8327,
                    "name": "李宇春",
                    "tns": [],
                    "alias": []
                  }
                ],
                "alia": [
                  "原唱：李宇春"
                ],
                "pop": 100,
                "st": 0,
                "rt": "",
                "fee": 8,
                "v": 4,
                "crbt": null,
                "cf": "",
                "al": {
                  "id": 88421277,
                  "name": "歌手·当打之年 第12期",
                  "picUrl": "http://p3.music.126.net/mOa6Y35QQa2-A5HArd58sQ==/109951164933975773.jpg",
                  "tns": [],
                  "pic_str": "109951164933975773",
                  "pic": 109951164933975780
                },
                "dt": 293850,
                "h": {
                  "br": 320000,
                  "fid": 0,
                  "size": 11756205,
                  "vd": -26779
                },
                "m": {
                  "br": 192000,
                  "fid": 0,
                  "size": 7053741,
                  "vd": -24264
                },
                "l": {
                  "br": 128000,
                  "fid": 0,
                  "size": 4702509,
                  "vd": -22819
                },
                "a": null,
                "cd": "01",
                "no": 7,
                "rtUrl": null,
                "ftype": 0,
                "rtUrls": [],
                "djId": 0,
                "copyright": 0,
                "s_id": 0,
                "rtype": 0,
                "rurl": null,
                "mst": 9,
                "cp": 1416682,
                "mv": 0,
                "publishTime": 0,
                "privilege": {
                  "id": 1442842608,
                  "fee": 8,
                  "payed": 0,
                  "st": 0,
                  "pl": 128000,
                  "dl": 0,
                  "sp": 7,
                  "cp": 1,
                  "subp": 1,
                  "cs": false,
                  "maxbr": 999000,
                  "fl": 128000,
                  "toast": false,
                  "flag": 68,
                  "preSell": false
                }
              }
            ],
            "relatedInfo": null,
            "videoUserLiveInfo": null,
            "vid": "E02A88CF2AE65C449CADD2371C315F18",
            "durationms": 302891,
            "playTime": 363031,
            "praisedCount": 5362,
            "praised": false,
            "subscribed": false
          }
        },
        {
          "type": 1,
          "displayed": false,
          "alg": "onlineHotGroup",
          "extAlg": null,
          "data": {
            "alg": "onlineHotGroup",
            "scm": "1.music-video-timeline.video_timeline.video.181017.-295043608",
            "threadId": "R_VI_62_510C8F5A9DA8DC23997E522B85F1FB3A",
            "coverUrl": "https://p2.music.126.net/W_p6aX7vCFR9Lk-wV0x1Eg==/109951164666337012.jpg",
            "height": 720,
            "width": 1280,
            "title": "断眉联手麻神在湖人中场表演《See you again》致敬科比",
            "description": "Wiz Khalifa和Charlie Puth在中场休息时为科比演唱的《See you again》\n\n“It's been a long day without you my friend”\n\n#Charlie Puth#|#Wiz Khalifa#",
            "commentCount": 139,
            "shareCount": 317,
            "resolutions": [
              {
                "resolution": 240,
                "size": 17757824
              },
              {
                "resolution": 480,
                "size": 28683079
              },
              {
                "resolution": 720,
                "size": 36021554
              }
            ],
            "creator": {
              "defaultAvatar": false,
              "province": 1000000,
              "authStatus": 0,
              "followed": false,
              "avatarUrl": "http://p1.music.126.net/HjT8-LnESerQh-mC7bvXBw==/109951165359708723.jpg",
              "accountStatus": 0,
              "gender": 0,
              "city": 1006600,
              "birthday": 818804058083,
              "userId": 391194506,
              "userType": 200,
              "nickname": "欧美音乐杂货铺",
              "signature": "“环球音乐专属音乐资讯号” “电影资讯号”“欧美音乐资讯号”\n\nColdplay One Direction Paul Walker 百家影视独家资讯站，欢迎光临~\nTaylor Swift\nChris Hemsworth\nChris Evans\nSebastian Stan\n张艺兴",
              "description": "",
              "detailDescription": "",
              "avatarImgId": 109951165359708720,
              "backgroundImgId": 109951165311536080,
              "backgroundUrl": "http://p1.music.126.net/TsZo0EMK_FECf9sHJkx8RQ==/109951165311536074.jpg",
              "authority": 0,
              "mutual": false,
              "expertTags": [
                "欧美"
              ],
              "experts": {
                "1": "音乐视频达人",
                "2": "音乐图文达人"
              },
              "djStatus": 10,
              "vipType": 0,
              "remarkName": null,
              "avatarImgIdStr": "109951165359708723",
              "backgroundImgIdStr": "109951165311536074",
              "avatarImgId_str": "109951165359708723"
            },
            "urlInfo": {
              "id": "510C8F5A9DA8DC23997E522B85F1FB3A",
              "url": "http://vodkgeyttp9.vod.126.net/vodkgeyttp8/7NiPfon1_2893278030_shd.mp4?ts=1602902982&rid=3009063014E119FC636C42FBC02D0085&rl=3&rs=rnqPXTyYCIrmKFYdotyVQgiBLQxNFMkq&sign=cbb3dc0c123693e656ec5c8aa6aa4fe8&ext=f0xw0mOJqGcf8yfMQn4khLo0vOAZ2Oret6FDS9VvANIOB778zOa0GNkWKbpJigsUUQr5jG+TbSVFBopWbJqfxOMWz6qSwzClvQwG9aI/msQPte7+2SQ2gGKFPduzNhXy/81Ne8nvhkod6vr0JXFqCRZ2dpI6sWzVchry/GdmoJaRw2s1XDLSAyQ1oqJLHpSvPOrqeMkLsgG48vej5u25h9Xk4Oz5m3oL3T7bKoVzbcDl3L+mCrSoqLHT+K/n0tyB",
              "size": 36021554,
              "validityTime": 1200,
              "needPay": false,
              "payInfo": null,
              "r": 720
            },
            "videoGroup": [
              {
                "id": -8003,
                "name": "#点赞榜#",
                "alg": "groupTagRank"
              },
              {
                "id": 16194,
                "name": "Charlie Puth",
                "alg": "groupTagRank"
              },
              {
                "id": 1100,
                "name": "音乐现场",
                "alg": "groupTagRank"
              },
              {
                "id": 58100,
                "name": "现场",
                "alg": "groupTagRank"
              },
              {
                "id": 5100,
                "name": "音乐",
                "alg": "groupTagRank"
              }
            ],
            "previewUrl": null,
            "previewDurationms": 0,
            "hasRelatedGameAd": false,
            "markTypes": null,
            "relateSong": [
              {
                "name": "See You Again",
                "id": 401722227,
                "pst": 0,
                "t": 0,
                "ar": [
                  {
                    "id": 90331,
                    "name": "Charlie Puth",
                    "tns": [],
                    "alias": []
                  },
                  {
                    "id": 46006,
                    "name": "Wiz Khalifa",
                    "tns": [],
                    "alias": []
                  }
                ],
                "alia": [
                  "电影《速度与激情7》片尾曲"
                ],
                "pop": 100,
                "st": 0,
                "rt": null,
                "fee": 1,
                "v": 16,
                "crbt": null,
                "cf": "",
                "al": {
                  "id": 3270972,
                  "name": "Nine Track Mind",
                  "picUrl": "http://p3.music.126.net/OVHar05vedbWFEWHuArbGA==/3295236348738229.jpg",
                  "tns": [],
                  "pic": 3295236348738229
                },
                "dt": 229564,
                "h": {
                  "br": 320000,
                  "fid": 0,
                  "size": 9184696,
                  "vd": -11799
                },
                "m": {
                  "br": 192000,
                  "fid": 0,
                  "size": 5510834,
                  "vd": -9300
                },
                "l": {
                  "br": 128000,
                  "fid": 0,
                  "size": 3673904,
                  "vd": -7799
                },
                "a": null,
                "cd": "1",
                "no": 13,
                "rtUrl": null,
                "ftype": 0,
                "rtUrls": [],
                "djId": 0,
                "copyright": 1,
                "s_id": 0,
                "rtype": 0,
                "rurl": null,
                "mst": 9,
                "cp": 7002,
                "mv": 393006,
                "publishTime": 1454254457074,
                "privilege": {
                  "id": 401722227,
                  "fee": 1,
                  "payed": 0,
                  "st": 0,
                  "pl": 0,
                  "dl": 0,
                  "sp": 0,
                  "cp": 0,
                  "subp": 0,
                  "cs": false,
                  "maxbr": 320000,
                  "fl": 0,
                  "toast": false,
                  "flag": 1284,
                  "preSell": false
                }
              },
              {
                "name": "See You Again",
                "id": 30953009,
                "pst": 0,
                "t": 0,
                "ar": [
                  {
                    "id": 46006,
                    "name": "Wiz Khalifa",
                    "tns": [],
                    "alias": []
                  },
                  {
                    "id": 90331,
                    "name": "Charlie Puth",
                    "tns": [],
                    "alias": []
                  }
                ],
                "alia": [
                  "电影《速度与激情7》致敬保罗沃克插曲"
                ],
                "pop": 100,
                "st": 0,
                "rt": null,
                "fee": 1,
                "v": 289,
                "crbt": null,
                "cf": "",
                "al": {
                  "id": 3104138,
                  "name": "Furious 7 (Original Motion Picture Soundtrack)",
                  "picUrl": "http://p3.music.126.net/JIc9X91OSH-7fUZqVfQXAQ==/7731765766799133.jpg",
                  "tns": [],
                  "pic": 7731765766799133
                },
                "dt": 230520,
                "h": {
                  "br": 320000,
                  "fid": 0,
                  "size": 9223358,
                  "vd": -17300
                },
                "m": {
                  "br": 192000,
                  "fid": 0,
                  "size": 5534032,
                  "vd": -14800
                },
                "l": {
                  "br": 128000,
                  "fid": 0,
                  "size": 3689369,
                  "vd": -13400
                },
                "a": null,
                "cd": "1",
                "no": 7,
                "rtUrl": null,
                "ftype": 0,
                "rtUrls": [],
                "djId": 0,
                "copyright": 2,
                "s_id": 0,
                "rtype": 0,
                "rurl": null,
                "mst": 9,
                "cp": 7002,
                "mv": 393006,
                "publishTime": 1426521600007,
                "tns": [
                  "有缘再见"
                ],
                "privilege": {
                  "id": 30953009,
                  "fee": 1,
                  "payed": 0,
                  "st": 0,
                  "pl": 0,
                  "dl": 0,
                  "sp": 0,
                  "cp": 0,
                  "subp": 0,
                  "cs": false,
                  "maxbr": 999000,
                  "fl": 0,
                  "toast": false,
                  "flag": 1284,
                  "preSell": false
                }
              }
            ],
            "relatedInfo": null,
            "videoUserLiveInfo": null,
            "vid": "510C8F5A9DA8DC23997E522B85F1FB3A",
            "durationms": 228739,
            "playTime": 418612,
            "praisedCount": 3532,
            "praised": false,
            "subscribed": false
          }
        },
        {
          "type": 1,
          "displayed": false,
          "alg": "onlineHotGroup",
          "extAlg": null,
          "data": {
            "alg": "onlineHotGroup",
            "scm": "1.music-video-timeline.video_timeline.video.181017.-295043608",
            "threadId": "R_VI_62_A54AEB1C28CCD7990E7E6EAB56ECA485",
            "coverUrl": "https://p2.music.126.net/nj51zvc7TQHbg_dCZKDerg==/109951165037815775.jpg",
            "height": 486,
            "width": 864,
            "title": "动漫《你的名字》插曲《スパークル》，现场版太好听！",
            "description": null,
            "commentCount": 21,
            "shareCount": 18,
            "resolutions": [
              {
                "resolution": 240,
                "size": 13805898
              },
              {
                "resolution": 480,
                "size": 13565707
              }
            ],
            "creator": {
              "defaultAvatar": false,
              "province": 440000,
              "authStatus": 1,
              "followed": false,
              "avatarUrl": "http://p1.music.126.net/N0NpmREOm_yb0w_X5zLO5w==/7795537441726101.jpg",
              "accountStatus": 0,
              "gender": 1,
              "city": 440100,
              "birthday": 953136000000,
              "userId": 247337423,
              "userType": 4,
              "nickname": "椰汁超甜",
              "signature": "来不及.",
              "description": "",
              "detailDescription": "",
              "avatarImgId": 7795537441726101,
              "backgroundImgId": 18641120139551856,
              "backgroundUrl": "http://p1.music.126.net/4ZlZ1W4gaf6UwR1wFVA0XQ==/18641120139551855.jpg",
              "authority": 0,
              "mutual": false,
              "expertTags": null,
              "experts": {
                "1": "二次元视频达人"
              },
              "djStatus": 10,
              "vipType": 11,
              "remarkName": null,
              "avatarImgIdStr": "7795537441726101",
              "backgroundImgIdStr": "18641120139551855"
            },
            "urlInfo": {
              "id": "A54AEB1C28CCD7990E7E6EAB56ECA485",
              "url": "http://vodkgeyttp9.vod.126.net/cloudmusic/e6eed2962315dc66cdcef781e1e83211.mp4?ts=1602902982&rid=3009063014E119FC636C42FBC02D0085&rl=3&rs=LZiZsPiFzqLGysfTDEPypqyNqKRbyyDi&sign=fe210fb85ba1f8b88ff7ddceb30f8016&ext=f0xw0mOJqGcf8yfMQn4khLo0vOAZ2Oret6FDS9VvANIOB778zOa0GNkWKbpJigsUUQr5jG+TbSVFBopWbJqfxOMWz6qSwzClvQwG9aI/msQPte7+2SQ2gGKFPduzNhXy/81Ne8nvhkod6vr0JXFqCRZ2dpI6sWzVchry/GdmoJaRw2s1XDLSAyQ1oqJLHpSvPOrqeMkLsgG48vej5u25h9Xk4Oz5m3oL3T7bKoVzbcDl3L+mCrSoqLHT+K/n0tyB",
              "size": 13565707,
              "validityTime": 1200,
              "needPay": false,
              "payInfo": null,
              "r": 480
            },
            "videoGroup": [
              {
                "id": 60101,
                "name": "日语现场",
                "alg": "groupTagRank"
              },
              {
                "id": 59108,
                "name": "巡演现场",
                "alg": "groupTagRank"
              },
              {
                "id": 57108,
                "name": "流行现场",
                "alg": "groupTagRank"
              },
              {
                "id": 3102,
                "name": "二次元",
                "alg": "groupTagRank"
              },
              {
                "id": 1100,
                "name": "音乐现场",
                "alg": "groupTagRank"
              },
              {
                "id": 58100,
                "name": "现场",
                "alg": "groupTagRank"
              },
              {
                "id": 5100,
                "name": "音乐",
                "alg": "groupTagRank"
              }
            ],
            "previewUrl": null,
            "previewDurationms": 0,
            "hasRelatedGameAd": false,
            "markTypes": null,
            "relateSong": [],
            "relatedInfo": null,
            "videoUserLiveInfo": null,
            "vid": "A54AEB1C28CCD7990E7E6EAB56ECA485",
            "durationms": 360000,
            "playTime": 29579,
            "praisedCount": 392,
            "praised": false,
            "subscribed": false
          }
        },
        {
          "type": 1,
          "displayed": false,
          "alg": "onlineHotGroup",
          "extAlg": null,
          "data": {
            "alg": "onlineHotGroup",
            "scm": "1.music-video-timeline.video_timeline.video.181017.-295043608",
            "threadId": "R_VI_62_C4299C0654762635964C1EDE4CED60BB",
            "coverUrl": "https://p2.music.126.net/E_1PyKAfru_fMuujOcs2XQ==/109951163787833870.jpg",
            "height": 720,
            "width": 1280,
            "title": "Bigbang能把颁奖礼办成演唱会，这互动好有趣！",
            "description": "Bigbang能把颁奖礼办成演唱会，这互动好有趣！",
            "commentCount": 896,
            "shareCount": 642,
            "resolutions": [
              {
                "resolution": 240,
                "size": 14694445
              },
              {
                "resolution": 480,
                "size": 24822776
              },
              {
                "resolution": 720,
                "size": 38022088
              }
            ],
            "creator": {
              "defaultAvatar": false,
              "province": 350000,
              "authStatus": 0,
              "followed": false,
              "avatarUrl": "http://p1.music.126.net/p0xg8RpP9ohc3xjDCiePfA==/109951163781470122.jpg",
              "accountStatus": 0,
              "gender": 0,
              "city": 350100,
              "birthday": -2209017600000,
              "userId": 1701877461,
              "userType": 0,
              "nickname": "莫想聆听",
              "signature": "",
              "description": "",
              "detailDescription": "",
              "avatarImgId": 109951163781470130,
              "backgroundImgId": 109951162868126480,
              "backgroundUrl": "http://p1.music.126.net/_f8R60U9mZ42sSNvdPn2sQ==/109951162868126486.jpg",
              "authority": 0,
              "mutual": false,
              "expertTags": null,
              "experts": null,
              "djStatus": 0,
              "vipType": 0,
              "remarkName": null,
              "avatarImgIdStr": "109951163781470122",
              "backgroundImgIdStr": "109951162868126486",
              "avatarImgId_str": "109951163781470122"
            },
            "urlInfo": {
              "id": "C4299C0654762635964C1EDE4CED60BB",
              "url": "http://vodkgeyttp9.vod.126.net/vodkgeyttp8/pD0Vohdf_2246837624_shd.mp4?ts=1602902982&rid=3009063014E119FC636C42FBC02D0085&rl=3&rs=zlbjKhVVyQUDwIDdtIovWhUisRaExFVz&sign=8d58b0847a8e9e3cf6453c7635182925&ext=f0xw0mOJqGcf8yfMQn4khLo0vOAZ2Oret6FDS9VvANIOB778zOa0GNkWKbpJigsUUQr5jG+TbSVFBopWbJqfxOMWz6qSwzClvQwG9aI/msQPte7+2SQ2gGKFPduzNhXy/81Ne8nvhkod6vr0JXFqCRZ2dpI6sWzVchry/GdmoJaRw2s1XDLSAyQ1oqJLHpSvPOrqeMkLsgG48vej5u25h9Xk4Oz5m3oL3T7bKoVzbcDl3L+mCrSoqLHT+K/n0tyB",
              "size": 38022088,
              "validityTime": 1200,
              "needPay": false,
              "payInfo": null,
              "r": 720
            },
            "videoGroup": [
              {
                "id": -33206,
                "name": "#BIGBANG（빅뱅）#",
                "alg": "groupTagRank"
              },
              {
                "id": 10114,
                "name": "BIGBANG",
                "alg": "groupTagRank"
              },
              {
                "id": 14255,
                "name": "颁奖晚会盛典",
                "alg": "groupTagRank"
              },
              {
                "id": 103111,
                "name": "韩语资讯",
                "alg": "groupTagRank"
              },
              {
                "id": 25137,
                "name": "音乐资讯",
                "alg": "groupTagRank"
              },
              {
                "id": 12100,
                "name": "流行",
                "alg": "groupTagRank"
              },
              {
                "id": 1100,
                "name": "音乐现场",
                "alg": "groupTagRank"
              },
              {
                "id": 58100,
                "name": "现场",
                "alg": "groupTagRank"
              },
              {
                "id": 5100,
                "name": "音乐",
                "alg": "groupTagRank"
              }
            ],
            "previewUrl": null,
            "previewDurationms": 0,
            "hasRelatedGameAd": false,
            "markTypes": null,
            "relateSong": [
              {
                "name": "FANTASTIC BABY",
                "id": 30854090,
                "pst": 0,
                "t": 0,
                "ar": [
                  {
                    "id": 126339,
                    "name": "BIGBANG",
                    "tns": [],
                    "alias": []
                  }
                ],
                "alia": [
                  "Japanese Ver."
                ],
                "pop": 100,
                "st": 0,
                "rt": null,
                "fee": 1,
                "v": 236,
                "crbt": null,
                "cf": "",
                "al": {
                  "id": 3104651,
                  "name": "THE BEST OF BIGBANG 2006-2014",
                  "picUrl": "http://p4.music.126.net/l6BwLqjtNjMr2surmIOufg==/109951163199340826.jpg",
                  "tns": [],
                  "pic_str": "109951163199340826",
                  "pic": 109951163199340830
                },
                "dt": 231626,
                "h": {
                  "br": 320000,
                  "fid": 0,
                  "size": 9267244,
                  "vd": -34000
                },
                "m": {
                  "br": 192000,
                  "fid": 0,
                  "size": 5560364,
                  "vd": -31500
                },
                "l": {
                  "br": 128000,
                  "fid": 0,
                  "size": 3706924,
                  "vd": -30100
                },
                "a": null,
                "cd": "1",
                "no": 12,
                "rtUrl": null,
                "ftype": 0,
                "rtUrls": [],
                "djId": 0,
                "copyright": 2,
                "s_id": 0,
                "rtype": 0,
                "rurl": null,
                "mst": 9,
                "cp": 457010,
                "mv": 0,
                "publishTime": 1416931200007,
                "privilege": {
                  "id": 30854090,
                  "fee": 1,
                  "payed": 0,
                  "st": 0,
                  "pl": 0,
                  "dl": 0,
                  "sp": 0,
                  "cp": 0,
                  "subp": 0,
                  "cs": false,
                  "maxbr": 999000,
                  "fl": 0,
                  "toast": false,
                  "flag": 1093,
                  "preSell": false
                }
              }
            ],
            "relatedInfo": null,
            "videoUserLiveInfo": null,
            "vid": "C4299C0654762635964C1EDE4CED60BB",
            "durationms": 99114,
            "playTime": 3411106,
            "praisedCount": 15985,
            "praised": false,
            "subscribed": false
          }
        },
        {
          "type": 1,
          "displayed": false,
          "alg": "onlineHotGroup",
          "extAlg": null,
          "data": {
            "alg": "onlineHotGroup",
            "scm": "1.music-video-timeline.video_timeline.video.181017.-295043608",
            "threadId": "R_VI_62_21ED2223ADDAA5FC9DD5FA596ADF9A11",
            "coverUrl": "https://p2.music.126.net/0AMmrU7zVrUHKFMrnG3DlQ==/109951163811950820.jpg",
            "height": 1080,
            "width": 1920,
            "title": "李宗盛 《为你我受冷风吹》现场版",
            "description": "李宗盛 《为你我受冷风吹》现场版 II 若是爱已不可为，你明白说吧无所谓。\n\n但愿我会就此放下往事，忘了过去有多美\n不盼缘尽仍留慈悲，虽然我曾经这样以为，我真的这样以为",
            "commentCount": 973,
            "shareCount": 5423,
            "resolutions": [
              {
                "resolution": 240,
                "size": 18230031
              },
              {
                "resolution": 480,
                "size": 34373102
              },
              {
                "resolution": 720,
                "size": 51666648
              },
              {
                "resolution": 1080,
                "size": 92646784
              }
            ],
            "creator": {
              "defaultAvatar": false,
              "province": 350000,
              "authStatus": 0,
              "followed": false,
              "avatarUrl": "http://p1.music.126.net/GtIXN9Bpk7eGcGtXwMZfRA==/6634453162191982.jpg",
              "accountStatus": 0,
              "gender": 1,
              "city": 350500,
              "birthday": 680198400000,
              "userId": 34652764,
              "userType": 201,
              "nickname": "乌托邦电台",
              "signature": "知名音乐自媒体，新浪微博@乌托邦电台 （宣传、品牌合作请私信）",
              "description": "",
              "detailDescription": "",
              "avatarImgId": 6634453162191982,
              "backgroundImgId": 109951163156242990,
              "backgroundUrl": "http://p1.music.126.net/x2MDv3VHl-59oDc1MTYmPQ==/109951163156242986.jpg",
              "authority": 0,
              "mutual": false,
              "expertTags": null,
              "experts": {
                "1": "音乐视频达人",
                "2": "华语音乐资讯达人"
              },
              "djStatus": 10,
              "vipType": 11,
              "remarkName": null,
              "avatarImgIdStr": "6634453162191982",
              "backgroundImgIdStr": "109951163156242986"
            },
            "urlInfo": {
              "id": "21ED2223ADDAA5FC9DD5FA596ADF9A11",
              "url": "http://vodkgeyttp9.vod.126.net/vodkgeyttp8/GqyxO6ox_2271663003_uhd.mp4?ts=1602902982&rid=3009063014E119FC636C42FBC02D0085&rl=3&rs=FWdhShbgJMLHExhqpgvURhgdlLEDOodn&sign=edf69fa09a057febadb312d5f95f5d54&ext=f0xw0mOJqGcf8yfMQn4khLo0vOAZ2Oret6FDS9VvANIOB778zOa0GNkWKbpJigsUUQr5jG+TbSVFBopWbJqfxOMWz6qSwzClvQwG9aI/msQPte7+2SQ2gGKFPduzNhXy/81Ne8nvhkod6vr0JXFqCRZ2dpI6sWzVchry/GdmoJaRw2s1XDLSAyQ1oqJLHpSvPOrqeMkLsgG48vej5u25h9Xk4Oz5m3oL3T7bKoVzbcDl3L+mCrSoqLHT+K/n0tyB",
              "size": 92646784,
              "validityTime": 1200,
              "needPay": false,
              "payInfo": null,
              "r": 1080
            },
            "videoGroup": [
              {
                "id": -8001,
                "name": "#热搜榜#",
                "alg": "groupTagRank"
              },
              {
                "id": 14133,
                "name": "李宗盛",
                "alg": "groupTagRank"
              },
              {
                "id": 254120,
                "name": "滚石唱片行",
                "alg": "groupTagRank"
              },
              {
                "id": 57110,
                "name": "饭拍现场",
                "alg": "groupTagRank"
              },
              {
                "id": 59101,
                "name": "华语现场",
                "alg": "groupTagRank"
              },
              {
                "id": 57108,
                "name": "流行现场",
                "alg": "groupTagRank"
              },
              {
                "id": 1100,
                "name": "音乐现场",
                "alg": "groupTagRank"
              },
              {
                "id": 58100,
                "name": "现场",
                "alg": "groupTagRank"
              },
              {
                "id": 5100,
                "name": "音乐",
                "alg": "groupTagRank"
              }
            ],
            "previewUrl": null,
            "previewDurationms": 0,
            "hasRelatedGameAd": false,
            "markTypes": null,
            "relateSong": [
              {
                "name": "为你我受冷风吹",
                "id": 257098,
                "pst": 0,
                "t": 0,
                "ar": [
                  {
                    "id": 8336,
                    "name": "林忆莲",
                    "tns": [],
                    "alias": []
                  }
                ],
                "alia": [],
                "pop": 100,
                "st": 0,
                "rt": "600902000007915837",
                "fee": 8,
                "v": 37,
                "crbt": null,
                "cf": "",
                "al": {
                  "id": 25645,
                  "name": "Love, Sandy",
                  "picUrl": "http://p3.music.126.net/5qWWTetRGYBc-ktiJLZsCw==/109951163076136658.jpg",
                  "tns": [],
                  "pic_str": "109951163076136658",
                  "pic": 109951163076136660
                },
                "dt": 259666,
                "h": {
                  "br": 320000,
                  "fid": 0,
                  "size": 10389464,
                  "vd": -27828
                },
                "m": {
                  "br": 192000,
                  "fid": 0,
                  "size": 6233696,
                  "vd": -25262
                },
                "l": {
                  "br": 128000,
                  "fid": 0,
                  "size": 4155812,
                  "vd": -23640
                },
                "a": null,
                "cd": "1",
                "no": 6,
                "rtUrl": null,
                "ftype": 0,
                "rtUrls": [],
                "djId": 0,
                "copyright": 0,
                "s_id": 0,
                "rtype": 0,
                "rurl": null,
                "mst": 9,
                "cp": 684010,
                "mv": 10929162,
                "publishTime": 788889600000,
                "privilege": {
                  "id": 257098,
                  "fee": 8,
                  "payed": 0,
                  "st": 0,
                  "pl": 128000,
                  "dl": 0,
                  "sp": 7,
                  "cp": 1,
                  "subp": 1,
                  "cs": false,
                  "maxbr": 999000,
                  "fl": 128000,
                  "toast": false,
                  "flag": 68,
                  "preSell": false
                }
              }
            ],
            "relatedInfo": null,
            "videoUserLiveInfo": null,
            "vid": "21ED2223ADDAA5FC9DD5FA596ADF9A11",
            "durationms": 226788,
            "playTime": 3291453,
            "praisedCount": 16422,
            "praised": false,
            "subscribed": false
          }
        },
        {
          "type": 1,
          "displayed": false,
          "alg": "onlineHotGroup",
          "extAlg": null,
          "data": {
            "alg": "onlineHotGroup",
            "scm": "1.music-video-timeline.video_timeline.video.181017.-295043608",
            "threadId": "R_VI_62_FBDD3F96E31C31E34553A5D06EC72DD7",
            "coverUrl": "https://p2.music.126.net/06lpFHx43xpOtn6OWhvOVw==/109951163956043222.jpg",
            "height": 720,
            "width": 1280,
            "title": "姚贝娜 - 惊鸿舞 & 菩萨蛮",
            "description": "姚贝娜 - 惊鸿舞 & 菩萨蛮\n这是什么人啊 现场唱成这样 而且每个现场都能唱成这样\n声音实在太美了 无暇的美",
            "commentCount": 147,
            "shareCount": 296,
            "resolutions": [
              {
                "resolution": 240,
                "size": 22971644
              },
              {
                "resolution": 480,
                "size": 38609043
              },
              {
                "resolution": 720,
                "size": 55890087
              }
            ],
            "creator": {
              "defaultAvatar": false,
              "province": 1000000,
              "authStatus": 0,
              "followed": false,
              "avatarUrl": "http://p1.music.126.net/veHKeJvsBRJcbWqSLDTadg==/109951164592779530.jpg",
              "accountStatus": 0,
              "gender": 1,
              "city": 1001600,
              "birthday": 2190902400000,
              "userId": 43772457,
              "userType": 0,
              "nickname": "野三坡坡坡",
              "signature": "wassup babe?",
              "description": "",
              "detailDescription": "",
              "avatarImgId": 109951164592779540,
              "backgroundImgId": 109951165046711330,
              "backgroundUrl": "http://p1.music.126.net/Jv20bPhLhiayfk1JNnlczw==/109951165046711333.jpg",
              "authority": 0,
              "mutual": false,
              "expertTags": null,
              "experts": null,
              "djStatus": 0,
              "vipType": 11,
              "remarkName": null,
              "avatarImgIdStr": "109951164592779530",
              "backgroundImgIdStr": "109951165046711333",
              "avatarImgId_str": "109951164592779530"
            },
            "urlInfo": {
              "id": "FBDD3F96E31C31E34553A5D06EC72DD7",
              "url": "http://vodkgeyttp9.vod.126.net/vodkgeyttp8/X0ooTNGS_2392962177_shd.mp4?ts=1602902982&rid=3009063014E119FC636C42FBC02D0085&rl=3&rs=mhDBserywvdUZZAhEJKQGaKrPVuLvEQG&sign=0adb09a3773e79555aa2891ef70fd8f5&ext=f0xw0mOJqGcf8yfMQn4khLo0vOAZ2Oret6FDS9VvANIOB778zOa0GNkWKbpJigsUUQr5jG+TbSVFBopWbJqfxOMWz6qSwzClvQwG9aI/msQPte7+2SQ2gGKFPduzNhXy/81Ne8nvhkod6vr0JXFqCRZ2dpI6sWzVchry/GdmoJaRw2s1XDLSAyQ1oqJLHpSvPOrqeMkLsgG48vej5u25h9Xk4Oz5m3oL3T7bKoVzbcDl3L+mCrSoqLHT+K/n0tyB",
              "size": 55890087,
              "validityTime": 1200,
              "needPay": false,
              "payInfo": null,
              "r": 720
            },
            "videoGroup": [
              {
                "id": -31741,
                "name": "#『中华诗文』诗词浅唱，请君为我倾耳听…#",
                "alg": "groupTagRank"
              },
              {
                "id": 9102,
                "name": "演唱会",
                "alg": "groupTagRank"
              },
              {
                "id": 59101,
                "name": "华语现场",
                "alg": "groupTagRank"
              },
              {
                "id": 57108,
                "name": "流行现场",
                "alg": "groupTagRank"
              },
              {
                "id": 1100,
                "name": "音乐现场",
                "alg": "groupTagRank"
              },
              {
                "id": 58100,
                "name": "现场",
                "alg": "groupTagRank"
              },
              {
                "id": 5100,
                "name": "音乐",
                "alg": "groupTagRank"
              }
            ],
            "previewUrl": null,
            "previewDurationms": 0,
            "hasRelatedGameAd": false,
            "markTypes": null,
            "relateSong": [],
            "relatedInfo": null,
            "videoUserLiveInfo": null,
            "vid": "FBDD3F96E31C31E34553A5D06EC72DD7",
            "durationms": 238762,
            "playTime": 295066,
            "praisedCount": 1984,
            "praised": false,
            "subscribed": false
          }
        },
        {
          "type": 1,
          "displayed": false,
          "alg": "onlineHotGroup",
          "extAlg": null,
          "data": {
            "alg": "onlineHotGroup",
            "scm": "1.music-video-timeline.video_timeline.video.181017.-295043608",
            "threadId": "R_VI_62_DCFAFE6105D21B4A6D4530DBF923B939",
            "coverUrl": "https://p2.music.126.net/u9DiG5l16itCXQ-FSGh5WA==/109951164735069085.jpg",
            "height": 720,
            "width": 1280,
            "title": "胡彦斌 于文文吵架式演唱《爱之初体验》 嗓音满是洒脱与不羁！",
            "description": "胡彦斌  于文文吵架式演唱《爱之初体验》 嗓音满是洒脱与不羁！",
            "commentCount": 355,
            "shareCount": 2581,
            "resolutions": [
              {
                "resolution": 240,
                "size": 43626769
              },
              {
                "resolution": 480,
                "size": 71560563
              },
              {
                "resolution": 720,
                "size": 101293564
              }
            ],
            "creator": {
              "defaultAvatar": false,
              "province": 650000,
              "authStatus": 0,
              "followed": false,
              "avatarUrl": "http://p1.music.126.net/jGaSqoYu_r1ICvky2dimGw==/109951165391125525.jpg",
              "accountStatus": 0,
              "gender": 1,
              "city": 650100,
              "birthday": 923760000000,
              "userId": 113164676,
              "userType": 200,
              "nickname": "苏奕杰",
              "signature": "及时行乐. Vx:ways2050",
              "description": "",
              "detailDescription": "",
              "avatarImgId": 109951165391125520,
              "backgroundImgId": 109951165381738600,
              "backgroundUrl": "http://p1.music.126.net/gAD73rVHk2bdps4LkLHblw==/109951165381738588.jpg",
              "authority": 0,
              "mutual": false,
              "expertTags": [
                "华语",
                "流行",
                "欧美"
              ],
              "experts": {
                "2": "生活图文达人"
              },
              "djStatus": 10,
              "vipType": 11,
              "remarkName": null,
              "avatarImgIdStr": "109951165391125525",
              "backgroundImgIdStr": "109951165381738588",
              "avatarImgId_str": "109951165391125525"
            },
            "urlInfo": {
              "id": "DCFAFE6105D21B4A6D4530DBF923B939",
              "url": "http://vodkgeyttp9.vod.126.net/vodkgeyttp8/HaQO68Lf_2914703451_shd.mp4?ts=1602902982&rid=3009063014E119FC636C42FBC02D0085&rl=3&rs=wNMYRAHxSkfLdXyPxEzIXcgwpVWGpmkd&sign=c8fe34edebf3f08120bc0e7411626dbd&ext=f0xw0mOJqGcf8yfMQn4khLo0vOAZ2Oret6FDS9VvANIOB778zOa0GNkWKbpJigsUUQr5jG+TbSVFBopWbJqfxOMWz6qSwzClvQwG9aI/msQPte7+2SQ2gGKFPduzNhXy/81Ne8nvhkod6vr0JXFqCRZ2dpI6sWzVchry/GdmoJaRw2s1XDLSAyQ1oqJLHpSvPOrqeMkLsgG48vej5u25h9Xk4Oz5m3oL3T7bKoVzbcDl3L+mCrSoqLHT+K/n0tyB",
              "size": 101293564,
              "validityTime": 1200,
              "needPay": false,
              "payInfo": null,
              "r": 720
            },
            "videoGroup": [
              {
                "id": -8005,
                "name": "#收藏榜#",
                "alg": "groupTagRank"
              },
              {
                "id": 3101,
                "name": "综艺",
                "alg": "groupTagRank"
              },
              {
                "id": 4101,
                "name": "娱乐",
                "alg": "groupTagRank"
              },
              {
                "id": 72116,
                "name": "短片",
                "alg": "groupTagRank"
              },
              {
                "id": 23116,
                "name": "音乐推荐",
                "alg": "groupTagRank"
              },
              {
                "id": 1100,
                "name": "音乐现场",
                "alg": "groupTagRank"
              },
              {
                "id": 58100,
                "name": "现场",
                "alg": "groupTagRank"
              },
              {
                "id": 5100,
                "name": "音乐",
                "alg": "groupTagRank"
              }
            ],
            "previewUrl": null,
            "previewDurationms": 0,
            "hasRelatedGameAd": false,
            "markTypes": null,
            "relateSong": [
              {
                "name": "爱之初体验",
                "id": 185792,
                "pst": 0,
                "t": 0,
                "ar": [
                  {
                    "id": 6453,
                    "name": "张震岳",
                    "tns": [],
                    "alias": []
                  }
                ],
                "alia": [],
                "pop": 100,
                "st": 0,
                "rt": "",
                "fee": 8,
                "v": 35,
                "crbt": null,
                "cf": "",
                "al": {
                  "id": 18885,
                  "name": "滚石香港黄金十年 张震岳精选",
                  "picUrl": "http://p4.music.126.net/vxuO3LiU9M6U-6kmvV33XA==/109951163240612176.jpg",
                  "tns": [],
                  "pic_str": "109951163240612176",
                  "pic": 109951163240612180
                },
                "dt": 243441,
                "h": {
                  "br": 320000,
                  "fid": 0,
                  "size": 9740582,
                  "vd": -22218
                },
                "m": {
                  "br": 192000,
                  "fid": 0,
                  "size": 5844367,
                  "vd": -19650
                },
                "l": {
                  "br": 128000,
                  "fid": 0,
                  "size": 3896259,
                  "vd": -18031
                },
                "a": null,
                "cd": "1",
                "no": 1,
                "rtUrl": null,
                "ftype": 0,
                "rtUrls": [],
                "djId": 0,
                "copyright": 0,
                "s_id": 0,
                "rtype": 0,
                "rurl": null,
                "mst": 9,
                "cp": 684010,
                "mv": 10929999,
                "publishTime": 1036080000000,
                "privilege": {
                  "id": 185792,
                  "fee": 8,
                  "payed": 0,
                  "st": 0,
                  "pl": 128000,
                  "dl": 0,
                  "sp": 7,
                  "cp": 1,
                  "subp": 1,
                  "cs": false,
                  "maxbr": 999000,
                  "fl": 128000,
                  "toast": false,
                  "flag": 68,
                  "preSell": false
                }
              }
            ],
            "relatedInfo": null,
            "videoUserLiveInfo": null,
            "vid": "DCFAFE6105D21B4A6D4530DBF923B939",
            "durationms": 311728,
            "playTime": 1205309,
            "praisedCount": 7077,
            "praised": false,
            "subscribed": false
          }
        },
        {
          "type": 1,
          "displayed": false,
          "alg": "onlineHotGroup",
          "extAlg": null,
          "data": {
            "alg": "onlineHotGroup",
            "scm": "1.music-video-timeline.video_timeline.video.181017.-295043608",
            "threadId": "R_VI_62_A8DC4F82473F218B6F4A7560110BDF72",
            "coverUrl": "https://p2.music.126.net/54CsmlqzBwnGW3xUGI4ahw==/109951163804307053.jpg",
            "height": 1080,
            "width": 1920,
            "title": "本可成为张学友，却一心想当周星驰",
            "description": "本可成为张学友，却一心想当周星驰，他的这首歌，唱哭无数人",
            "commentCount": 1072,
            "shareCount": 988,
            "resolutions": [
              {
                "resolution": 240,
                "size": 39751840
              },
              {
                "resolution": 480,
                "size": 69914355
              },
              {
                "resolution": 720,
                "size": 110467469
              },
              {
                "resolution": 1080,
                "size": 129835812
              }
            ],
            "creator": {
              "defaultAvatar": false,
              "province": 110000,
              "authStatus": 1,
              "followed": false,
              "avatarUrl": "http://p1.music.126.net/ANPz4SzgZsnR69qHSMtz_w==/109951164270832395.jpg",
              "accountStatus": 0,
              "gender": 1,
              "city": 110101,
              "birthday": 720353563017,
              "userId": 106810354,
              "userType": 4,
              "nickname": "中国音乐人",
              "signature": "我是偷影子的人，\n随风化成一朵云。",
              "description": "",
              "detailDescription": "",
              "avatarImgId": 109951164270832400,
              "backgroundImgId": 109951164271452850,
              "backgroundUrl": "http://p1.music.126.net/erbAKtwUefQuR1CJdEverQ==/109951164271452845.jpg",
              "authority": 0,
              "mutual": false,
              "expertTags": null,
              "experts": null,
              "djStatus": 10,
              "vipType": 11,
              "remarkName": null,
              "avatarImgIdStr": "109951164270832395",
              "backgroundImgIdStr": "109951164271452845",
              "avatarImgId_str": "109951164270832395"
            },
            "urlInfo": {
              "id": "A8DC4F82473F218B6F4A7560110BDF72",
              "url": "http://vodkgeyttp9.vod.126.net/vodkgeyttp8/MIsdYPUt_2258957983_uhd.mp4?ts=1602902982&rid=3009063014E119FC636C42FBC02D0085&rl=3&rs=SwzlGFIuaohHgbEQMUILxWTJpVDNoSRW&sign=dc2ef4fa5c5481ce1b984569b5e713aa&ext=f0xw0mOJqGcf8yfMQn4khLo0vOAZ2Oret6FDS9VvANIOB778zOa0GNkWKbpJigsUUQr5jG+TbSVFBopWbJqfxOMWz6qSwzClvQwG9aI/msQPte7+2SQ2gGKFPduzNhXy/81Ne8nvhkod6vr0JXFqCRZ2dpI6sWzVchry/GdmoJaRw2s1XDLSAyQ1oqJLHpSvPOrqeMkLsgG48vej5u25h9Xk4Oz5m3oL3T7bKoVzbcDl3L+mCrSoqLHT+K/n0tyB",
              "size": 129835812,
              "validityTime": 1200,
              "needPay": false,
              "payInfo": null,
              "r": 1080
            },
            "videoGroup": [
              {
                "id": -22293,
                "name": "#「粤语」简单情歌，深情粤语#",
                "alg": "groupTagRank"
              },
              {
                "id": 57105,
                "name": "粤语现场",
                "alg": "groupTagRank"
              },
              {
                "id": 57110,
                "name": "饭拍现场",
                "alg": "groupTagRank"
              },
              {
                "id": 57108,
                "name": "流行现场",
                "alg": "groupTagRank"
              },
              {
                "id": 1100,
                "name": "音乐现场",
                "alg": "groupTagRank"
              },
              {
                "id": 58100,
                "name": "现场",
                "alg": "groupTagRank"
              },
              {
                "id": 5100,
                "name": "音乐",
                "alg": "groupTagRank"
              }
            ],
            "previewUrl": null,
            "previewDurationms": 0,
            "hasRelatedGameAd": false,
            "markTypes": null,
            "relateSong": [
              {
                "name": "无赖",
                "id": 191171,
                "pst": 0,
                "t": 0,
                "ar": [
                  {
                    "id": 6473,
                    "name": "郑中基",
                    "tns": [],
                    "alias": []
                  }
                ],
                "alia": [],
                "pop": 100,
                "st": 0,
                "rt": "600902000005652669",
                "fee": 8,
                "v": 108,
                "crbt": null,
                "cf": "",
                "al": {
                  "id": 19313,
                  "name": "正宗K",
                  "picUrl": "http://p4.music.126.net/2vFBKWUmF_jiWGaBgO6RaA==/17648261137761966.jpg",
                  "tns": [],
                  "pic_str": "17648261137761966",
                  "pic": 17648261137761966
                },
                "dt": 243827,
                "h": {
                  "br": 320000,
                  "fid": 0,
                  "size": 9756256,
                  "vd": -18600
                },
                "m": {
                  "br": 192000,
                  "fid": 0,
                  "size": 5853771,
                  "vd": -16000
                },
                "l": {
                  "br": 128000,
                  "fid": 0,
                  "size": 3902528,
                  "vd": -14500
                },
                "a": null,
                "cd": "1",
                "no": 3,
                "rtUrl": null,
                "ftype": 0,
                "rtUrls": [],
                "djId": 0,
                "copyright": 1,
                "s_id": 0,
                "rtype": 0,
                "rurl": null,
                "mst": 9,
                "cp": 7002,
                "mv": 0,
                "publishTime": 1143849600000,
                "privilege": {
                  "id": 191171,
                  "fee": 8,
                  "payed": 0,
                  "st": 0,
                  "pl": 128000,
                  "dl": 0,
                  "sp": 7,
                  "cp": 1,
                  "subp": 1,
                  "cs": false,
                  "maxbr": 999000,
                  "fl": 128000,
                  "toast": false,
                  "flag": 256,
                  "preSell": false
                }
              }
            ],
            "relatedInfo": null,
            "videoUserLiveInfo": null,
            "vid": "A8DC4F82473F218B6F4A7560110BDF72",
            "durationms": 291834,
            "playTime": 3701754,
            "praisedCount": 10838,
            "praised": false,
            "subscribed": false
          }
        }
      ];
      let videoList = this.data.videoList;
      // 将视频最新的数据更新原有视频列表数据中
      videoList.push(...newVideoList);//...表示将数组拆包成对象
      this.setData({
        videoList
      })

十二、分享功能实现

在页面的js文件中已经定义了分享功能函数：

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

}

详情参考开发文档 --> 框架 --> 框架接口 --> 页面 --> Page中的onShareAppMessage()函数

开发文档链接

1.页面分享

from的值是menu

2.按钮分享

from的值是button

button组件添加属性：

open-type="share"

3.示例代码

/**
* 用户点击右上角分享
*/

onShareAppMessage: function ({from,target}) {
    console.log('from：' + from);
    if(from === 'button'){
        return{
            title: '来自按钮的转发',
            path: '/pages/menu/menu',
        }
    }else{
        return{
            title: '来自按钮的转发',
            path: '/pages/menu/menu',
        }
    }

}

十三、日期

data:{
    day: '', //天
    month: '' //月
}

this.setData({
    day: new Date().getDate(),
    month: new Date().getMonth() + 1
})

十四、路由跳转

onLoad:function(options){
    //options：用于接收路由跳转的query参数
    //原生小程序中路由传参，对参数的长度有限制，如果参数长度过长会自动截取舍弃掉
}

第四章拓展内容

一、事件流的三个阶段

捕获：从外向内
执行目标阶段
冒泡：从内向外

二、事件委托

什么是事件委托
1. 将子元素的事件委托（绑定）给父元素
事件委托的好处
1. 减少绑定的次数
2. 后期新添加的元素也可以享用之前委托的事件
事件委托的原理
1. 冒泡
触发事件的是谁
1. 子元素
如何找到触发事件的对象
1. event.target
currentTarget VS target
1. currentTarget 要求绑定事件的元素一定是触发事件的元素
2. target绑定事件的元素不一定是触发事件的元素

三、定义事件相关

1.分类

标准DOM事件
自定义事件

2.标准DOM事件

举例：click，input，。。。
事件名固定，事件由浏览器触发

3.自定义事件

绑定事件

1.1 事件名

1.2 事件的回调

1.3 订阅方：PubSub.subscribe(事件名，事件的回调)

1.4 订阅方是接受数据的一方
触发事件

2.1 事件名

2.2 提供事件参数对象，等同于原生事件的event对象

2.3 发布方：PubSub.publish(事件名，提供的数据)

2.4 发布方是提供数据的一方

第五章注意事项

一、页面单独设置标题

在需要更改的页面的.json文件中添加如下代码（以登陆页面为例）

{
  "navigationBarTitleText": "登录中心"
}

在app.json文件中添加页面的路径，如果不添加路径，标题不显示

"pages": [
        "pages/login/login"        //要添加页面的路径
    ],

小程序入门

一、 环境介绍

二、开发设置

三、目录结构

第二章 wxml语法

一、数据绑定

二、获取用户基本信息

三、事件绑定

四、列表渲染

五、条件渲染

六、模板使用

七、生命周期

第三章 实战

一、添加轮播图

wxml代码

wxss代码

二、添加icon

1.获取icon

2.引入icon

3.wxss代码

4.wxss代码

三、添加左右滑块（scroll-view 适用于展示推荐内容等）

1.wxml代码

2.wxss代码

3.注意

四、前后端交互

1.封装请求功能函数

2.注意点

五、本地存储

1.语法

2.注意点

六、须登录才能获取资源实现

1. cookie信息获取

2. 添加含cookie的请求头

七、视频下拉列表实现

1.wxml代码

2.多个视频同时播放问题解决

3.优化视频显示，用图片代替视频

4.视频内容大小和video不一致问题解决

5.下拉视频，保持头部和导航栏位置固定不变

6.从上次播放到的位置继续播放

八、单行文本溢出隐藏

九、多行文本溢出隐藏

十、下拉列表刷新（scrollview）

1.给scollview组件绑定触发函数

2.js中实现handleRefresher函数

3.解决下拉时三个小圆点一直显示问题

十一、上拉列表加载（scrollview）

1.给scollview组件绑定触发函数

2.js中实现handleToLower函数

十二、分享功能实现

1.页面分享

2.按钮分享

3.示例代码

十三、日期

十四、路由跳转

第四章 拓展内容

一、事件流的三个阶段

二、事件委托

三、定义事件相关

1.分类

2.标准DOM事件

3.自定义事件

第五章 注意事项

一、页面单独设置标题

一、环境介绍

第三章实战

第四章拓展内容

第五章注意事项