教辅小程序之微课页面Demo
1.近做毕设的微信小程序,下面是我的微课页面的Demo效果图。
2.所用代码
wxml代码:
<view class="lesson0">第二章 线性表</view>
<view class="lesson">第二章第一节 线性表的逻辑结构
</view>
<view>
<video style="width: 100%;height=400px;margin:1px;"
src="填你的视频下载地址" binderror="videoErrorCallback"
title="第二章第一节 线性表的逻辑结构" show-center-play-btn="true"controls >
</video>
</view>
wxss代码:
/* pages/lesson/lesson.wxss */
.lesson_box{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.video_container{
height: 100%;
width: 110%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20rpx 0;
}
.lesson{
font-family:SimHei;
margin: 20rpx 30rpx 15rpx ;
}
.lesson0{
font-family:SimHei;
margin: 20rpx 30rpx 15rpx ;
text-align: center;
color: #4CCCCF;
}
注
我的视频地址是在微信云开发储存里,下载地址复制尽量就行。