1. 程式人生 > >微信小程式(看文件寫例項四)微信小程式課堂寶APP實現簽到子頁面佈局及課程視訊播放頁面

微信小程式(看文件寫例項四)微信小程式課堂寶APP實現簽到子頁面佈局及課程視訊播放頁面

一、簽到子頁面佈局

子頁面主要是一個簽到按鈕,然後下方是簽到記錄列表。

1、簽到按鈕

佈局程式碼:

<button class='sign-button' bindtap='sign'>簽到</button>

樣式程式碼:

/* 簽到按鈕樣式 */

.sign-button{

margin-top: 30rpx;

margin-bottom: 30rpx;

display: flex;

width: 240rpx;

height: 240rpx;

line-height: 240rpx;

color: red;

background-color: greenyellow;

border-radius: 50%;

justify-content: center;

font-size: 36px;

}

效果:

2、簽到列表設計

佈局程式碼:

<text class='sign-record-text'>簽到記錄</text>

<view class='section'>

<block wx:for="{{mSignRecord}}" wx:key="*unique">

 

<view wx:if="{{item.signFlag}}" class='sign-record-item'>

<view class='sign-record-item-date'>{{item.date}}</view>

<view class='sign-record-item-count'>第{{item.numberNo}}次課</view>

<icon type='success' class='sign-record-item-icon'></icon>

<text class='sign-record-item-result'>已簽到</text>

</view>

 

<view wx:else class='sign-record-item' style='color:red;'>

<view class='sign-record-item-date'>{{item.date}}</view>

<view class='sign-record-item-count'>第{{item.numberNo}}次課</view>

<icon type='cancel' class='sign-record-item-icon' ></icon>

<text class='sign-record-item-result'>未簽到</text>

</view>

</block>

</view>

樣式程式碼:

/* 簽到記錄列表item樣式 */

.sign-record-item{

height: 40px;

line-height: 40px;

border: 1px solid #eee;

white-space: nowrap;

display: flex;

flex-direction: row;

font-size: 15px;

color: green;

align-items: center;

justify-content: center;

}

/* 簽到記錄列表item日期樣式 */

.sign-record-item-date{

padding-left: 50rpx;

}

/* 簽到記錄列表item次數樣式 */

.sign-record-item-count{

padding-left: 100rpx;

}

/* 簽到記錄列表item是否簽到icon樣式 */

.sign-record-item-icon{

margin-top: 20px;

padding-left: 100rpx;

}

/* 簽到記錄列表item簽到結果樣式 */

.sign-record-item-result{

padding-left: 15rpx;

}

效果:

二、課程視訊播放頁面

課程視訊是一個page,於是新建一個page,佈局思路是螢幕上方是播放元件video,接下來是課程系列名稱,然後是集數列表,點選時可以播放對應的url。

1、頁面佈局

看原始碼發現video元件有如下屬性:

屬性名 型別 預設值 說明 最低版本
src String   要播放視訊的資源地址,支援雲檔案ID(2.2.3起)  
initial-time Number   指定視訊初始播放位置 1.6.0
duration Number   指定視訊時長 1.1.0
controls Boolean true 是否顯示預設播放控制元件(播放/暫停按鈕、播放進度、時間)  
danmu-list Object Array   彈幕列表  
danmu-btn Boolean false 是否顯示彈幕按鈕,只在初始化時有效,不能動態變更  
enable-danmu Boolean false 是否展示彈幕,只在初始化時有效,不能動態變更  
autoplay Boolean false 是否自動播放  
loop Boolean false 是否迴圈播放 1.4.0
muted Boolean false 是否靜音播放 1.4.0
page-gesture Boolean false 在非全屏模式下,是否開啟亮度與音量調節手勢 1.6.0
direction Number   設定全屏時視訊的方向,不指定則根據寬高比自動判斷。有效值為 0(正常豎向), 90(螢幕逆時針90度), -90(螢幕順時針90度) 1.7.0
show-progress Boolean true 若不設定,寬度大於240時才會顯示 1.9.0
show-fullscreen-btn Boolean true 是否顯示全屏按鈕 1.9.0
show-play-btn Boolean true 是否顯示視訊底部控制欄的播放按鈕 1.9.0
show-center-play-btn Boolean true 是否顯示視訊中間的播放按鈕 1.9.0
enable-progress-gesture Boolean true 是否開啟控制進度的手勢 1.9.0
objectFit String contain 當視訊大小與 video 容器大小不一致時,視訊的表現形式。contain:包含,fill:填充,cover:覆蓋  
poster String   視訊封面的圖片網路資源地址或雲檔案ID(2.2.3起支援)如果 controls 屬性值為 false 則設定 poster 無效  
bindplay EventHandle   當開始/繼續播放時觸發play事件  
bindpause EventHandle   當暫停播放時觸發 pause 事件  
bindended EventHandle   當播放到末尾時觸發 ended 事件  
bindtimeupdate EventHandle   播放進度變化時觸發,event.detail = {currentTime, duration} 。觸發頻率 250ms 一次  
bindfullscreenchange EventHandle   視訊進入和退出全屏時觸發,event.detail = {fullScreen, direction},direction取為 vertical 或 horizontal 1.4.0
bindwaiting EventHandle   視訊出現緩衝時觸發 1.7.0
binderror EventHandle   視訊播放出錯時觸發 1.7.0

於是得到佈局程式碼:

<!--pages/videoPlayer.wxml-->

<view class="section">

<video src="{{videoItemSrc}}" controls ></video>

</view>

<view class='section course-series'>

<text>{{course_series}}</text>

</view>

<view class='bound-section'></view>

<view class='section'>

<block wx:for="{{videoSeries}}" wx:key="*this">

<label class='course-video-item' id="{{index}}" bindtap='videoChooseClick'>

<text>第{{item.episode}}集</text>

<text class='video-item-name'>{{item.name}}</text>

<view class='video-item-duration'>

{{item.duration}}

</view>

<view class='bound-line'></view>

</label>

</block>

</view>

樣式程式碼:

/* pages/vedioPlayer.wxss */

.section video{

width: 100%;

}

.course-series{

height: 100rpx;

padding-left: 20rpx;

border-left-width: 5rpx;

border-left-color: greenyellow;

border-left-style: solid;

line-height: 100rpx;

color: green;

}

.course-video-item{

height: 60rpx;

padding-left: 20rpx;

border-left-width: 5rpx;

border-left-color: blue;

border-left-style: solid;

line-height: 60rpx;

color: rgb(7, 145, 199);

}

.video-item-name{

padding-left: 20rpx;

}

.video-item-duration{

padding-left: 2rpx;

text-align: right;

}

效果:

2、後臺程式碼

(1)在main頁面請求伺服器獲得視訊資訊

(2)格式化資料

(3)首頁輪播圖載入視訊縮圖url

(4)點選對應輪播圖把對應url所屬的視訊資訊傳給視訊播放頁面

(5)視訊播放頁面解析傳過來的資料載入課程名稱和集數資訊

(6)點選集數列表的item時把當前集的url傳給video元件即可播放

首頁程式碼:

var Bmob = require("../../utils/Bmob-1.6.3.min.js");

data: {

// 輪播圖對應視訊資訊

videoData: [],

// 輪播圖對應圖片地址

videoImgUrls:[]

}

,

//輪播圖點選事件

swiperItemClick:function(e){

var vedioSeries = new Array();

var index = 0;

// 判斷是同一個系列課程

for(var i=0;i<this.data.videoData.length;i++){

if (this.data.videoData[i].series == this.data.videoImgUrls[e.currentTarget.id].series){

videoSeries[index++] = this.data.videoData[i];

}

}

// 把vedioSeries傳給視訊播放頁面

wx.navigateTo({

url: '../videoPlayer/videoPlayer?videoSeries=' + JSON.stringify(videoSeries),

});

}

,

//獲得輪播的視訊資訊

getVideoInfo:function(){

wx.showToast({

title: '正在載入...',

icon:'loading',

duration:10000

})

let query = Bmob.Query('course_vedio');

query.find().then(res => {

var imgUrls = new Array();

for (var i = 0; i < res.length; i++) {

if (res[i].thumbnail != null && imgUrls.indexOf(res[i].series) == -1)

imgUrls[i] = res[i];

}

wx.hideToast();

that.setData({ videoData: res, videoImgUrls: imgUrls });

});

}

注意,現在引入Bmob伺服器的sdk,要在app.js中初始化:

Bmob.initialize("xxx", "xxx");

詳情請檢視bmob官方網站https://www.bmob.cn/

vedioPlayer.js程式碼:

// pages/vedioPlayer.js

var Bmob = require("../../utils/Bmob-1.6.3.min.js");

var that;

 

Page({

/**

* 頁面的初始資料

*/

data: {

videoItemSrc:null,

course_series:null,

videoSeries:[]

},

/**

* 生命週期函式--監聽頁面載入

*/

onLoad: function (options) {

var series = JSON.parse(options.videoSeries);

this.setData({ videoItemSrc: series[0].video.url,course_series: series[0].series,videoSeries : series});

},

videoChooseClick:function(e){

this.setData({ videoItemSrc: this.data.videoSeries[e.target.id].video.url});

}

})

下篇將介紹簽到的邏輯及程式碼實現。