輕松建站 服務(wù)到位為客戶(hù)提供一體化網(wǎng)站設(shè)計(jì)服務(wù)
小程序開(kāi)發(fā)全功能小程序商城、開(kāi)發(fā)定制服務(wù)、全程售后服務(wù)、無(wú)憂(yōu)備案
分享、交流、傳播知識(shí)分享、技術(shù)交流、經(jīng)驗(yàn)積累、提升能力
短視頻和直播是當(dāng)下商品宣傳的最火方案。
而一款電商微信小程序短視頻和直播基本是必不可少的功能。
直播對(duì)普通商家來(lái)說(shuō)要求還是挺高的，如請(qǐng)個(gè)網(wǎng)紅來(lái)直播，費(fèi)用不低，普通人上陣沒(méi)經(jīng)過(guò)專(zhuān)業(yè)的培訓(xùn)，有可能弄巧成拙。
而且直播的技巧要求也是挺高的，但是短視頻就不一樣了，門(mén)檻極低，就算是沒(méi)學(xué)過(guò)專(zhuān)業(yè)的IT技術(shù)，也能用成熟的平臺(tái)錄個(gè)效果不錯(cuò)的短視頻出來(lái)。
所以在開(kāi)發(fā)金馬電商V5微信小程序時(shí)，短視頻功能也就安排上了。
功能開(kāi)發(fā)分后端和微信小程序端，后端這里就不寫(xiě)了，基本界面是如下截圖：
主要相關(guān)字段為：視頻標(biāo)題，視頻欄目，視頻介紹，視頻封面，視頻上傳路徑，關(guān)聯(lián)商品。
后端的開(kāi)發(fā)周期為7個(gè)工作日。
然后到微信小程序端
列表頁(yè)界面設(shè)計(jì)效果：
只上傳了一個(gè)視頻，所以看起來(lái)比較空白。
再到播放頁(yè)，這個(gè)開(kāi)發(fā)時(shí)比較占時(shí)間，效果如下圖：
界面看起來(lái)也不復(fù)雜，但如果每個(gè)細(xì)節(jié)都要完善好，還是需要不少時(shí)間的。
在開(kāi)發(fā)視頻功能時(shí)，有些注意的地方記錄一下：
一個(gè)是視頻的全屏效果，寬是比較簡(jiǎn)單的，直接用100%即可，高度的話(huà)因?yàn)槭謾C(jī)型號(hào)實(shí)在太多了，所以要經(jīng)驗(yàn)過(guò)處理。方法應(yīng)該很多，我這里是采用JS控制高度,具體方法看上篇vodeo組件的文章，點(diǎn)擊查看。
然后右邊的分享、收藏、更多功能按鈕做樣式時(shí)注意的地方是，字體用白色，會(huì)不太友好，因?yàn)橐曨l如果是白背景的話(huà)，這樣就基本看不清這些按鈕了，所以我們要用添加陰影的方式去寫(xiě)兼容。
關(guān)于WXSS陰影部分的知識(shí)，我就引用別人的文章了，內(nèi)容如下：
盒子陰影
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 必需的。水平陰影的位置。允許負(fù)值
v-shadow 必需的。垂直陰影的位置。允許負(fù)值
blur 可選。模糊距離
spread 可選。陰影的大小
color 可選。陰影的顏色。在CSS顏色值尋找顏色值的完整列表
inset 可選。從外層的陰影（開(kāi)始時(shí)）改變陰影內(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 陰影顏色
多個(gè)陰影用逗號(hào)隔開(kāi)
wxml代碼:
wxss代碼:
.shadow{
font-size:100rpx;
text-shadow: 10px 10px 10px #ff0000;
}
效果圖：
以上是關(guān)于盒子陰影和文字陰影的介紹，這次開(kāi)發(fā)是采用文字陰影的技術(shù)，把WXSS代碼部分貼出：
.share-icon{
color: #FFF;
text-align: center;
font-size: 48rpx;
text-shadow: 2rpx 2rpx 2rpx #000;
height: 50rpx;
line-height: 100%;
}
然后關(guān)于收藏小圖標(biāo)的變色是需要直接用變量寫(xiě)入wxml中通過(guò)JS控制才可以實(shí)現(xiàn)收藏功能的切換。
wxml代碼:
<view class="iconfont iconshoucang1 share-icon" style="color: {{sccolor}};"></view>
其中sccolor在JS文件中實(shí)現(xiàn)控制是收藏后是紅色小圖標(biāo)，沒(méi)收藏是白色小圖標(biāo)，JS代碼也比較簡(jiǎn)單
js主要代碼：
var sccolor="#FFFFFF";
//默認(rèn)是顯示白色
if(res.data['vod']['sczt']==1) sccolor="#EA3855";
//如果服務(wù)器返回已經(jīng)收藏了，就顯示紅色。
好了，視頻功能的文章就寫(xiě)到這里，做微信小程序開(kāi)發(fā)的，技術(shù)文檔是挺完整的，不是什么難事，但是細(xì)節(jié)處理卻是需要非常多的精力去調(diào)試，如有時(shí)候一個(gè)局部功能的兼容都需要幾天去處理。
