项目实训：影视点播
本次实训的目的是在实训老师的指导下，了解，学习进而制作简单的微信小程序，这次的样本是可以实现热播影视推荐、电影、电视剧、综艺节目、以及在线影片搜索等功能的影视小程序。因为微信在中国乃至世界得到了广泛的传播和使用，有拥有大量的用户群体，这样便可以使我们的小程序得到充分使用和传播。在小程序设计中，我们利用的是一个老师提供的url， 通过调用里面的接口里的数据，将采集到数据在我们的小程序中进行显示，通过对小程序基本的规划，在充分的考虑到用户需求之后，对小程序的整个框架有了一个基本的概念，然后分模块对小城的功能逐步实现和加工。分别实现了电影，电视剧，主页，播放器，搜索等功能模块。最终实现了整个微信小程序的开发与发布。
效果图
推荐影视部分
电影界面
电视剧界面
影视播放界面
推荐页实现
var totalPage=0;
var pageno=1;
var currentPage=1;
Page({
/**
* 页面的初始数据
*/
data: {
vlist:[],
keyword:''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
this.data.vlist = [];
var keyword = this.data.keyword
this.loadData('1', keyword);
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
console.log("触发onReachBottom函数" + "totalPage:" + totalPage + " currentPage:" + currentPage);
if (currentPage < totalPage) {
currentPage++;
console.log("currentPage:" + currentPage);
var keyword=this.data.keyword;
this.loadData(currentPage,keyword);
}
if (currentPage >=totalPage){
currentPage=1;
}
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
},
submit: function(event) {
console.log("event!!!"+event);
this.data.vlist=[];
var keyword = event.detail.value.keyword;
this.data.keyword=keyword
this.loadData('1', keyword);
},
loadData:function(pageNo,keyword){
console.log("keyword!!!!!!!!"+keyword);
wx.showLoading({
title: '加载中..',
})
var that = this;
wx.request({
url: 'https://v.yuanmasoft.com/api/videoSearch ',
data: {
keywords: keyword,
pageno: pageNo
},
header: {
'content-type': 'application/json'
},
success: function (res) {
console.log('执行search！！！！！！');
console.log(res);
var serverData = res.data;
var status = serverData.msg;
if (status == 'success') {
var searchData = serverData.data;
console.log('searchData!!!!' + searchData);
var result = searchData.result;
console.log('result!!!!' + result);
totalPage=searchData.totalPage;
var videoSet = [];
for (var i = 0; i < result.length; i++) {
var item = result[i];
var videoTemp = {
name: item.VIDEO_NAME,
poster: item.VIDEO_POSTER_URL,
vid: item.VIDEOBASIC_ID
}
videoSet.push(videoTemp);
}
var totalList=that.data.vlist;
var newSet=totalList.concat(videoSet);
console.log("videoSet :" + videoSet);
that.setData({
vlist: newSet
});
}
},
complete: function () {
wx.hideLoading()
}
})
},
toPlay:function(event){
console.log("执行执行search的toPlay"+event);
var vid=event.target.dataset.vid;
wx:wx.navigateTo({
url: '../player/player?vid='+vid,
})
},
onImageError:function(event){
var vid=event.target.dataset.vid;
var totalList=this.data.vlist;
for(var i=0;i<totalList.length;i++){
var item=totalList[i];
var itemId=item.vid;
if(itemId==vid){
item.poster='/images/default_200.png'
break;
}
}
this.setData({vlist:totalList});
}
})
电影页电视剧页面类似，实现下拉刷新，上拉加载更多，实现点击播放电影
4.2 实现电影页面功能。
展示电影页面，实现下拉刷新，上拉加载更多，实现点击播放电影
程序代码：
var totalPage=0;
var pageno=1;
var currentPage=1;
Page({
/**
* 页面的初始数据
*/
data: {
vlist:[],
keyword:''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
this.data.vlist = [];
var keyword = this.data.keyword
this.loadData('1', keyword);
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
console.log("触发onReachBottom函数" + "totalPage:" + totalPage + " currentPage:" + currentPage);
if (currentPage < totalPage) {
currentPage++;
console.log("currentPage:" + currentPage);
var keyword=this.data.keyword;
this.loadData(currentPage,keyword);
}
if (currentPage >=totalPage){
currentPage=1;
}
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
},
submit: function(event) {
console.log("event!!!"+event);
this.data.vlist=[];
var keyword = event.detail.value.keyword;
this.data.keyword=keyword
this.loadData('1', keyword);
},
loadData:function(pageNo,keyword){
console.log("keyword!!!!!!!!"+keyword);
wx.showLoading({
title: '加载中..',
})
var that = this;
wx.request({
url: 'https://v.yuanmasoft.com/api/videoSearch ',
data: {
keywords: keyword,
pageno: pageNo
},
header: {
'content-type': 'application/json'
},
success: function (res) {
console.log('执行search！！！！！！');
console.log(res);
var serverData = res.data;
var status = serverData.msg;
if (status == 'success') {
var searchData = serverData.data;
console.log('searchData!!!!' + searchData);
var result = searchData.result;
console.log('result!!!!' + result);
totalPage=searchData.totalPage;
var videoSet = [];
for (var i = 0; i < result.length; i++) {
var item = result[i];
var videoTemp = {
name: item.VIDEO_NAME,
poster: item.VIDEO_POSTER_URL,
vid: item.VIDEOBASIC_ID
}
videoSet.push(videoTemp);
}
var totalList=that.data.vlist;
var newSet=totalList.concat(videoSet);
console.log("videoSet :" + videoSet);
that.setData({
vlist: newSet
});
}
},
complete: function () {
wx.hideLoading()
}
})
},
toPlay:function(event){
console.log("执行执行search的toPlay"+event);
var vid=event.target.dataset.vid;
wx:wx.navigateTo({
url: '../player/player?vid='+vid,
})
},
onImageError:function(event){
var vid=event.target.dataset.vid;
var totalList=this.data.vlist;
for(var i=0;i<totalList.length;i++){
var item=totalList[i];
var itemId=item.vid;
if(itemId==vid){
item.poster='/images/default_200.png'
break;
}
}
this.setData({vlist:totalList});
}
})
包括电影、电视剧、聚合、等但不限于以上资源。实现上拉加载更多功能，实现点击跳转播放。
var totalPage=0;
var pageno=1;
var currentPage=1;
Page({
/**
* 页面的初始数据
*/
data: {
vlist:[],
keyword:''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
this.data.vlist = [];
var keyword = this.data.keyword
this.loadData('1', keyword);
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
console.log("触发onReachBottom函数" + "totalPage:" + totalPage + " currentPage:" + currentPage);
if (currentPage < totalPage) {
currentPage++;
console.log("currentPage:" + currentPage);
var keyword=this.data.keyword;
this.loadData(currentPage,keyword);
}
if (currentPage >=totalPage){
currentPage=1;
}
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
},
submit: function(event) {
console.log("event!!!"+event);
this.data.vlist=[];
var keyword = event.detail.value.keyword;
this.data.keyword=keyword
this.loadData('1', keyword);
},
loadData:function(pageNo,keyword){
console.log("keyword!!!!!!!!"+keyword);
wx.showLoading({
title: '加载中..',
})
var that = this;
wx.request({
url: 'https://v.yuanmasoft.com/api/videoSearch ',
data: {
keywords: keyword,
pageno: pageNo
},
header: {
'content-type': 'application/json'
},
success: function (res) {
console.log('执行search！！！！！！');
console.log(res);
var serverData = res.data;
var status = serverData.msg;
if (status == 'success') {
var searchData = serverData.data;
console.log('searchData!!!!' + searchData);
var result = searchData.result;
console.log('result!!!!' + result);
totalPage=searchData.totalPage;
var videoSet = [];
for (var i = 0; i < result.length; i++) {
var item = result[i];
var videoTemp = {
name: item.VIDEO_NAME,
poster: item.VIDEO_POSTER_URL,
vid: item.VIDEOBASIC_ID
}
videoSet.push(videoTemp);
}
var totalList=that.data.vlist;
var newSet=totalList.concat(videoSet);
console.log("videoSet :" + videoSet);
that.setData({
vlist: newSet
});
}
},
complete: function () {
wx.hideLoading()
}
})
},
toPlay:function(event){
console.log("执行执行search的toPlay"+event);
var vid=event.target.dataset.vid;
wx:wx.navigateTo({
url: '../player/player?vid='+vid,
})
},
onImageError:function(event){
var vid=event.target.dataset.vid;
var totalList=this.data.vlist;
for(var i=0;i<totalList.length;i++){
var item=totalList[i];
var itemId=item.vid;
if(itemId==vid){
item.poster='/images/default_200.png'
break;
}
}
this.setData({vlist:totalList});
}
})
