微信小程式（看文件寫例項四）微信小程式課堂寶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}); } }) |
下篇將介紹簽到的邏輯及程式碼實現。