• 小程序demo项目实践


    今天开始做一个简单的小程序,做的过程中势必会有一些知识经验需要记录

    项目初始化

    首先创建好一个小程序项目,在app.wxss里面将自带的css样式统统去除,加上自己写的初始化样式

    小程序目前不支持*号通配符

    page,view,image,swiper,swiper-item,navigator,video{
      box-sizing: border-box;
    }

    app.js中的原始逻辑去除一下,然后输入app+回车,会自动列出一个初始化的js结构

    之后,再清理一下首页中的index.wxmlindex.wxssindex.js中的内容;

    同样的在index.js中输入Page+回车,初始化一下代码结构

    编辑头部组件

    首先在跟目录建立components文件夹,然后建立MyTitle文件夹,再在这个文件夹上右键建立component,名字叫MyTitle

     然后我们先让这个title组件在首页汇总显示出来,在index.json中设置一下

    {
      "usingComponents": {
        "MyTitle":"../../components/MyTitle/MyTitle"
      },
      "navigationBarTitleText": "bilibili"
    }

    然后在index.wxml中引入

    <view class='main'>
      <!-- 头部公共标签 -->
      <MyTitle></MyTitle>
    </view>

     然后将myTitle的结构和样式写一下,可以复习一些flex布局

    MyTitle.wxml:

    <view class='my_title'>
      <!-- logo -->
      <navigator class='logo'>
        <image class='logo_img' style='140rpx;height:60rpx;' src='../../icons/logo.png'></image>
      </navigator>
      <!-- 搜索 -->
      <view class='search_icon'>
        <image style='44rpx;height:44rpx;' src='../../icons/search.png'></image>
      </view>
      <!-- 用户 -->
      <view class='user_icon'>
        <image style='54rpx;height:60rpx;' src='../../icons/user.png'></image>
      </view>
      <!-- 下载按钮 -->
      <view class='down_app'>
        下载 App
      </view>
    </view>

    MyTitle.wxss:

    .my_title{
      display: flex;
      align-items: center;
      padding: 10rpx;
      background-color: #ffffff;
    }
    .logo{
      flex:7;
    }
    .search_icon{
      flex:1;
      display: flex;
      justify-content: center;
      align-items: center;
    
    }
    .user_icon{
      flex:2;
      display: flex;
      justify-content: center;
      align-items: center; 
    }
    
    .down_app{
      flex:3;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size:30rpx;
      background-color:pink;
      color:#fff;
      border-radius: 10rpx;
      padding:10rpx;
    }

    编辑头部导航

     我们的导航数据是通过接口拿到的,所以要先请求接口拿到数据再写

    index.js:

    Page({
    
      /**
       * 页面的初始数据
       */
      data: { 
        // 被点击首页导航栏的索引  默认是第一个
        currentIndexNav:0,
        // 首页导航数据
        navList:[//放置请求数据失败 出此下策
          { text: '首页', id: 0 },
          { text: '动画', id: 1 },
          { text: '番剧', id: 2 },
          { text: '国创', id: 3 },
          { text: '音乐', id: 4 },
          { text: '舞蹈', id: 5 },
          { text: '科技', id: 6 },
          { text: '游戏', id: 7 },
          { text: '娱乐', id: 8 },
          { text: '鬼畜', id: 9 },
          { text: '电影', id: 10 },
          { text: '电视剧', id: 11 },
          { text: '纪录片', id: 12 },
          { text: '影视', id: 13 },
          { text: '时尚', id: 14 },
          { text: '生活', id: 15 },
          { text: '广告', id: 16 },
          { text: '直播', id: 17 },
          { text: '相簿', id: 18 }
        ]
        
      },
      // 点击首页导航按钮
      activeNav(e){
        // console.log(123)
        this.setData({
          currentIndexNav:e.target.dataset.index
        })
      },
      // 获取首页导航数据
      getNavlist(){
        var self=this;
        // 利用小程序内置的发送请求的方法
        wx.request({
          url: 'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/navList',
          success(res){
            console.log(res)
            if(res.data.code===0){//如果请求成功
              self.setData({
                navList:res.data.data.navList
              });
            }
          }
        })
      },
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        //获取首页导航数据
        this.getNavlist();
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
        
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
        
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
        
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
        
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
        
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
        
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
        
      }
    })

    上面是请求b站上的一个接口,如果是临时调试用的可以在开发者工具中的 详情 按钮下,将下图选项勾选上

     另一种方法,如果要长时间用,不想这样临时设置,需要登录自己的小程序,在开发中的开发设置下的服务器域名下设置,文档上面介绍的很详细(如果设置端口,请求时一定要带上端口)

     然后来写一下顶部导航的结构与样式

    index.wxml:

    <view class='main'>
      <!-- 头部公共标签 -->
      <MyTitle></MyTitle>
      <!-- 首页导航 -->
      <view class='nav_wrap'>
        <scroll-view class='nav' scroll-x>
          <view bindtap="activeNav" data-index="{{index}}" class="nav_item {{index===currentIndexNav?'active':''}}" wx:for="{{navList}}" wx:key="{{index}}">{{item.text}}</view>
        </scroll-view>
      </view>
    </view>

    index.wxss:

    /* 改变整个页面的样式 相当于body */
    page{
      color:#666;
    }
    /* 首页导航 */
    .nav_wrap{
    
    }
    .nav{
      white-space: nowrap;
      padding:5rpx 0;
    }
    .nav_item{
      padding: 20rpx 45rpx;
      font-size: 30rpx;
      display: inline-block;
    }
    /* .nav_item中的.active类 */
    .nav_item.active{
      border-bottom: 5rpx solid #de688b;
    }

    效果:

     写轮播图

    首先请求到数据,因为接口不稳定,所以定义变量时给了默认值

    index.js

    Page({
    
      /**
       * 页面的初始数据
       */
      data: { 
        // 被点击首页导航栏的索引  默认是第一个
        currentIndexNav:0,
        // 首页导航数据
        navList:[//放置请求数据失败 出此下策
          { text: '首页', id: 0 },
          { text: '动画', id: 1 },
          { text: '番剧', id: 2 },
          { text: '国创', id: 3 },
          { text: '音乐', id: 4 },
          { text: '舞蹈', id: 5 },
          { text: '科技', id: 6 },
          { text: '游戏', id: 7 },
          { text: '娱乐', id: 8 },
          { text: '鬼畜', id: 9 },
          { text: '电影', id: 10 },
          { text: '电视剧', id: 11 },
          { text: '纪录片', id: 12 },
          { text: '影视', id: 13 },
          { text: '时尚', id: 14 },
          { text: '生活', id: 15 },
          { text: '广告', id: 16 },
          { text: '直播', id: 17 },
          { text: '相簿', id: 18 }
        ],
        // 轮播数据
        swiperList:[//防止请求数据失败,出此下策
          {"link":"","imgSrc":"https://i0.hdslb.com/bfs/archive/bf2aa1f18ccae9ecae4cb666417f75da951ee2f4.jpg@480w_300h.webp"},
          { "link": "", "imgSrc": "https://i0.hdslb.com/bfs/archive/8860d7a57a9b1992c112ee56a35444cfc445108b.jpg@480w_300h.webp" },
          { "link": "", "imgSrc": "https://i0.hdslb.com/bfs/archive/82232bca677f06d69734159653cf29db82ff5d9c.png@480w_300h.webp" },
          { "link": "", "imgSrc": "https://i0.hdslb.com/bfs/archive/28d93d03968baa475a2c3982640736a66b4405c3.jpg@480w_300h.webp" }
        ]
        
      },
      // 点击首页导航按钮
      activeNav(e){
        // console.log(123)
        this.setData({
          currentIndexNav:e.target.dataset.index
        })
      },
      // 获取首页导航数据
      getNavlist(){
        var self=this;
        // 利用小程序内置的发送请求的方法
        wx.request({
          url: 'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/navList',
          success(res){
            console.log(res)
            if(res.data.code===0){//如果请求成功
              self.setData({
                navList:res.data.data.navList
              });
            }
          }
        })
      },
      // 获取轮播图数据
      getSwiperList(){
        var self = this;
        wx.request({
          url: 'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/swiperList',
          success(res){
            console.log(res);
            if(res.data.code===0){
              self.setData({
                swiperList:res.data.data.swiperList
              })
            }
          }
        })
      },
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        //获取首页导航数据
        this.getNavlist();
        //获取轮播图数据
        this.getSwiperList();
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
        
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
        
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
        
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
        
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
        
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
        
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
        
      }
    })

    index.wxml

    <view class='main'>
      <!-- 头部公共标签 -->
      <MyTitle></MyTitle>
      <!-- 首页导航 -->
      <view class='nav_wrap'>
        <scroll-view class='nav' scroll-x>
          <view bindtap="activeNav" data-index="{{index}}" class="nav_item {{index===currentIndexNav?'active':''}}" wx:for="{{navList}}" wx:key="{{index}}">{{item.text}}</view>
        </scroll-view>
      </view>
      <!-- 轮播图 -->
      <view class='slides'>
        <swiper autoplay indicator-dots circular>
          <swiper-item wx:for="{{swiperList}}" wx:key="{{index}}">
            <navigator>
              <image mode='widthFix' src='{{item.imgSrc}}'></image>
            </navigator>
          </swiper-item>
        </swiper>
      </view>
    </view>

    index.wxss

    /* 改变整个页面的样式 相当于body */
    page{
      color:#666;
      padding: 10rpx;
    }
    /* 首页导航 */
    .nav_wrap{
    
    }
    .nav{
      white-space: nowrap;
      padding:5rpx 0;
    }
    .nav_item{
      padding: 20rpx 45rpx;
      font-size: 30rpx;
      display: inline-block;
    }
    /* .nav_item中的.active类 */
    .nav_item.active{
      border-bottom: 5rpx solid #de688b;
    }
    /* 轮播图 */
    .slides{
      margin-top:10rpx;
    }
    .slides swiper{
      height:220rpx;
      border:1px solid red;
    }
    .slides navigator{
      width:100%;
      height:100%;
    }
    .slides image{
      width:100%;
      height:100%;
    }

     视频列表

    首先获取到视频列表数据:index.js

    Page({
    
      /**
       * 页面的初始数据
       */
      data: { 
        // 被点击首页导航栏的索引  默认是第一个
        currentIndexNav:0,
        // 首页导航数据
        navList:[//放置请求数据失败 出此下策
          { text: '首页', id: 0 },
          { text: '动画', id: 1 },
          { text: '番剧', id: 2 },
          { text: '国创', id: 3 },
          { text: '音乐', id: 4 },
          { text: '舞蹈', id: 5 },
          { text: '科技', id: 6 },
          { text: '游戏', id: 7 },
          { text: '娱乐', id: 8 },
          { text: '鬼畜', id: 9 },
          { text: '电影', id: 10 },
          { text: '电视剧', id: 11 },
          { text: '纪录片', id: 12 },
          { text: '影视', id: 13 },
          { text: '时尚', id: 14 },
          { text: '生活', id: 15 },
          { text: '广告', id: 16 },
          { text: '直播', id: 17 },
          { text: '相簿', id: 18 }
        ],
        // 轮播数据
        swiperList:[//防止请求数据失败,出此下策
          {"link":"","imgSrc":"https://i0.hdslb.com/bfs/archive/bf2aa1f18ccae9ecae4cb666417f75da951ee2f4.jpg@480w_300h.webp"},
          { "link": "", "imgSrc": "https://i0.hdslb.com/bfs/archive/8860d7a57a9b1992c112ee56a35444cfc445108b.jpg@480w_300h.webp" },
          { "link": "", "imgSrc": "https://i0.hdslb.com/bfs/archive/82232bca677f06d69734159653cf29db82ff5d9c.png@480w_300h.webp" },
          { "link": "", "imgSrc": "https://i0.hdslb.com/bfs/archive/28d93d03968baa475a2c3982640736a66b4405c3.jpg@480w_300h.webp" }
        ],
        //视频列表数据
        videosList:[
          {
            commentCount:"1345",
            desc:"世界上广告最多的网站判定!真的有10000条广告!【暗物质#2】",
            id:0,
            imgSrc:"https://i0.hdslb.com/bfs/archive/0563c3df12637178e8b08858e5fd11e4a6906acc.jpg@320w_200h.webp",
            link:"",
            playCount:"24.9万",
            videoSrc:"http://files.ak48.xyz/2018120195458.mp4"
          },
          {
            commentCount: "7825",
            desc: "【圣地亚哥金曲】藏,超好听的中国风电音鬼畜!",
            id: 1,
            imgSrc: "https://i0.hdslb.com/bfs/archive/b08463bc1257b6294bad1e1646a3203f9f3a0c60.jpg@320w_200h.webp",
            link: "",
            playCount: "63.8万",
            videoSrc: "http://files.ak48.xyz/20181219211856.mp4"
          },
          {
            commentCount: "7825",
            desc: "迈克尔杰克逊封神的12秒,无人能做到",
            id: 2,
            imgSrc: "https://i0.hdslb.com/bfs/archive/02cf0e3a1fd52f80763fd51ee7fae69e51cf173c.jpg@320w_200h.webp",
            link: "",
            playCount: "63.8万",
            videoSrc: "http://files.ak48.xyz/20181219211920.mp4"
          },
          {
            commentCount: "1066",
            desc: "【2018】年度影视混剪 Ready Story 2018【混剪】",
            id: 3,
            imgSrc: "https://i0.hdslb.com/bfs/archive/dc7147ffa4e11a2fffa84b295b2f2bdbbfe3e6d7.jpg@320w_200h.webp",
            link: "",
            playCount: "40.0万",
            videoSrc: "http://files.ak48.xyz/20181219211910.mp4"
          },
          {
            commentCount: "719",
            desc: "当你觉得扛不住的时候来看看这段视频",
            id: 4,
            imgSrc: "https://i2.hdslb.com/bfs/archive/2cc604557cab1f6fd79591981891467f7b825010.jpg@320w_200h.webp",
            link: "",
            playCount: "82.7万",
            videoSrc: "" 
          },{
            commentCount: "817",
            desc: "【1080/漫威/衔接踩点向】前方高能!带你体验完美流畅的衔接踩点视觉盛宴!",
            id: 5,
            imgSrc: "https://i1.hdslb.com/bfs/archive/0fc171eaa7bf6b81cf5427fc57db104a4ef719d7.jpg@320w_200h.webp",
            link: "",
            playCount: "28.9万",
            videoSrc: ""
          },{
            commentCount: "7149",
            desc: "【木鱼微剧场】诺兰作品《星际穿越》,严谨的科学精神与深刻人文关怀(Re:C)",
            id: 6,
            imgSrc: "https://i0.hdslb.com/bfs/archive/0bf251d3f3b2cb589532aa24eaea140b312f7765.jpg@320w_200h.webp",
            link: "",
            playCount: "44.6万",
            videoSrc: ""
          },{
            commentCount: "7825",
            desc: "【嘻咦啊看】其实很多人一辈子都不懂得怎样道歉",
            id: 7,
            imgSrc: "https://i1.hdslb.com/bfs/archive/4a4155cf25b38da958e64b531709bca37927c82b.jpg@320w_200h.webp",
            link: "",
            playCount: "63.8万",
            videoSrc: ""
          },{
            commentCount: "373",
            desc: "【改革春风吹满地】【漫威/香港电影/赵本山】和斧头帮一起吹满地吧~",
            id: 8,
            imgSrc: "https://i1.hdslb.com/bfs/archive/54cd74a9bfd187fb795724c7bb51272e7c07a2e5.jpg@320w_200h.webp",
            link: "",
            playCount: "30.4万",
            videoSrc: ""
          },{
            commentCount: "1066",
            desc: "一家永远没有回头客的店《自杀专卖店》",
            id: 9,
            imgSrc: "https://i0.hdslb.com/bfs/archive/9046c3db8d6cddf56287fa1ead4e406baf4747f3.jpg@320w_200h.webp",
            link: "",
            playCount: "40.0万",
            videoSrc: ""
          },{
            commentCount: "3083",
            desc: "【演技】吃饭同样是吃空气,为什么演技差距如此之大!",
            id: 10,
            imgSrc: "https://i1.hdslb.com/bfs/archive/67e474f4fa31d5a2a8a6241a28cdf67be898eed4.png@320w_200h.webp",
            link: "",
            playCount: "65.7万",
            videoSrc: ""
          },{
            commentCount: "2090",
            desc: "【盘点火影真人版】我叫王大锤,是个忍者!这次参加了一个高成本火影忍者大电影!!",
            id: 11,
            imgSrc: "https://i1.hdslb.com/bfs/archive/67be0fadbe5eec5b967132c38fba65913cac7f43.jpg@320w_200h.webp",
            link: "",
            playCount: "46.1万",
            videoSrc: ""
          },{
            commentCount: "663",
            desc: "女部落奇怪规定,女人怀孕后必须吃男人补身体,还好这只是电影",
            id: 12,
            imgSrc: "https://i1.hdslb.com/bfs/archive/332b9cf87e30331277c84dcc47b1d53c2cb3fdfb.jpg@320w_200h.webp",
            link: "",
            playCount: "56.6万",
            videoSrc: ""
          },{
            commentCount: "543",
            desc: "《爱情公寓》令人窒息的骚操作!让人笑出猪叫声的神操作盘点! 第十九弹",
            id: 13,
            imgSrc: "https://i2.hdslb.com/bfs/archive/2e30177ef42ea0a420cd9926870d1463ed0be11c.jpg@320w_200h.webp",
            link: "",
            playCount: "53.9万",
            videoSrc: ""
          },{
            commentCount: "2425",
            desc: "【全程高能】一个角色的三观到底能够正到什么地步【世间清流】",
            id: 14,
            imgSrc: "https://i0.hdslb.com/bfs/archive/cab6d4254e4b97a0edf4d2393f5e8aed4a90201c.jpg@320w_200h.webp",
            link: "",
            playCount: "32.6万",
            videoSrc: ""
          },{
            commentCount: "2770",
            desc: "明星20年后再次演绎自己的经典角色,谁变化最小",
            id: 15,
            imgSrc: "https://i0.hdslb.com/bfs/archive/396dfc33b8c3f426606760f9614759d7cf29c28d.png@320w_200h.webp",
            link: "",
            playCount: "46.6万",
            videoSrc: ""
          },{
            commentCount: "1658",
            desc: "一部拷问社会和人性的电影,极度真实,中国版的《东京物语》!",
            id: 16,
            imgSrc: "https://i2.hdslb.com/bfs/archive/f03f82e14ee380f8e44c0b62924438f0ccc93750.jpg@320w_200h.webp",
            link: "",
            playCount: "37.9万",
            videoSrc: ""
          },{
            commentCount: "5165",
            desc: "【公开处刑】演技炸裂与演技尴尬到底是什么样子:我是谢晓飞,我走路拽起来都是演技?",
            id: 17,
            imgSrc: "https://i0.hdslb.com/bfs/archive/7ea04d86d345d109df15fd8fae5a1a12eca14b88.jpg@320w_200h.webp",
            link: "",
            playCount: "42.4万",
            videoSrc: ""
          },{
            commentCount: "2027",
            desc: "爆笑沙雕剧《我是大哥大》 全集,不看你后悔,沙雕青年快乐多,万恶之源,笑出腹肌",
            id: 18,
            imgSrc: "https://i0.hdslb.com/bfs/archive/39a366506c68e612bf07443deff25a6bfe55e08b.jpg@320w_200h.webp",
            link: "",
            playCount: "26.6万",
            videoSrc: ""
          },{
            commentCount: "652",
            desc: "恶婆婆故意用蜂蜜试探品如 结果自己的孙子却被送去了医院!",
            id: 19,
            imgSrc: "https://i1.hdslb.com/bfs/archive/45eeee2d1eb67237e255652f5ed682edf70d137a.jpg@320w_200h.webp",
            link: "",
            playCount: "41.0万",
            videoSrc: ""
          },
          {
            commentCount: "613",
            desc: "【极度舒适系列】那些惊艳至极的服化道!视觉盛宴!【第8期】",
            id: 20,
            imgSrc: "https://i1.hdslb.com/bfs/archive/3e7a75efe33f7391bb73ef3dcbc762f3d7d15136.png@320w_200h.webp",
            link: "",
            playCount: "16.6万",
            videoSrc: ""
          },{
            commentCount: "822",
            desc: "姐姐们为了阻止唯一的弟弟谈恋爱,真是花样百出",
            id: 21,
            imgSrc: "https://i0.hdslb.com/bfs/archive/1f0159497cac9ebfe7ac2a96aae2c5df32273d27.jpg@320w_200h.webp",
            link: "",
            playCount: "29.6万",
            videoSrc: ""
          },{
            commentCount: "190",
            desc: "500名副导演联合封杀胖嫂,本人回应:“我不演了,你们不用封杀我”",
            id: 22,
            imgSrc: "https://i1.hdslb.com/bfs/archive/2d0e5ece82827a666f38e7e12fc06eefe70ddbe7.jpg@320w_200h.webp",
            link: "",
            playCount: "32.3万",
            videoSrc: ""
          },{
            commentCount: "1216",
            desc: "《2019上半年即将上映的科幻大片》九部即将上映的科幻巨制,总有一部是你期待的!",
            id: 23,
            imgSrc: "https://i2.hdslb.com/bfs/archive/6b4f86491290565e8d41b04a1a649051c6419d06.jpg@320w_200h.webp",
            link: "",
            playCount: "20.1万",
            videoSrc: ""
          }
        ]
        
      },
      // 点击首页导航按钮
      activeNav(e){
        // console.log(123)
        this.setData({
          currentIndexNav:e.target.dataset.index
        })
      },
      // 获取首页导航数据
      getNavlist(){
        var self=this;
        // 利用小程序内置的发送请求的方法
        wx.request({
          url: 'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/navList',
          success(res){
            console.log(res)
            if(res.data.code===0){//如果请求成功
              self.setData({
                navList:res.data.data.navList
              });
            }
          }
        })
      },
      // 获取轮播图数据
      getSwiperList(){
        var self = this;
        wx.request({
          url: 'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/swiperList',
          success(res){
            console.log(res);
            if(res.data.code===0){
              self.setData({
                swiperList:res.data.data.swiperList
              })
            }
          }
        })
      },
      /**
       * 获取视频列表
       */
      getVideosList(){
        var self=this;
        wx.request({
          url: 'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/videosList',
          success(res){
            console.log(res);
            if(res.data.code===0){
              self.setData({
                videosList: res.data.data.videosList
              });
            }
          }
        })
      },
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        //获取首页导航数据
        this.getNavlist();
        //获取轮播图数据
        this.getSwiperList();
        // 获取视频列表
        this.getVideosList();
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
        
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
        
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
        
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
        
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
        
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
        
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
        
      }
    })

    index.wxml

    <view class='main'>
      <!-- 头部公共标签 -->
      <MyTitle></MyTitle>
      <!-- 首页导航 -->
      <view class='nav_wrap'>
        <scroll-view class='nav' scroll-x>
          <view bindtap="activeNav" data-index="{{index}}" class="nav_item {{index===currentIndexNav?'active':''}}" wx:for="{{navList}}" wx:key="{{index}}">{{item.text}}</view>
        </scroll-view>
      </view>
      <!-- 轮播图 -->
      <view class='slides'>
        <swiper autoplay indicator-dots circular>
          <swiper-item wx:for="{{swiperList}}" wx:key="{{index}}">
            <navigator url='javascript:'>
              <image mode='widthFix' src='{{item.imgSrc}}'></image>
            </navigator>
          </swiper-item>
        </swiper>
      </view>
      <!-- 视频列表 -->
      <view class='video_wrap'>
        <navigator class='video_item' wx:for="{{videosList}}" wx:key="{{index}}">
          <!-- 图片容器 -->
          <view class='video_img'>
            <!-- 图片 -->
            <image mode='widthFix' src='{{item.imgSrc}}'></image>
            <!-- 播放量 -->
            <view class='video_info'>
              <!-- 播放量 -->
              <view class='play_count_wrap'>
                  <!-- 图标 -->
                  <text class='fa fa-play-circle-o'></text>
                  <!-- 数值 -->
                  <text class='play_count'>{{item.playCount}}</text>
              </view>
              <!-- 评论量 -->
              <view class='comment_count_row'>
                <!-- 图标 -->
                <text class='fa fa-commenting-o'></text>
                <!-- 数值 -->
                <text class='comment_count'>{{item.commentCount}}</text>
              </view>
            </view>
          </view>
          <!-- 标题 -->
          <view class='video_title'>
            {{item.desc}}
          </view>
        </navigator>
      </view>
    </view>

    index.wxss

    /* 改变整个页面的样式 相当于body */
    page{
      color:#666;
      padding: 10rpx;
    }
    /* 首页导航 */
    .nav_wrap{
    
    }
    .nav{
      white-space: nowrap;
      padding:5rpx 0;
    }
    .nav_item{
      padding: 20rpx 45rpx;
      font-size: 30rpx;
      display: inline-block;
    }
    /* .nav_item中的.active类 */
    .nav_item.active{
      border-bottom: 5rpx solid #de688b;
    }
    /* 轮播图 */
    .slides{
      margin-top:10rpx;
    }
    .slides swiper{
      height:220rpx;
    }
    .slides navigator{
      width:100%;
      height:100%;
    }
    .slides image{
      width:100%;
      height:100%;
    }
    /* 视频列表 */
    .video_wrap{
      display: flex;
      flex-wrap: wrap;
      padding:5rpx;
      justify-content: space-between;
    }
    .video_item{
      width:48%;
      margin-bottom: 20rpx;
    }
    .video_img{
      position: relative;
    }
    .video_img image{
      width:100%;
      border-radius: 15rpx;
    }
    .video_img .video_info{
      position: absolute;
      bottom:10rpx;
      left:0;
      width:100%;
      display: flex;
      justify-content: space-around;
      color:#fff;
      font-size: 24rpx;
    }
    .video_title{
      font-size: 28rpx;
    
      display: -webkit-box;
      overflow: hidden;
      white-space: normal;
      text-overflow: ellipsis;
      word-wrap: break-word;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    效果:

     详情页面

    我们先建立一个详情页

    app.json

    {
      "pages": [
        "pages/index/index",
        "pages/detial/detial"
      ],
      "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle": "black"
      },
      "sitemapLocation": "sitemap.json"
    }

    我们先做一个点击跳转的行为,可以跳转到详情页

    <navigator url='../detial/detial?id={{item.id}}' class='video_item' wx:for="{{videosList}}" wx:key="{{index}}">

    然后再把公共头部组件引进详情页面

    detial.json:

    {
      "usingComponents": {
        "MyTitle": "../../components/MyTitle/MyTitle"
      },
      "navigationBarTitleText": "详情页面"
    }

    detial.wxml

    <view class='main'> 
      <!-- 公共的头部 -->
      <MyTitle></MyTitle>
    </view>

    效果:

     视频详情模块

    detail.js

    // pages/detial/detial.js
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        // 视频信息   防止后台出错 给个默认值
        videoInfo:{
          author:"牧草君1",
          commentCount:1345,
          date:"12-15",
          id:1,
          playCount:"24.9万",
          // videoSrc:"http://files.ak48.xyz/2018120195458.mp4",
          videoSrc:"http://47.90.213.237/youtube/JU3AL8S3zyE.mp4",
          videoTitle:"世界上广告最多的网站判定!真的有10000条广告!【暗物质#2】"
        }
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        console.log(options);
        // 获取当前视频id
        let videoId=options.id;
        this.getCurrentVideo(videoId);
      },
      /**
       * 获得当前视频
       */
      getCurrentVideo(videoId){
        var self =this;
        wx.request({
          url: 'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/videoDetail?id=' + videoId,
          success(res){
            console.log(res);
            if(res.data.code===0){
              self.setData({
                videoInfo: res.data.data.videoInfo
              })
            }
          }
        })
      },
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      }
    })

    detial.wxml:

    <view class='main'> 
      <!-- 公共的头部 -->
      <MyTitle></MyTitle>
    
      <!-- 视频详情 -->
      <view class='video_info'>
        <!-- 视频标签 -->
        <video src='{{videoInfo.videoSrc}}' controls></video>
        <!-- 视频标题 -->
        <view class='video_title'>
          <text>{{videoInfo.videoTitle}}</text>
          <text class='fa fa-angle-down'></text>
        </view>
        <!-- 视频作者 -->
        <view class='video_detail'>
          <!-- 作者 -->
          <text class='author'>{{videoInfo.author}}</text>
          <!-- 播放量 -->
          <text class='play_count'>{{videoInfo.playCount}}</text>
          <!-- 评论量 -->
          <text class='comment_count'>{{videoInfo.commentCount}}弹幕</text>
          <!-- 时间 -->
          <text class='date'>{{videoInfo.date}}</text>
        </view>
      </view>
    </view>

    detial.wxss

    /* pages/detial/detial.wxss */
    .main{
      padding:10rpx;
      color:#666;
    }
    /* 视频 */
    .video_info{
      margin-top:10rpx;
    }
    .video_info video{
      width:100%;
    }
    .video_title{
      display: flex;
      justify-content: space-between;
      font-size: 35rpx;
    }
    .video_detail{
      margin-top:5rpx;
      font-size: 28rpx;
    }
    .video_detail .author{
      color:#000;
    }
    .video_detail text{
      margin-left:10rpx;
    }

    效果:

     推荐视频模块

    detial.js

    // pages/detial/detial.js
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        // 视频信息   防止后台出错 给个默认值
        videoInfo:{
          author:"牧草君1",
          commentCount:1345,
          date:"12-15",
          id:1,
          playCount:"24.9万",
          // videoSrc:"http://files.ak48.xyz/2018120195458.mp4",
          videoSrc:"http://47.90.213.237/youtube/JU3AL8S3zyE.mp4",
          videoTitle:"世界上广告最多的网站判定!真的有10000条广告!【暗物质#2】"
        },
        // 推荐列表 防止服务器出错 给一组默认值
        othersList:[
          {
            "imgSrc": "https://i0.hdslb.com/bfs/archive/cb93f69df4a4b9216d5149dc58d9a2ce9436b697.jpg@320w_200h.webp",
            "duration": "00:06:28",
            "title": "世界上最小的网站!小到只有0.4KB,你信么?【暗物质#1】",
            "playMsg": "20.6",
            "commentCount": " 445"
          },
          {
            "imgSrc": "https://i1.hdslb.com/bfs/archive/412d5a027a2d4adcd61816e8ce676911c92e7974.jpg@320w_200h.webp",
            "duration": "00:02:11",
            "title": "改革春风吹满地",
            "playMsg": "52.1",
            "commentCount": " 564"
          },
          {
            "imgSrc": "https://i0.hdslb.com/bfs/archive/945293f72fdec1eb6228afe9a3f1b9c433544ae5.jpg@320w_200h.webp",
            "duration": "00:01:39",
            "title": "呲哩呲哩?是不是我大破站太火了!!!",
            "playMsg": "27.0",
            "commentCount": " 1179"
          },
          {
            "imgSrc": "https://i1.hdslb.com/bfs/archive/2f1c5bd88f39c2a489ce1a7b2f715a102c2edf15.jpg@320w_200h.webp",
            "duration": "00:01:03",
            "title": "当B站被腾讯收购!会发生什么?",
            "playMsg": "117.8",
            "commentCount": " 4348"
          },
          {
            "imgSrc": "https://i2.hdslb.com/bfs/archive/873c62e7ab58f5f9f4f890fc66eef1efb62e2fb3.jpg@320w_200h.webp",
            "duration": "00:01:01",
            "title": "雷锋的故事里就这配音就tm值一个亿",
            "playMsg": "163.2",
            "commentCount": " 4668"
          },
          {
            "imgSrc": "https://i2.hdslb.com/bfs/archive/a4b08a069be32e489a48094ff62f413571d59d4d.jpg@320w_200h.webp",
            "duration": "00:00:16",
            "title": "往鲍鱼抹上芥末会发生什么",
            "playMsg": "116.5",
            "commentCount": " 1135"
          },
          {
            "imgSrc": "https://i0.hdslb.com/bfs/archive/e1acedadb5f51a49f1d74f4540162693010b2e2d.jpg@320w_200h.webp",
            "duration": "00:01:42",
            "title": "猜猜黑板上画的是什么?绝对不是你们看的那样《学校霸王》",
            "playMsg": "99.6",
            "commentCount": " 1770"
          },
          {
            "imgSrc": "https://i1.hdslb.com/bfs/archive/f05855bdfc400cd910a4f8e0fee652444bb6ef00.jpg@320w_200h.webp",
            "duration": "00:03:53",
            "title": "肯德基内部员工才知道,用这几句“暗语”点餐,能让你吃到撑!",
            "playMsg": "27.7",
            "commentCount": " 436"
          },
          {
            "imgSrc": "https://i0.hdslb.com/bfs/archive/0d3b1e699a2e84260ef5a8a71f102d4982f7a596.jpg@320w_200h.webp",
            "duration": "00:00:41",
            "title": "bilibili播放量最多的视频?!!",
            "playMsg": "35.6",
            "commentCount": " 246"
          },
          {
            "imgSrc": "https://i2.hdslb.com/bfs/archive/9a6e89134d6cbead10765950f0ec12fee482a15a.jpg@320w_200h.webp",
            "duration": "00:08:58",
            "title": "淘宝上最侮辱智商的商品!真是花钱买了个教训",
            "playMsg": "4.7",
            "commentCount": " 363"
          },
          {
            "imgSrc": "https://i1.hdslb.com/bfs/archive/5052636563f803ef1a5a4c397dce8fd274621c3f.jpg@320w_200h.webp",
            "duration": "00:03:48",
            "title": "男子醉驾被查扬言“我爷爷是搞原子弹的” 交警一查还真是",
            "playMsg": "75.8",
            "commentCount": " 931"
          },
          {
            "imgSrc": "https://i0.hdslb.com/bfs/archive/c2c60b08d4ecb10736f54f514c83767aaec1e880.jpg@320w_200h.webp",
            "duration": "00:02:53",
            "title": "万恶之源:我信你个鬼,你个糟老头子坏的很",
            "playMsg": "223.7",
            "commentCount": " 3439"
          },
          {
            "imgSrc": "https://i1.hdslb.com/bfs/archive/fe317a18cba364c62becf478f04d835c1b4708f3.jpg@320w_200h.webp",
            "duration": "00:02:43",
            "title": "打劫遇上一车特警,笨贼视频在youtube上,世界网友都笑死了!",
            "playMsg": "209.7",
            "commentCount": " 2431"
          },
          {
            "imgSrc": "https://i2.hdslb.com/bfs/archive/f0252c692931a8605d33aa8b4f0471100b24c7c5.jpg@320w_200h.webp",
            "duration": "00:01:59",
            "title": "B站恐怖事件!明明声音已经关掉却还能听到声音???",
            "playMsg": "57.8",
            "commentCount": " 1099"
          },
          {
            "imgSrc": "https://i1.hdslb.com/bfs/archive/98714070087b590dfb0d0150013c4a0c8da8b8e3.jpg@320w_200h.webp",
            "duration": "00:15:31",
            "title": "不小心受伤怎么办?教你23个生活的必备技巧@油兔不二字幕组",
            "playMsg": "118.8",
            "commentCount": " 3425"
          },
          {
            "imgSrc": "https://i0.hdslb.com/bfs/archive/9a4e9d3682e8f930d5ece87c24203105bc09fa1f.jpg@320w_200h.webp",
            "duration": "00:01:44",
            "title": "女朋友逛完漫展在酒店累趴了,该怎么办呢",
            "playMsg": "62.4",
            "commentCount": " 966"
          },
          {
            "imgSrc": "https://i0.hdslb.com/bfs/archive/d8bcdd8555027ad27896186da479d21a53218f8b.png@320w_200h.webp",
            "duration": "00:01:32",
            "title": "能让鲍鱼跳舞!遇到醋就饥忍难耐了吗?还是本能反应?",
            "playMsg": "5.7",
            "commentCount": " 77"
          },
          {
            "imgSrc": "https://i2.hdslb.com/bfs/archive/0970d603df54320610156a06d2ce8a5a4097b0c6.jpg@320w_200h.webp",
            "duration": "00:02:12",
            "title": "拘留所里出人才 惊呆了!",
            "playMsg": "20.2",
            "commentCount": " 363"
          },
          {
            "imgSrc": "https://i1.hdslb.com/bfs/archive/aa27ae344fc81d1f1be2ac4c691a27b43334e553.jpg@320w_200h.webp",
            "duration": "00:01:20",
            "title": "本以为小情侣在车库约会,8秒后,荒唐画面发生了",
            "playMsg": "33.6",
            "commentCount": " 326"
          },
          {
            "imgSrc": "https://i1.hdslb.com/bfs/archive/45a3a1258f7e473cc45ab0823729ac0b5618eee6.png@320w_200h.webp",
            "duration": "00:02:46",
            "title": "朱广权:自信=手拿30米长刀,先让你跑29米。",
            "playMsg": "48.2",
            "commentCount": " 852"
          }
        ]
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        console.log(options);
        // 获取当前视频id
        let videoId=options.id;
        // 获取当前视频
        this.getCurrentVideo(videoId);
        // 获取推荐列表
        this.getOthersList(videoId);
      },
      /**
       * 获得当前视频
       */
      getCurrentVideo(videoId){
        var self =this;
        wx.request({
          url: 'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/videoDetail?id=' + videoId,
          success(res){
            console.log(res);
            if(res.data.code===0){
              self.setData({
                videoInfo: res.data.data.videoInfo
              })
            }
          }
        })
      },
      /**
       * 获取推荐视频
       */
      getOthersList(videoId){
        var self=this;
        wx.request({
          url: 'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/othersList?id=' + videoId,
          success(res){
            console.log(res)
            if(res.data.code===0){
              self.setData({
                othersList: res.data.data.othersList
              })
            }
          }
        })
    
      },
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      }
    })

    detial.wxml

    <view class='main'> 
      <!-- 公共的头部 -->
      <MyTitle></MyTitle>
    
      <!-- 视频详情 -->
      <view class='video_info'>
        <!-- 视频标签 -->
        <video src='{{videoInfo.videoSrc}}' controls></video>
        <!-- 视频标题 -->
        <view class='video_title'>
          <text>{{videoInfo.videoTitle}}</text>
          <text class='fa fa-angle-down'></text>
        </view>
        <!-- 视频作者 -->
        <view class='video_detail'>
          <!-- 作者 -->
          <text class='author'>{{videoInfo.author}}</text>
          <!-- 播放量 -->
          <text class='play_count'>{{videoInfo.playCount}}</text>
          <!-- 评论量 -->
          <text class='comment_count'>{{videoInfo.commentCount}}弹幕</text>
          <!-- 时间 -->
          <text class='date'>{{videoInfo.date}}</text>
        </view>
      </view>
    
      <!-- 推荐视频 -->
      <view class='other_list'>
        <navigator class='item_other' wx:for="{{othersList}}" wx:key="{{index}}">
          <!-- 图片容器 -->
          <view class='other_img_wrap'>
            <image mode='widthFix' src='{{item.imgSrc}}'></image>
          </view>
          <!-- 视频详情 -->
          <view class='other_info'>
            <!-- 标题 -->
            <view class='other_title'>{{item.title}}</view>
            <!-- 播放量 -->
            <view class='other_detail'>
              <!-- 播放量 -->
              <text class='play_count'>{{item.playMsg}}次观看</text>
              <!-- 评论量 -->
              <text class='comment_count'>{{item.commentCount}}弹幕</text>
            </view>
          </view>
        </navigator>
      </view>
    </view>

    detial.wxss

    /* pages/detial/detial.wxss */
    .main{
      padding:10rpx;
      color:#666;
    }
    /* 视频 */
    .video_info{
      margin-top:10rpx;
    }
    .video_info video{
      width:100%;
    }
    .video_title{
      display: flex;
      justify-content: space-between;
      font-size: 35rpx;
    }
    .video_detail{
      margin-top:5rpx;
      font-size: 28rpx;
    }
    .video_detail .author{
      color:#000;
    }
    .video_detail text{
      margin-left:10rpx;
    }
    
    /* 推荐视频 */
    .other_list{
      margin-top:20rpx;
    }
    .item_other{
      display: flex;
      justify-content: space-between;
      margin-bottom: 20rpx;
    }
    .item_other .other_img_wrap{
      width:38%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .other_img_wrap image{
      width:90%;
      border-radius: 15rpx;
    }
    .item_other .other_info{
      width:60%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    
    }
    .other_info .other_title{
      font-size: 30rpx;
      color:#e06f93;
    }
    .other_info .other_detail{
      font-size: 26rpx;
      color:#666;
    }

     评论模块

    detail.js

    // pages/detial/detial.js
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        // 视频信息   防止后台出错 给个默认值
        videoInfo:{
          author:"牧草君1",
          commentCount:1345,
          date:"12-15",
          id:1,
          playCount:"24.9万",
          // videoSrc:"http://files.ak48.xyz/2018120195458.mp4",
          videoSrc:"http://47.90.213.237/youtube/JU3AL8S3zyE.mp4",
          videoTitle:"世界上广告最多的网站判定!真的有10000条广告!【暗物质#2】"
        },
        // 推荐列表 防止服务器出错 给一组默认值
        othersList:[
          {
            "imgSrc": "https://i0.hdslb.com/bfs/archive/cb93f69df4a4b9216d5149dc58d9a2ce9436b697.jpg@320w_200h.webp",
            "duration": "00:06:28",
            "title": "世界上最小的网站!小到只有0.4KB,你信么?【暗物质#1】",
            "playMsg": "20.6",
            "commentCount": " 445"
          },
          {
            "imgSrc": "https://i1.hdslb.com/bfs/archive/412d5a027a2d4adcd61816e8ce676911c92e7974.jpg@320w_200h.webp",
            "duration": "00:02:11",
            "title": "改革春风吹满地",
            "playMsg": "52.1",
            "commentCount": " 564"
          },
          {
            "imgSrc": "https://i0.hdslb.com/bfs/archive/945293f72fdec1eb6228afe9a3f1b9c433544ae5.jpg@320w_200h.webp",
            "duration": "00:01:39",
            "title": "呲哩呲哩?是不是我大破站太火了!!!",
            "playMsg": "27.0",
            "commentCount": " 1179"
          },
          {
            "imgSrc": "https://i1.hdslb.com/bfs/archive/2f1c5bd88f39c2a489ce1a7b2f715a102c2edf15.jpg@320w_200h.webp",
            "duration": "00:01:03",
            "title": "当B站被腾讯收购!会发生什么?",
            "playMsg": "117.8",
            "commentCount": " 4348"
          },
          {
            "imgSrc": "https://i2.hdslb.com/bfs/archive/873c62e7ab58f5f9f4f890fc66eef1efb62e2fb3.jpg@320w_200h.webp",
            "duration": "00:01:01",
            "title": "雷锋的故事里就这配音就tm值一个亿",
            "playMsg": "163.2",
            "commentCount": " 4668"
          },
          {
            "imgSrc": "https://i2.hdslb.com/bfs/archive/a4b08a069be32e489a48094ff62f413571d59d4d.jpg@320w_200h.webp",
            "duration": "00:00:16",
            "title": "往鲍鱼抹上芥末会发生什么",
            "playMsg": "116.5",
            "commentCount": " 1135"
          },
          {
            "imgSrc": "https://i0.hdslb.com/bfs/archive/e1acedadb5f51a49f1d74f4540162693010b2e2d.jpg@320w_200h.webp",
            "duration": "00:01:42",
            "title": "猜猜黑板上画的是什么?绝对不是你们看的那样《学校霸王》",
            "playMsg": "99.6",
            "commentCount": " 1770"
          },
          {
            "imgSrc": "https://i1.hdslb.com/bfs/archive/f05855bdfc400cd910a4f8e0fee652444bb6ef00.jpg@320w_200h.webp",
            "duration": "00:03:53",
            "title": "肯德基内部员工才知道,用这几句“暗语”点餐,能让你吃到撑!",
            "playMsg": "27.7",
            "commentCount": " 436"
          },
          {
            "imgSrc": "https://i0.hdslb.com/bfs/archive/0d3b1e699a2e84260ef5a8a71f102d4982f7a596.jpg@320w_200h.webp",
            "duration": "00:00:41",
            "title": "bilibili播放量最多的视频?!!",
            "playMsg": "35.6",
            "commentCount": " 246"
          },
          {
            "imgSrc": "https://i2.hdslb.com/bfs/archive/9a6e89134d6cbead10765950f0ec12fee482a15a.jpg@320w_200h.webp",
            "duration": "00:08:58",
            "title": "淘宝上最侮辱智商的商品!真是花钱买了个教训",
            "playMsg": "4.7",
            "commentCount": " 363"
          },
          {
            "imgSrc": "https://i1.hdslb.com/bfs/archive/5052636563f803ef1a5a4c397dce8fd274621c3f.jpg@320w_200h.webp",
            "duration": "00:03:48",
            "title": "男子醉驾被查扬言“我爷爷是搞原子弹的” 交警一查还真是",
            "playMsg": "75.8",
            "commentCount": " 931"
          },
          {
            "imgSrc": "https://i0.hdslb.com/bfs/archive/c2c60b08d4ecb10736f54f514c83767aaec1e880.jpg@320w_200h.webp",
            "duration": "00:02:53",
            "title": "万恶之源:我信你个鬼,你个糟老头子坏的很",
            "playMsg": "223.7",
            "commentCount": " 3439"
          },
          {
            "imgSrc": "https://i1.hdslb.com/bfs/archive/fe317a18cba364c62becf478f04d835c1b4708f3.jpg@320w_200h.webp",
            "duration": "00:02:43",
            "title": "打劫遇上一车特警,笨贼视频在youtube上,世界网友都笑死了!",
            "playMsg": "209.7",
            "commentCount": " 2431"
          },
          {
            "imgSrc": "https://i2.hdslb.com/bfs/archive/f0252c692931a8605d33aa8b4f0471100b24c7c5.jpg@320w_200h.webp",
            "duration": "00:01:59",
            "title": "B站恐怖事件!明明声音已经关掉却还能听到声音???",
            "playMsg": "57.8",
            "commentCount": " 1099"
          },
          {
            "imgSrc": "https://i1.hdslb.com/bfs/archive/98714070087b590dfb0d0150013c4a0c8da8b8e3.jpg@320w_200h.webp",
            "duration": "00:15:31",
            "title": "不小心受伤怎么办?教你23个生活的必备技巧@油兔不二字幕组",
            "playMsg": "118.8",
            "commentCount": " 3425"
          },
          {
            "imgSrc": "https://i0.hdslb.com/bfs/archive/9a4e9d3682e8f930d5ece87c24203105bc09fa1f.jpg@320w_200h.webp",
            "duration": "00:01:44",
            "title": "女朋友逛完漫展在酒店累趴了,该怎么办呢",
            "playMsg": "62.4",
            "commentCount": " 966"
          },
          {
            "imgSrc": "https://i0.hdslb.com/bfs/archive/d8bcdd8555027ad27896186da479d21a53218f8b.png@320w_200h.webp",
            "duration": "00:01:32",
            "title": "能让鲍鱼跳舞!遇到醋就饥忍难耐了吗?还是本能反应?",
            "playMsg": "5.7",
            "commentCount": " 77"
          },
          {
            "imgSrc": "https://i2.hdslb.com/bfs/archive/0970d603df54320610156a06d2ce8a5a4097b0c6.jpg@320w_200h.webp",
            "duration": "00:02:12",
            "title": "拘留所里出人才 惊呆了!",
            "playMsg": "20.2",
            "commentCount": " 363"
          },
          {
            "imgSrc": "https://i1.hdslb.com/bfs/archive/aa27ae344fc81d1f1be2ac4c691a27b43334e553.jpg@320w_200h.webp",
            "duration": "00:01:20",
            "title": "本以为小情侣在车库约会,8秒后,荒唐画面发生了",
            "playMsg": "33.6",
            "commentCount": " 326"
          },
          {
            "imgSrc": "https://i1.hdslb.com/bfs/archive/45a3a1258f7e473cc45ab0823729ac0b5618eee6.png@320w_200h.webp",
            "duration": "00:02:46",
            "title": "朱广权:自信=手拿30米长刀,先让你跑29米。",
            "playMsg": "48.2",
            "commentCount": " 852"
          }
        ],
        // 评论列表
        commentData:{
          commentTotalCount:454,
          commentList: [
            {
              "userIconSrc": "https://i2.hdslb.com/bfs/face/fe81d93c5beb92557474f48551d3b4966eadeeef.jpg@60w_60h.webp",
              "username": "峰岛达裕",
              "commentInfo": "什么?居然不是某些网站的澳门皇家赌场?",
              "commentDate": "12-15"
            },
            {
              "userIconSrc": "https://i0.hdslb.com/bfs/face/54923922eea6532c2dff95e45743b6a1203c0230.jpg@60w_60h.webp",
              "username": "黑狌白鸾",
              "commentInfo": "鲁迅说过,如果你有一个苹果,我有一个苹果,我们交换,一人还是一个苹果,如果你有一个网站,我有一个网站,我们交换那我们双方就有两个网站",
              "commentDate": "12-15"
            },
            {
              "userIconSrc": "https://i1.hdslb.com/bfs/face/d2fa6637d952d176a13c706f5efd179f52a12367.jpg@60w_60h.webp",
              "username": "马猴烧酒柊筱娅",
              "commentInfo": "等等,那这样的话,牧草君岂不是一个视频打了1w多个广告[小电视_吃惊]",
              "commentDate": "12-15"
            },
            {
              "userIconSrc": "https://i1.hdslb.com/bfs/face/c605ce1a2f47b049ab7f271aa228bb8e96a43bf0.jpg@60w_60h.webp",
              "username": "NAN某",
              "commentInfo": "我经常逛的那些网站也有很多广告(`・ω・´)",
              "commentDate": "12-15"
            },
            {
              "userIconSrc": "https://i0.hdslb.com/bfs/face/54923922eea6532c2dff95e45743b6a1203c0230.jpg@60w_60h.webp",
              "username": "牧草君",
              "commentInfo": "你们赶快去这个王网站了里面找找好玩的,我已经找到好几个(✪▽✪)好康的网站了[小电视_赞]",
              "commentDate": "12-15"
            }
          ]
        }
        
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        console.log(options);
        // 获取当前视频id
        let videoId=options.id;
        // 获取当前视频
        this.getCurrentVideo(videoId);
        // 获取推荐列表
        this.getOthersList(videoId);
        // 获取评论列表
        this.getCommentList(videoId);
      },
      /**
       * 获得当前视频
       */
      getCurrentVideo(videoId){
        var self =this;
        wx.request({
          url: 'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/videoDetail?id=' + videoId,
          success(res){
            console.log(res);
            if(res.data.code===0){
              self.setData({
                videoInfo: res.data.data.videoInfo
              })
            }
          }
        })
      },
      /**
       * 获取推荐视频
       */
      getOthersList(videoId){
        var self=this;
        wx.request({
          url: 'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/othersList?id=' + videoId,
          success(res){
            console.log(res)
            if(res.data.code===0){
              self.setData({
                othersList: res.data.data.othersList
              })
            }
          }
        })
    
      },
      /**
       * 获取评论列表
       */
      getCommentList(videoId){
        var self=this;
        wx.request({
          url: 'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/commentsList?id=' + videoId,
          success(res){
            console.log(res)
            if(res.data.code===0){
              self.setData({
                commentData: res.data.data.commentData
              })
            }
          }
        })
      },
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      }
    })

    detail.wxml

    <view class='main'> 
      <!-- 公共的头部 -->
      <MyTitle></MyTitle>
    
      <!-- 视频详情 -->
      <view class='video_info'>
        <!-- 视频标签 -->
        <video src='{{videoInfo.videoSrc}}' controls></video>
        <!-- 视频标题 -->
        <view class='video_title'>
          <text>{{videoInfo.videoTitle}}</text>
          <text class='fa fa-angle-down'></text>
        </view>
        <!-- 视频作者 -->
        <view class='video_detail'>
          <!-- 作者 -->
          <text class='author'>{{videoInfo.author}}</text>
          <!-- 播放量 -->
          <text class='play_count'>{{videoInfo.playCount}}</text>
          <!-- 评论量 -->
          <text class='comment_count'>{{videoInfo.commentCount}}弹幕</text>
          <!-- 时间 -->
          <text class='date'>{{videoInfo.date}}</text>
        </view>
      </view>
    
      <!-- 推荐视频 -->
      <view class='other_list'>
        <navigator class='item_other' wx:for="{{othersList}}" wx:key="{{index}}">
          <!-- 图片容器 -->
          <view class='other_img_wrap'>
            <image mode='widthFix' src='{{item.imgSrc}}'></image>
          </view>
          <!-- 视频详情 -->
          <view class='other_info'>
            <!-- 标题 -->
            <view class='other_title'>{{item.title}}</view>
            <!-- 播放量 -->
            <view class='other_detail'>
              <!-- 播放量 -->
              <text class='play_count'>{{item.playMsg}}次观看</text>
              <!-- 评论量 -->
              <text class='comment_count'>{{item.commentCount}}弹幕</text>
            </view>
          </view>
        </navigator>
      </view>
    
      <!-- 评论模块 -->
      <view class='comment_wrap'>
        <view class='comment_title'>
          评论({{commentData.commentTotalCount}})
        </view>
        <view class='comment_list'>
          <view class='comment_item' wx:for="{{commentData.commentList}}" wx:key="{{index}}">
            <!-- 左侧 -->
            <view class='comment_user'>
              <image mode='widthFix' src='{{item.userIconSrc}}'></image>
            </view>
            <!-- 右侧 -->
            <view class='comment_info'>
              <view class='comment_detail'>
                <text class='author'>{{item.username}}</text>
                <text class='date'>{{item.commentDate}}</text>
              </view>
              <view class='comment_content'>{{item.commentInfo}}</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    detail.wxss

    /* pages/detial/detial.wxss */
    .main{
      padding:10rpx;
      color:#666;
    }
    /* 视频 */
    .video_info{
      margin-top:10rpx;
    }
    .video_info video{
      width:100%;
    }
    .video_title{
      display: flex;
      justify-content: space-between;
      font-size: 35rpx;
    }
    .video_detail{
      margin-top:5rpx;
      font-size: 28rpx;
    }
    .video_detail .author{
      color:#000;
    }
    .video_detail text{
      margin-left:10rpx;
    }
    
    /* 推荐视频 */
    .other_list{
      margin-top:20rpx;
    }
    .item_other{
      display: flex;
      justify-content: space-between;
      margin-bottom: 20rpx;
    }
    .item_other .other_img_wrap{
      width:38%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .other_img_wrap image{
      width:90%;
      border-radius: 15rpx;
    }
    .item_other .other_info{
      width:60%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    
    }
    .other_info .other_title{
      font-size: 30rpx;
      color:#e06f93;
    }
    .other_info .other_detail{
      font-size: 26rpx;
      color:#666;
    }
    
    /* 评论列表 */
    
    .comment_wrap{
      margin-top:10rpx;
    }
    .comment_title{
      padding: 10rpx;
      font-size: 28rpx;
    }
    .comment_list{}
    .comment_item{
      margin-bottom: 10rpx;
      padding: 10rpx;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #666;
    }
    .comment_item .comment_user{
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .comment_user image{
      width:60%;
    }
    .comment_item .comment_info{
      flex: 5;
      display: flex;
      flex-direction:column;
      justify-content: space-around;
    }
    .comment_info .comment_detail{
      display: flex;
      justify-content: space-between;
    }
    .comment_detail .author{
      font-size: 28rpx;
      color:#000;
    }
    .comment_detail .date{
      font-size: 24rpx;
      color:#666;
    }
    .comment_info .comment_content{
      font-size: 28rpx;
      color:#000000;
    }

    效果:

     完!

  • 相关阅读:
    Leetcode Binary Tree Level Order Traversal
    Leetcode Symmetric Tree
    Leetcode Same Tree
    Leetcode Unique Paths
    Leetcode Populating Next Right Pointers in Each Node
    Leetcode Maximum Depth of Binary Tree
    Leetcode Minimum Path Sum
    Leetcode Merge Two Sorted Lists
    Leetcode Climbing Stairs
    Leetcode Triangle
  • 原文地址:https://www.cnblogs.com/fqh123/p/11625589.html
Copyright © 2020-2023  润新知