三级全黄做爰电影_夫妻之间那些事_啊啊啊啊好爽视频_国产精品xxxx喷水欧美_色一情一乱一伦麻豆_国产精品美乳一区二区免费_亚洲综合av在线在线播放_人与禽伦性了_黄色软件色多多_av在线免费观看网址

短視頻和直播是當下商品宣傳的最火方案。

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

直播對普通商家來說要求還是挺高的，如請個網(wǎng)紅來直播，費用不低，普通人上陣沒經(jīng)過專業(yè)的培訓，有可能弄巧成拙。

而且直播的技巧要求也是挺高的，但是短視頻就不一樣了，門檻極低，就算是沒學過專業(yè)的IT技術，也能用成熟的平臺錄個效果不錯的短視頻出來。

所以在開發(fā)金馬電商V5微信小程序時，短視頻功能也就安排上了。

功能開發(fā)分后端和微信小程序端，后端這里就不寫了，基本界面是如下截圖：

主要相關字段為：視頻標題，視頻欄目，視頻介紹，視頻封面，視頻上傳路徑，關聯(lián)商品。

后端的開發(fā)周期為7個工作日。

然后到微信小程序端

列表頁界面設計效果：

只上傳了一個視頻，所以看起來比較空白。

再到播放頁，這個開發(fā)時比較占時間，效果如下圖：

界面看起來也不復雜，但如果每個細節(jié)都要完善好，還是需要不少時間的。

在開發(fā)視頻功能時，有些注意的地方記錄一下：

一個是視頻的全屏效果，寬是比較簡單的，直接用100%即可，高度的話因為手機型號實在太多了，所以要經(jīng)驗過處理。方法應該很多，我這里是采用JS控制高度,具體方法看上篇vodeo組件的文章，點擊查看。

然后右邊的分享、收藏、更多功能按鈕做樣式時注意的地方是，字體用白色，會不太友好，因為視頻如果是白背景的話，這樣就基本看不清這些按鈕了，所以我們要用添加陰影的方式去寫兼容。

關于WXSS陰影部分的知識，我就引用別人的文章了，內(nèi)容如下：

盒子陰影

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

h-shadow 必需的。水平陰影的位置。允許負值

v-shadow 必需的。垂直陰影的位置。允許負值

blur 可選。模糊距離

spread 可選。陰影的大小

color 可選。陰影的顏色。在CSS顏色值尋找顏色值的完整列表

inset 可選。從外層的陰影（開始時）改變陰影內(nèi)側(cè)陰影

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;

}

效果圖：

以上是關于盒子陰影和文字陰影的介紹，這次開發(fā)是采用文字陰影的技術，把WXSS代碼部分貼出：

.share-icon{

  color: #FFF;

  text-align: center;

  font-size: 48rpx;

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

  height: 50rpx;

  line-height: 100%;

}

然后關于收藏小圖標的變色是需要直接用變量寫入wxml中通過JS控制才可以實現(xiàn)收藏功能的切換。

wxml代碼:

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

其中sccolor在JS文件中實現(xiàn)控制是收藏后是紅色小圖標，沒收藏是白色小圖標，JS代碼也比較簡單

js主要代碼：

var sccolor="#FFFFFF";

//默認是顯示白色

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

//如果服務器返回已經(jīng)收藏了，就顯示紅色。

好了，視頻功能的文章就寫到這里，做微信小程序開發(fā)的，技術文檔是挺完整的，不是什么難事，但是細節(jié)處理卻是需要非常多的精力去調(diào)試，如有時候一個局部功能的兼容都需要幾天去處理。