微信小程序网悦新闻开发--视频模块开发(四)
目录
视频列表
首先给大家展示一下视频列表页面的效果图
视频列表使用微信小程序视图容器组件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%;
}
结束语
这样一个简单视频模块就开发完了,其中里面用到的自定义组件在稍后的章节中会单独拿出来讲解,大家有兴趣的还可以增加点赞评论等功能。