分享、交流、傳播
- 首頁
- 網(wǎng)站建設
輕松建站 服務到位為客戶提供一體化網(wǎng)站設計服務
- 小程序開發(fā)
小程序開發(fā)全功能小程序商城、開發(fā)定制服務、全程售后服務、無憂備案
- 產(chǎn)品與服務
- 資訊
- 關于我們
輕松建站 服務到位為客戶提供一體化網(wǎng)站設計服務
小程序開發(fā)全功能小程序商城、開發(fā)定制服務、全程售后服務、無憂備案
短視頻和直播是當下商品宣傳的最火方案。
而一款電商微信小程序短視頻和直播基本是必不可少的功能。
直播對普通商家來說要求還是挺高的，如請個網(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)試，如有時候一個局部功能的兼容都需要幾天去處理。
