微信小程序（看文档写实例四）微信小程序课堂宝APP实现签到子页面布局及课程视频播放页面

╰半橙微兮° 2022-05-13 12:16 128阅读 0赞

# 一、签到子页面布局 #

子页面主要是一个签到按钮，然后下方是签到记录列表。

## 1、签到按钮 ##

布局代码：

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> &lt;button class='sign-button' bindtap='sign'&gt;签到&lt;/button&gt; </td> 
 </tr> 
 </tbody> 
</table>

样式代码：

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> /* 签到按钮样式 */ .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; } </td> 
 </tr> 
 </tbody> 
</table>

效果：

![70][]

## 2、签到列表设计 ##

布局代码：

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> &lt;text class='sign-record-text'&gt;签到记录&lt;/text&gt; &lt;view class='section'&gt; &lt;block wx:for="{ {mSignRecord}}" wx:key="*unique"&gt; &nbsp; &lt;view wx:if="{ {item.signFlag}}" class='sign-record-item'&gt; &lt;view class='sign-record-item-date'&gt;{ {item.date}}&lt;/view&gt; &lt;view class='sign-record-item-count'&gt;第{ {item.numberNo}}次课&lt;/view&gt; &lt;icon type='success' class='sign-record-item-icon'&gt;&lt;/icon&gt; &lt;text class='sign-record-item-result'&gt;已签到&lt;/text&gt; &lt;/view&gt; &nbsp; &lt;view wx:else class='sign-record-item' style='color:red;'&gt; &lt;view class='sign-record-item-date'&gt;{ {item.date}}&lt;/view&gt; &lt;view class='sign-record-item-count'&gt;第{ {item.numberNo}}次课&lt;/view&gt; &lt;icon type='cancel' class='sign-record-item-icon' &gt;&lt;/icon&gt; &lt;text class='sign-record-item-result'&gt;未签到&lt;/text&gt; &lt;/view&gt; &lt;/block&gt; &lt;/view&gt; </td> 
 </tr> 
 </tbody> 
</table>

样式代码：

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> /* 签到记录列表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; } </td> 
 </tr> 
 </tbody> 
</table>

效果：

![70 1][]

# 二、课程视频播放页面 #

课程视频是一个page，于是新建一个page，布局思路是屏幕上方是播放组件video，接下来是课程系列名称，然后是集数列表，点击时可以播放对应的url。

## 1、页面布局 ##

看源码发现video组件有如下属性：

<table> 
 <tbody> 
 <tr> 
 <th>属性名</th> 
 <th style="width:129px;">类型</th> 
 <th style="width:106px;">默认值</th> 
 <th style="width:232px;">说明</th> 
 <th style="width:180px;">最低版本</th> 
 </tr> 
 <tr> 
 <td>src</td> 
 <td style="width:129px;">String</td> 
 <td style="width:106px;">&nbsp;</td> 
 <td style="width:232px;">要播放视频的资源地址，支持云文件ID（2.2.3起）</td> 
 <td style="width:180px;">&nbsp;</td> 
 </tr> 
 <tr> 
 <td>initial-time</td> 
 <td style="width:129px;">Number</td> 
 <td style="width:106px;">&nbsp;</td> 
 <td style="width:232px;">指定视频初始播放位置</td> 
 <td style="width:180px;"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.6.0</a></td> 
 </tr> 
 <tr> 
 <td>duration</td> 
 <td style="width:129px;">Number</td> 
 <td style="width:106px;">&nbsp;</td> 
 <td style="width:232px;">指定视频时长</td> 
 <td style="width:180px;"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.1.0</a></td> 
 </tr> 
 <tr> 
 <td>controls</td> 
 <td style="width:129px;">Boolean</td> 
 <td style="width:106px;">true</td> 
 <td style="width:232px;">是否显示默认播放控件（播放/暂停按钮、播放进度、时间）</td> 
 <td style="width:180px;">&nbsp;</td> 
 </tr> 
 <tr> 
 <td>danmu-list</td> 
 <td style="width:129px;">Object Array</td> 
 <td style="width:106px;">&nbsp;</td> 
 <td style="width:232px;">弹幕列表</td> 
 <td style="width:180px;">&nbsp;</td> 
 </tr> 
 <tr> 
 <td>danmu-btn</td> 
 <td style="width:129px;">Boolean</td> 
 <td style="width:106px;">false</td> 
 <td style="width:232px;">是否显示弹幕按钮，只在初始化时有效，不能动态变更</td> 
 <td style="width:180px;">&nbsp;</td> 
 </tr> 
 <tr> 
 <td>enable-danmu</td> 
 <td style="width:129px;">Boolean</td> 
 <td style="width:106px;">false</td> 
 <td style="width:232px;">是否展示弹幕，只在初始化时有效，不能动态变更</td> 
 <td style="width:180px;">&nbsp;</td> 
 </tr> 
 <tr> 
 <td>autoplay</td> 
 <td style="width:129px;">Boolean</td> 
 <td style="width:106px;">false</td> 
 <td style="width:232px;">是否自动播放</td> 
 <td style="width:180px;">&nbsp;</td> 
 </tr> 
 <tr> 
 <td>loop</td> 
 <td style="width:129px;">Boolean</td> 
 <td style="width:106px;">false</td> 
 <td style="width:232px;">是否循环播放</td> 
 <td style="width:180px;"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.4.0</a></td> 
 </tr> 
 <tr> 
 <td>muted</td> 
 <td style="width:129px;">Boolean</td> 
 <td style="width:106px;">false</td> 
 <td style="width:232px;">是否静音播放</td> 
 <td style="width:180px;"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.4.0</a></td> 
 </tr> 
 <tr> 
 <td>page-gesture</td> 
 <td style="width:129px;">Boolean</td> 
 <td style="width:106px;">false</td> 
 <td style="width:232px;">在非全屏模式下，是否开启亮度与音量调节手势</td> 
 <td style="width:180px;"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.6.0</a></td> 
 </tr> 
 <tr> 
 <td>direction</td> 
 <td style="width:129px;">Number</td> 
 <td style="width:106px;">&nbsp;</td> 
 <td style="width:232px;">设置全屏时视频的方向，不指定则根据宽高比自动判断。有效值为 0（正常竖向）, 90（屏幕逆时针90度）, -90（屏幕顺时针90度）</td> 
 <td style="width:180px;"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.7.0</a></td> 
 </tr> 
 <tr> 
 <td>show-progress</td> 
 <td style="width:129px;">Boolean</td> 
 <td style="width:106px;">true</td> 
 <td style="width:232px;">若不设置，宽度大于240时才会显示</td> 
 <td style="width:180px;"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.9.0</a></td> 
 </tr> 
 <tr> 
 <td>show-fullscreen-btn</td> 
 <td style="width:129px;">Boolean</td> 
 <td style="width:106px;">true</td> 
 <td style="width:232px;">是否显示全屏按钮</td> 
 <td style="width:180px;"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.9.0</a></td> 
 </tr> 
 <tr> 
 <td>show-play-btn</td> 
 <td style="width:129px;">Boolean</td> 
 <td style="width:106px;">true</td> 
 <td style="width:232px;">是否显示视频底部控制栏的播放按钮</td> 
 <td style="width:180px;"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.9.0</a></td> 
 </tr> 
 <tr> 
 <td>show-center-play-btn</td> 
 <td style="width:129px;">Boolean</td> 
 <td style="width:106px;">true</td> 
 <td style="width:232px;">是否显示视频中间的播放按钮</td> 
 <td style="width:180px;"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.9.0</a></td> 
 </tr> 
 <tr> 
 <td>enable-progress-gesture</td> 
 <td style="width:129px;">Boolean</td> 
 <td style="width:106px;">true</td> 
 <td style="width:232px;">是否开启控制进度的手势</td> 
 <td style="width:180px;"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.9.0</a></td> 
 </tr> 
 <tr> 
 <td>objectFit</td> 
 <td style="width:129px;">String</td> 
 <td style="width:106px;">contain</td> 
 <td style="width:232px;">当视频大小与 video 容器大小不一致时，视频的表现形式。contain：包含，fill：填充，cover：覆盖</td> 
 <td style="width:180px;">&nbsp;</td> 
 </tr> 
 <tr> 
 <td>poster</td> 
 <td style="width:129px;">String</td> 
 <td style="width:106px;">&nbsp;</td> 
 <td style="width:232px;">视频封面的图片网络资源地址或云文件ID（2.2.3起支持）如果 controls 属性值为 false 则设置 poster 无效</td> 
 <td style="width:180px;">&nbsp;</td> 
 </tr> 
 <tr> 
 <td>bindplay</td> 
 <td style="width:129px;">EventHandle</td> 
 <td style="width:106px;">&nbsp;</td> 
 <td style="width:232px;">当开始/继续播放时触发play事件</td> 
 <td style="width:180px;">&nbsp;</td> 
 </tr> 
 <tr> 
 <td>bindpause</td> 
 <td style="width:129px;">EventHandle</td> 
 <td style="width:106px;">&nbsp;</td> 
 <td style="width:232px;">当暂停播放时触发 pause 事件</td> 
 <td style="width:180px;">&nbsp;</td> 
 </tr> 
 <tr> 
 <td>bindended</td> 
 <td style="width:129px;">EventHandle</td> 
 <td style="width:106px;">&nbsp;</td> 
 <td style="width:232px;">当播放到末尾时触发 ended 事件</td> 
 <td style="width:180px;">&nbsp;</td> 
 </tr> 
 <tr> 
 <td>bindtimeupdate</td> 
 <td style="width:129px;">EventHandle</td> 
 <td style="width:106px;">&nbsp;</td> 
 <td style="width:232px;">播放进度变化时触发，event.detail = {currentTime, duration} 。触发频率 250ms 一次</td> 
 <td style="width:180px;">&nbsp;</td> 
 </tr> 
 <tr> 
 <td>bindfullscreenchange</td> 
 <td style="width:129px;">EventHandle</td> 
 <td style="width:106px;">&nbsp;</td> 
 <td style="width:232px;">视频进入和退出全屏时触发，event.detail = {fullScreen, direction}，direction取为 vertical 或 horizontal</td> 
 <td style="width:180px;"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.4.0</a></td> 
 </tr> 
 <tr> 
 <td>bindwaiting</td> 
 <td style="width:129px;">EventHandle</td> 
 <td style="width:106px;">&nbsp;</td> 
 <td style="width:232px;">视频出现缓冲时触发</td> 
 <td style="width:180px;"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.7.0</a></td> 
 </tr> 
 <tr> 
 <td>binderror</td> 
 <td style="width:129px;">EventHandle</td> 
 <td style="width:106px;">&nbsp;</td> 
 <td style="width:232px;">视频播放出错时触发</td> 
 <td style="width:180px;"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.7.0</a></td> 
 </tr> 
 </tbody> 
</table>

于是得到布局代码：

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> &lt;!--pages/videoPlayer.wxml--&gt; &lt;view class="section"&gt; &lt;video src="{ {videoItemSrc}}" controls &gt;&lt;/video&gt; &lt;/view&gt; &lt;view class='section course-series'&gt; &lt;text&gt;{ {course_series}}&lt;/text&gt; &lt;/view&gt; &lt;view class='bound-section'&gt;&lt;/view&gt; &lt;view class='section'&gt; &lt;block wx:for="{ {videoSeries}}" wx:key="*this"&gt; &lt;label class='course-video-item' id="{ {index}}" bindtap='videoChooseClick'&gt; &lt;text&gt;第{ {item.episode}}集&lt;/text&gt; &lt;text class='video-item-name'&gt;{ {item.name}}&lt;/text&gt; &lt;view class='video-item-duration'&gt; { {item.duration}} &lt;/view&gt; &lt;view class='bound-line'&gt;&lt;/view&gt; &lt;/label&gt; &lt;/block&gt; &lt;/view&gt; </td> 
 </tr> 
 </tbody> 
</table>

样式代码：

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> /* 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; } </td> 
 </tr> 
 </tbody> 
</table>

效果：

![70 2][]

### 2、后台代码 ###

（1）在main页面请求服务器获得视频信息

（2）格式化数据

（3）首页轮播图加载视频缩略图url

（4）点击对应轮播图把对应url所属的视频信息传给视频播放页面

（5）视频播放页面解析传过来的数据加载课程名称和集数信息

（6）点击集数列表的item时把当前集的url传给video组件即可播放

首页代码：

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> 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&lt;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 =&gt; { var imgUrls = new Array(); for (var i = 0; i &lt; res.length; i++) { if (res[i].thumbnail != null &amp;&amp; imgUrls.indexOf(res[i].series) == -1) imgUrls[i] = res[i]; } wx.hideToast(); that.setData({ videoData: res, videoImgUrls: imgUrls }); }); } </td> 
 </tr> 
 </tbody> 
</table>

注意，现在引入Bmob服务器的sdk，要在app.js中初始化：

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> Bmob.initialize("xxx", "xxx"); </td> 
 </tr> 
 </tbody> 
</table>

详情请查看bmob官方网站[https://www.bmob.cn/][https_www.bmob.cn]。

vedioPlayer.js代码：

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> // pages/vedioPlayer.js var Bmob = require("../../utils/Bmob-1.6.3.min.js"); var that; &nbsp; 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}); } }) </td> 
 </tr> 
 </tbody> 
</table>

下篇将介绍签到的逻辑及代码实现。

[70]: /images/20220513/6ab11c7d95b64b34928658b5ffa43953.png
[70 1]: /images/20220513/c2c2ea63e8d94a9696dc5d41bef548a9.png
[70 2]: /images/20220513/d76abc9ea6064842a4057b9f9bfe6dbf.png
[https_www.bmob.cn]: https://www.bmob.cn/