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

目录

微信小程序网悦新闻开发--功能介绍(一)

微信小程序网悦新闻开发--小程序配置(二)

微信小程序网悦新闻开发--首页模块开发(三)

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

微信小程序网悦新闻开发--我的模块开发(五)

微信小程序网悦新闻开发--自定义组件开发(六)

微信小程序网悦新闻开发--云函数以及云数据开发(七)

 

视频列表

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

视频列表使用微信小程序视图容器组件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%;
}

结束语

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

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页