目錄：
js業務邏輯層
視圖渲染層
css屬性設定
效果圖
微信小程式展示
内網穿透工具下載下傳
我們在搭建一個小程式或者網站的時候,往往要加載很多的圖檔,音頻和視訊檔案.如果都從伺服器擷取靜态資源,這樣會加大對伺服器的負載.使得伺服器的運作速度緩慢.這時我們适用nginx反向服務代理來加載這些靜态資源,這樣可以實作負載均衡,為伺服器減壓.本文基于鴻蒙多媒體元件和微信小程式的多媒體元件都使用nginx反向代理.(nginx相關檔案見附件)
js業務邏輯層:
export default {
data: {
currentIndex:0,
title:"",
cpath:"http://*****************************",
path:"http://********************************",
videopath:[
"/video/aa.mp4",
"/video/bb.mp4",
"/video/cc.mp4",
"/video/dd.mp4",
]
},
clickmenu(index){
this.title="第"+index+"集";
this.path=this.cpath+this.videopath[index];
this.currentIndex=index;
},
}
視圖渲染層:
<div class="container">
<div class="topview">
<video class="videoview1" controls="true" autoplay="true" src="{{path}}">
</video>
</div>
<tabs class="tabs" vertical="false" index="0">
<tab-bar class="tab-bar" mode="scrollable">
<block for="{{videopath}}">
<text class="{{$idx==currentIndex?'on':'off'}}" onclick="clickmenu({{$idx}}">第{{$idx+1}}集</text>
</block>
</tab-bar>
<!-- <tab-content class="tab-content" scrollable="true">
<block for="videopath">
</block>
</tab-content>-->
</tabs>
<div class="jianjie">
<text>{{title}}</text>
</div>
</div>
css屬性設定:
.container {
width: 100%;
height: 1200px;
display: flex;
flex-direction: column;
}
.topview{
width: 100%;
height: 30%;
border:1px solid red;
}
.videoview1{
width: 100%;
height: 100%;
}
.tabs{
height: 20%;
width: 100%;
/**border: 1px solid blue;**/
}
.boxmenu{
width: 33%;
height: 100%;
border: 4px solid red;
display: flex;
justify-content: center;
align-items: center;
}
.txt1{
font-weight: bold;
text-align: center;
}
.on{
color: black;
}
.off{
color: grey;
}
.tab-content{
width: 100%;
height: 50%;
background-color: skyblue;
}
.jianjie{
width: 100%;
height: 50%;
background-color: skyblue;
}
效果圖如下
微信小程式展示如下:
js業務邏輯層:
// pages/video/video.js
Page({
//設計思路:1.nginx伺服器搭建
//2.小程式本地模拟播放
//3.内網穿透
//4.真機調試
/**
* 頁面的初始資料
*/
data: {
link:"http://wangliao.free.idcfengye.com",
videopath:[
"/video/aa.mp4",
"/video/bb.mp4",
"/video/cc.mp4",
"/video/dd.mp4"],
defaultpath:""
},
clickplay(event){
let cindex=event.currentTarget.dataset.menuindex;
console.log("下标為:"+cindex);
let path=this.data.link+this.data.videopath[cindex];
this.setData({defaultpath:path})
},
/**
* 生命周期函數--監聽頁面加載
*/
onLoad: function (options) {
let path=this.data.link+this.data.videopath[0];
this.setData({defaultpath:path})
},
/**
* 生命周期函數--監聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函數--監聽頁面顯示
*/
onShow: function () {
},
/**
* 生命周期函數--監聽頁面隐藏
*/
onHide: function () {
},
/**
* 生命周期函數--監聽頁面解除安裝
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函數--監聽使用者下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {
},
/**
* 使用者點選右上角分享
*/
onShareAppMessage: function () {
}
}) 視圖渲染層:
<!--pages/video/video.wxml-->
<view class="pageview">
<view class="topview">
<!--src放的是要播放視訊的資源位址 controls預設播放控件 poster放置的是視訊封面-->
<video class="videoview" controls="controls" src="{{defaultpath}}" poster="{{}}" autoplay="true">
</video>
</view>
<view class="scollview">
<scroll-view scroll-x="true" class="scroll-view">
<block wx:for="{{videopath}}">
<view class="boxmenu" bindtap="clickplay" data-menuindex="{{index}}">
<view class="t1">
第{{index+1}}集
</view>
</view>
</block>
</scroll-view>
</view>
</view>
wxss屬性設定:
/* pages/video/video.wxss */
.pageview{
width: 100%;
height: 100vh;
}
.topview{
width: 100%;
height: 26%;
}
.videoview{
width: 100%;
height: 100%;
}
.scollview{
width: 100%;
height: 8%;
border: 1px solid red;
white-space: nowrap;
}
.scroll-view {
width: 100%;
height: 100%;
display:flex ;
justify-content: center;
align-items: center;
}
.boxmenu{
width: 60%;
height: 70%;
border:1px solid blue;
display: inline-block;
margin: 6px ;
}
.t1{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items:center;
} 
内網穿透工具下載下傳
作者：noutsider
想了解更多内容，請通路： 51CTO和華為官方戰略合作共建的鴻蒙技術社群https://harmonyos.51cto.com