短视频和直播是当下商品宣传的最火方案。

而一款电商微信小程序短视频和直播基本是必不可少的功能。

直播对普通商家来说要求还是挺高的，如请个网红来直播，费用不低，普通人上阵没经过专业的培训，有可能弄巧成拙。

而且直播的技巧要求也是挺高的，但是短视频就不一样了，门槛极低，就算是没学过专业的IT技术，也能用成熟的平台录个效果不错的短视频出来。

所以在开发金马电商V5微信小程序时，短视频功能也就安排上了。

功能开发分后端和微信小程序端，后端这里就不写了，基本界面是如下截图：

主要相关字段为：视频标题，视频栏目，视频介绍，视频封面，视频上传路径，关联商品。

后端的开发周期为7个工作日。

然后到微信小程序端

列表页界面设计效果：

只上传了一个视频，所以看起来比较空白。

再到播放页，这个开发时比较占时间，效果如下图：

界面看起来也不复杂，但如果每个细节都要完善好，还是需要不少时间的。

在开发视频功能时，有些注意的地方记录一下：

一个是视频的全屏效果，宽是比较简单的，直接用100%即可，高度的话因为手机型号实在太多了，所以要经验过处理。方法应该很多，我这里是采用JS控制高度,具体方法看上篇vodeo组件的文章，点击查看。

然后右边的分享、收藏、更多功能按钮做样式时注意的地方是，字体用白色，会不太友好，因为视频如果是白背景的话，这样就基本看不清这些按钮了，所以我们要用添加阴影的方式去写兼容。

关于WXSS阴影部分的知识，我就引用别人的文章了，内容如下：

盒子阴影

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow 必需的。水平阴影的位置。允许负值

v-shadow 必需的。垂直阴影的位置。允许负值

blur 可选。模糊距离

spread 可选。阴影的大小

color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表

inset 可选。从外层的阴影（开始时）改变阴影内侧阴影

wxml代码:

wxss代码:

.shadow{

  width:200rpx;

  height:200rpx;

  background-color: #000000;

  box-shadow: 40px 80px 20px 30px #00FF00;

}

效果图：

文字阴影

text-shadow:hpx vhpx rpx color

hpx 水平偏移

vpx 垂直偏移

rpx 模糊度

color 阴影颜色

多个阴影用逗号隔开

wxml代码:

wxss代码:

.shadow{

  font-size:100rpx;

  text-shadow: 10px 10px 10px #ff0000;

}

效果图：

以上是关于盒子阴影和文字阴影的介绍，这次开发是采用文字阴影的技术，把WXSS代码部分贴出：

.share-icon{

  color: #FFF;

  text-align: center;

  font-size: 48rpx;

  text-shadow: 2rpx 2rpx 2rpx #000;

  height: 50rpx;

  line-height: 100%;

}

然后关于收藏小图标的变色是需要直接用变量写入wxml中通过JS控制才可以实现收藏功能的切换。

wxml代码:

<view class="iconfont iconshoucang1 share-icon" style="color: {{sccolor}};"></view>

其中sccolor在JS文件中实现控制是收藏后是红色小图标，没收藏是白色小图标，JS代码也比较简单

js主要代码：

var sccolor="#FFFFFF";

//默认是显示白色

if(res.data['vod']['sczt']==1) sccolor="#EA3855";

//如果服务器返回已经收藏了，就显示红色。

好了，视频功能的文章就写到这里，做微信小程序开发的，技术文档是挺完整的，不是什么难事，但是细节处理却是需要非常多的精力去调试，如有时候一个局部功能的兼容都需要几天去处理。