微信小程序网悦新闻开发--视频模块开发（四）

最新推荐文章于 2020-07-02 22:44:18 发布

搬砖狗-小强

最新推荐文章于 2020-07-02 22:44:18 发布

阅读量1.3k

点赞数

分类专栏：微信小程序文章标签：微信小程序视频播放视频列表

本文链接：https://blog.csdn.net/qq243348167/article/details/106348737

版权

微信小程序专栏收录该内容

8 篇文章 8 订阅

订阅专栏

视频列表

首先给大家展示一下视频列表页面的效果图

视频列表使用微信小程序视图容器组件scroll-view开发，以下是对应列表页面wxml的代码.。

<view class="page"  wx:if="{{loading}}">
<myTabBar width="{{'670px'}}" bind:tabBarItemTap="tabBarItemTap" data_tabBar_list="{{data_tabBar_list}}" selected_tabBar="{{selected_tabBar}}"></myTabBar>
<myMessageBox messageBoxText="{{messageBoxText}}" wx:if="{{isShowMessageBox}}"></myMessageBox>
<scroll-view 
style="height:{{scrollHeight}}px;"
scroll-y="{{true}}" 
refresher-enabled="{{true}}" 
bindrefresherrefresh="onRefresh" 
refresher-triggered="{{isRefresh}}" 
bindscrolltolower="onReachBottom" 
scrollTop="{{scrollTop}}" >
  <view wx:for="{{data_list}}" wx:for-index="idx" wx:for-item="item">
    <view class="list_item" data-item="{{item}}" bindtap="listItemTap" >
        <image class="list_image" mode="aspectFill" src="{{item.cover}}"></image>
        <view class="list_item_header">
            <text class="news_title">{{item.title}} </text>
         </view>
         <view class="list_item_footer">
            <image class="news_topicImg" mode="aspectFill" src="{{item.topicImg}}"></image>
            <text class="news_source">{{item.videosource}} </text>
            <text class="news_replyCount">{{item.votecount}}点赞 </text>
            <text class="news_replyCount">{{item.replyCount}}回复 </text>
        </view>
    </view>
  </view>
  <view>
  <myLoading  wx:if="{{nextLoading}}" ></myLoading>
</view>
</scroll-view>
</view>

视频列表主要用到了scroll-view组件的bindrefresherrefresh、bindscrolltolower实现了列表的上拉刷新和下拉加载的功能。其实要使用上拉刷新还必须把scroll-view组件的refresher-enabled属性置为true，在视频分类切换的时候希望列表回到顶部可以用到scrollTop属性。这边有个注意点，调用网易新闻视频接口的时候需要传Cookie才能获取到数据。以下是对应列表页面js的代码。

Page({
  data: {
      isRefresh:false,
      pageSize: 10,
      page: 0,
      scrollTop: 0,
      loading: false,
      nextLoading: false,
      scrollHeight:0,
      isShowMessageBox: false,
      messageBoxText:'',
      data_list :[],
      Cookie:'',
      data_tabBar_list:[
        {
          name:'搞笑',
          url:'https://3g.163.com/touch/nc/api/video/recommend/Video_Funny/'
        },
        {
          name:'新闻现场',
          url:'https://3g.163.com/touch/nc/api/video/recommend/Video_Scene/'
        }
        //……剩余的分类此处省略……
      ],
      selected_tabBar:{}
  },
  onLoad: function (options) {
    var that = this;
    that.setData({
      selected_tabBar:that.data.data_tabBar_list[0]
    })
    wx.getSystemInfo({
        success:function(res){
            that.setData({
                scrollHeight:res.windowHeight
            })
        }
    })
    wx.request({
      url: that.data.selected_tabBar.url + '0-10.do?callback=videoList', 
      data: {},
      header: {
        'content-type': 'application/json', 
        'Cookie': that.data.Cookie,
      },
      success (res) {
        that.setData({
          data_list: that.data_transform(res.data),
          loading:true
        })
      }
    })
  },
  onRefresh: function(event) {
    var that = this;
    wx.request({
      url: this.data.selected_tabBar.url + '0-10.do?callback=videoList', 
      data: {},
      header: {
        'content-type': 'application/json', 
        'Cookie': that.data.Cookie,
      },
      success (res) {
        that.setData({
          data_list: that.data_transform(res.data),
          isRefresh:false,
          page:0,
          isShowMessageBox:true,
          messageBoxText: '成功为您推荐10条新内容'
        })
        setTimeout(function(){
          that.setData({
            isShowMessageBox:false,
            messageBoxText:''
          })
        },1000)
      }
    })
  },
  onReachBottom: function(event) {
    var that = this;
    if(that.data.nextLoading){
      return;
    }
    var newPage =that.data.page+that.data.pageSize;
    var pageName = newPage + "-" + that.data.pageSize + ".do?callback=videoList";
    that.setData({
      nextLoading:true
    });
    wx.request({
      url: this.data.selected_tabBar.url + pageName, 
      data: {},
      header: {
        'content-type': 'application/json', 
        'Cookie': that.data.Cookie,
      },
      success (res) {
        that.setData({
          page: newPage,
          data_list: that.data.data_list.concat(that.data_transform(res.data)),
          nextLoading:false
        })
      }
    })
  },
  data_transform:function(data){
    var tmp_data = JSON.parse(data.substring(10,data.length-1));
    for (var key in tmp_data)
        if(typeof tmp_data[key] == typeof []) 
        return tmp_data[key];
  },
  tabBarItemTap: function(e) {
    var tabBar ={};
    tabBar.name = e.detail.name;
    tabBar.url = e.detail.url;
    this.setData({
      selected_tabBar:e.detail,
      scrollTop:0
    });
    this.onRefresh();
  },
  listItemTap: function(e) {
    var obj = JSON.stringify(e.currentTarget.dataset.item);
    wx.navigateTo({
      url: '/pages/video/details/index?obj=' + encodeURIComponent(obj), // 进行编码,
    })
  }
})

以下是对应页面wxss的代码。

.list_image{
  width: 750rpx; 
  height: 420rpx; 
  z-index: -1
}
.list_item{
  height: 480rpx; 
}
.news_title{
  font-size: 18px;
  color: #fff;
}
.news_source{
  font-size: 12px;
  color: #B4B4B4;
}
.news_replyCount{
  margin-left: 4px;
  font-size: 12px;
  color: #B4B4B4;
}
.list_item_footer{
  width: 750rpx; 
  height: 60rpx; 
  padding: 0px 8px;
  display: flex;
  align-items: center;
}
.list_item_header{
  width: 750rpx; 
  height: 410rpx; 
  margin-top: -420rpx;
  padding: 0 8px;
}
.news_topicImg{
  width: 32rpx;
  height: 32rpx;
  margin-right: 6px;
  border-radius: 50%;
}

视频详情

首先给大家展示一下新闻详情页面的效果图

视频详情使用微信小程序视图容器组件scroll-view和视频组件video 开发，提供用户播放视频，video组件的poster属性可以设置视频的封面，video组件的src属性可以设置视频的源，以下是对应列表页面wxml的代码.。

<view class="page"  wx:if="{{loading}}">
  <scroll-view scroll-y='true'  style="height:100%;" scroll-y="{{true}}" >
    <view class="news_box">
      <video 
      id="myVideo" 
      class="news_video"
      poster="{{model.cover}}"
      src="{{model.mp4Hd_url}}"
      show-center-play-btn='{{false}}' 
      show-play-btn="{{true}}" 
    ></video>
      <text class="news_title">{{model.title}}</text>
    </view>
  </scroll-view>
</view>

列表页面通过路由可以把信息传到详情页面，在onLoad方法中就可以取到列表传递过来的值然后绑定，以下是对应列表页面js的代码.。

Page({
  data: {
    model:{},
    loading:true,
  },
  onLoad: function (options) {
    var obj =JSON.parse(decodeURIComponent(options.obj))
    this.setData({
      model:obj
    })
  }
})

以下是对应页面wxss的代码。

.news_box{
  display: flex;
  flex-direction: column;
  padding:18px 0px;
}
.news_title{
  font-size: 20px;
  line-height: 32px;
  padding:18px;
}
.news_info{
  padding:18px;
}
.news_source{
  font-size: 12px;
  color: #B4B4B4;
}
.news_date{
  margin-left: 8px;
  font-size: 12px;
  color: #B4B4B4;
}
.news_bigger_image{
  width: 680rpx; 
  height: 420rpx; 
  border: 1px solid #EEF0F4;
}
.news_content{
  margin-top: 8px;
  font-size: 18px;
  line-height: 32px;
}
.news_video{
  width: 100%;
}

结束语

这样一个简单视频模块就开发完了，其中里面用到的自定义组件在稍后的章节中会单独拿出来讲解，大家有兴趣的还可以增加点赞评论等功能。

搬砖狗-小强

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
1
评论
微信小程序网悦新闻开发--视频模块开发（四）

视频列表首先给大家展示一下视频列表页面的效果图视频列表使用微信小程序视图容器组件scroll-view开发，以下是对应列表页面wxml的代码.。<view class="page" wx:if="{{loading}}"><myTabBar width="{{'670px'}}" bind:tabBarItemTap="tabBarItemTap" data_tabBar_list="{{data_tabBar_list}}" selected_tabBar="{{s
复制链接

扫一扫