小程序短視頻項目———視頻詳情頁面開發（一）

時間  2019-11-21
標籤 程序 視頻 項目 詳情 頁面 開發 简体版
原文   原文鏈接

1、視頻組件與api介紹css

video

視頻。該組件是原生組件，使用時請注意相關限制。html

屬性名 類型 默認值 說明 最低版本
src String   要播放視頻的資源地址，支持雲文件ID（2.2.3起）  
initial-time Number   指定視頻初始播放位置 1.6.0
duration Number   指定視頻時長 1.1.0
controls Boolean true 是否顯示默認播放控件（播放/暫停按鈕、播放進度、時間）  
danmu-list Object Array   彈幕列表  
danmu-btn Boolean false 是否顯示彈幕按鈕，只在初始化時有效，不能動態變動  
enable-danmu Boolean false 是否展現彈幕，只在初始化時有效，不能動態變動  
autoplay Boolean false 是否自動播放  
loop Boolean false 是否循環播放 1.4.0
muted Boolean false 是否靜音播放 1.4.0
page-gesture Boolean false 在非全屏模式下，是否開啓亮度與音量調節手勢 1.6.0
direction Number   設置全屏時視頻的方向，不指定則根據寬高比自動判斷。有效值爲 0（正常豎向）, 90（屏幕逆時針90度）, -90（屏幕順時針90度） 1.7.0
show-progress Boolean true 若不設置，寬度大於240時纔會顯示 1.9.0
show-fullscreen-btn Boolean true 是否顯示全屏按鈕 1.9.0
show-play-btn Boolean true 是否顯示視頻底部控制欄的播放按鈕 1.9.0
show-center-play-btn Boolean true 是否顯示視頻中間的播放按鈕 1.9.0
enable-progress-gesture Boolean true 是否開啓控制進度的手勢 1.9.0
objectFit String contain 當視頻大小與 video 容器大小不一致時，視頻的表現形式。contain：包含，fill：填充，cover：覆蓋  
poster String   視頻封面的圖片網絡資源地址或雲文件ID（2.2.3起支持）若是 controls 屬性值爲 false 則設置 poster 無效  
bindplay EventHandle   當開始/繼續播放時觸發play事件  
bindpause EventHandle   當暫停播放時觸發 pause 事件  
bindended EventHandle   當播放到末尾時觸發 ended 事件  
bindtimeupdate EventHandle   播放進度變化時觸發，event.detail = {currentTime, duration} 。觸發頻率 250ms 一次  
bindfullscreenchange EventHandle   視頻進入和退出全屏時觸發，event.detail = {fullScreen, direction}，direction取爲 vertical 或 horizontal 1.4.0
bindwaiting EventHandle   視頻出現緩衝時觸發 1.7.0
binderror EventHandle   視頻播放出錯時觸發 1.7.0

<video /> 默認寬度300px、高度225px，可經過wxss設置寬高。java

 

 

2、視頻展現頁開發1-視頻展現頁面git

<view style='width:100%;height:100%;'>

<video src="http://hdz.natapp1.cc/18100179DXRC6ZXP/video/d7349f63-7d2b-46b8-8742-ca02752ec24a.mp4"
muted="{{true}}"
controls="{{false}}"
autoplay="{{true}}"
loap="{{true}}"
enable-progress-gesture="{{false}}"
style='width:100%;height:100%;'
objectFit='{{cover}}'
> </video>
</view>
const app = getApp()

Page({
  data: {
    cover: "cover"

  }
})

 

3、視頻展現頁開發1-圖標放置github

cover-view

基礎庫 1.4.0 開始支持，低版本需作兼容處理。spring

覆蓋在原生組件之上的文本視圖，可覆蓋的原生組件包括map、video、canvas、camera、live-player、live-pusher，只支持嵌套cover-view、cover-image，可在cover-view中使用button。canvas

屬性名 類型 默認值 說明 最低版本
scroll-top Number   設置頂部滾動偏移量，僅在設置了 overflow-y: scroll 成爲滾動元素後生效 2.1.0

cover-image

基礎庫 1.4.0 開始支持，低版本需作兼容處理。小程序

覆蓋在原生組件之上的圖片視圖，可覆蓋的原生組件同cover-view，支持嵌套在cover-view裏。後端

屬性名 類型 默認值 說明 最低版本
src String   圖標路徑，支持臨時路徑、網絡地址（1.6.0起支持）、雲文件ID（2.2.3起支持）。暫不支持base64格式。  
bindload EventHandle   圖片加載成功時觸發 2.1.0
binderror EventHandle   圖片加載失敗時觸發 2.1.0
Bug & Tips
  1. tip: 基礎庫 2.2.4 起支持 touch 相關事件，也可以使用 hover-class 設置點擊態
  2. tip: 基礎庫 2.1.0 起支持設置 scale rotate 的 css 樣式，包括 transition 動畫
  3. tip: 基礎庫 1.9.90 起 cover-view 支持 overflow: scroll，但不支持動態更新 overflow
  4. tip: 基礎庫 1.9.90 起最外層 cover-view 支持 position: fixed
  5. tip: 基礎庫 1.9.0 起支持插在 view 等標籤下。在此以前只可嵌套在原生組件map、video、canvas、camera內，避免嵌套在其餘組件內。
  6. tip: 基礎庫 1.6.0 起支持css transition動畫，transition-property只支持transform (translateX, translateY)與opacity。
  7. tip: 基礎庫 1.6.0 起支持css opacity。
  8. tip: 事件模型遵循冒泡模型，但不會冒泡到原生組件。
  9. tip: 文本建議都套上cover-view標籤，避免排版錯誤。
  10. tip: 只支持基本的定位、佈局、文本樣式。不支持設置單邊的border、background-image、shadow、overflow: visible等。
  11. tip: 建議子節點不要溢出父節點
  12. tip: 默認設置的樣式有：white-space: nowrap; line-height: 1.2; display: block;
  13. bug: 自定義組件嵌套 cover-view 時，自定義組件的 slot 及其父節點暫不支持經過 wx:if 控制顯隱，不然會致使 cover-view 不顯示

<view style='width:100%;height:100%;'>

<video src="http://hdz.natapp1.cc/18100179DXRC6ZXP/video/d7349f63-7d2b-46b8-8742-ca02752ec24a.mp4"
muted="{{true}}"
controls="{{false}}"
autoplay="{{true}}"
loap="{{true}}"
enable-progress-gesture="{{false}}"
style='width:100%;height:100%;'
objectFit='{{cover}}'
>

<cover-view class='container'>
            <!-- 上傳視頻 -->

            <cover-image src='../resource/images/camera.png' style='width:50rpx;height:50rpx;' bindtap='upload'></cover-image>


            <!-- 搜索按鈕 -->
            <cover-image src='../resource/images/search.png' style='width:45rpx;height:45rpx;' bindtap='showSearch'></cover-image>

        </cover-view>


<cover-view class='container-me'>
            <!-- 頭像 -->
            <cover-image class="face" src='{{serverUrl}}{{publisher.faceImage}}' bindtap='showPublisher'></cover-image>


            <!-- 喜歡收藏按鈕 -->
            <block wx:if="{{userLikeVideo}}">
                <cover-image class="size-me" src='../resource/images/like.png' style='margin-top:30rpx;' bindtap='likeVideoOrNot'></cover-image>
            </block>
            <block wx:else>
                <cover-image class="size-me" src='../resource/images/unlike.png' style='margin-top:30rpx;' bindtap='likeVideoOrNot'></cover-image>
            </block>


            <!-- 評論按鈕 -->
            <cover-image class="size-me" src='../resource/images/comments.png' style='margin-top:30rpx;' bindtap='leaveComment'></cover-image>

            <!-- 分享按鈕 -->
            <cover-image class="size-me" src='../resource/images/share.png' style='margin-top:30rpx;' bindtap='shareMe'></cover-image>

        </cover-view>

      <cover-view class='container-words'>

            <cover-view>@{{publisher.nickname}}</cover-view>

            <cover-view class='video-desc'>{{videoInfo.videoDesc}}</cover-view>



        </cover-view>

        <cover-view class='container-bottom'>
            <!-- 首頁按鈕 -->
            <cover-image class='' src='../resource/images/index.png' class="size-bottom" bindtap='showIndex'></cover-image>

          

            <!-- 個人按鈕 -->
            <cover-image class='' src='../resource/images/mine.png' class="size-bottom" bindtap='showMine'></cover-image>

        </cover-view>

 </video>
</view>

 

page {
    height: 100%;
    background-color: #141414;
}

.container {
    display: flex;
    margin-top: 20rpx;
    margin-left: 50rpx;
    margin-right: 50rpx;
    justify-content: space-between;
}

.container-me {
    margin-top: 360rpx;
    margin-left: 50rpx;
    width: 80rpx;
}

.container-words {
    /* display: flex;
    flex-direction: column; */
    margin-top: 60rpx;
    margin-left: 50rpx;
    width: 100%;
    color: white;
    font-size: 14px;
}

.inputText {
    background-color: gainsboro;
    height: 35px;
}

.video-desc {
    width: 600rpx;
    height: 100rpx;
    white-space: pre-wrap;
}

.container-bottom {
    /* bottom: 10px;  */
    display: flex;
    margin-top: 60rpx;
    margin-left: 50rpx;
    margin-right: 50rpx;
    /* margin-bottom: 10rpx; */
    justify-content: space-between;
    /* position: fixed;  */
}

.size-me {
    width: 70rpx;
    height: 70rpx;
}

.size-me-bgm {
    width: 40rpx;
    height: 40rpx;
}

.bgm-style {
    display: flex;
    flex-direction: row;
}

.size-bottom {
    width: 60rpx;
    height: 60rpx;
}

.face2 {
    width: 75rpx;
    height: 75rpx;
    border: 0 solid #f00;
    border-radius: 100rpx;
    background-color: #f10b2e;
}

.face {
    width: 75rpx;
    height: 75rpx;
    /* margin: 20rpx; */
    border-radius: 50%;
}

.icoBtn {
    flex: 1;
    width: 80rpx;
    height: 100%;
}


.comments-scoll {
    height: 1200rpx;
}


.comments-all {
    /* margin-top: 10px; */
      margin-bottom: 10px;  
      /* border-bottom: solid 1px gray;   */
    background-color: #141414;
    color: #e8e8e8;
}

.face-comments {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    margin-left: 5px;
}

.container-comments{
    display: flex;
    
    /* margin-top: 20rpx;
    margin-left: 50rpx;
    margin-right: 50rpx;
    justify-content: space-between; */
    
}


.nickname-comments {
    margin-left: 10px;
}

.nickname-lbl{
    color: #a1a1a1;
}

.date-lbl{
    color: #a1a1a1;
}

.comments-content{
    margin-left: 5px;
    margin-right: 5px;
    /* margin-bottom: 10px; */
    border-bottom: solid 1px #232323;
    background-color: #141414;
}

.saySthView {
    padding: 10px;
    background-color: #141414;
    line-height: 45px;
    border-bottom: solid 1px #232323;
    color: white;
}

.saySth {
    margin-top: 10px;
    margin-left: 10px;
    font-size: 18px;
}

 

4、開源搜索視頻組件的使用api

一、地址：https://github.com/mindawei/wsSearchView

二、使用簡介

QuickStart

  1. 拷貝項目根目錄的wxSearchView文件夾到你項目的根目錄下（也能夠其它位置）。
  2. 在你的wxss文件裏導入組件的樣式（文件位置爲相對位置）：
@import "../../wxSearchView/wxSearchView.wxss";

 

  1. 在你的wxml文件裏導入組件（文件位置爲相對位置）：
<include src="../../wxSearchView/wxSearchView.wxml" />

 

  1. 在你的js文件裏面添加如下代碼,主要包括如下5個部分：
  • 導入js文件
  • 搜索欄初始化
  • 轉發函數
  • 搜索回調函數
  • 返回回調函數
// 1 導入js文件
var WxSearch = require('../../wxSearchView/wxSearchView.js');

Page({

  data: {},

  
  onLoad: function () {
  
    // 2 搜索欄初始化
    var that = this;
    WxSearch.init(
      that,  // 本頁面一個引用
      ['杭州', '嘉興', "海寧", "桐鄉", '寧波', '金華'], // 熱點搜索推薦，[]表示不使用
      ['湖北', '湖南', '北京', "南京"],// 搜索匹配，[]表示不使用
      that.mySearchFunction, // 提供一個搜索回調函數
      that.myGobackFunction //提供一個返回回調函數
    );
    
  },

  // 3 轉發函數，固定部分，直接拷貝便可
  wxSearchInput: WxSearch.wxSearchInput,  // 輸入變化時的操做
  wxSearchKeyTap: WxSearch.wxSearchKeyTap,  // 點擊提示或者關鍵字、歷史記錄時的操做
  wxSearchDeleteAll: WxSearch.wxSearchDeleteAll, // 刪除全部的歷史記錄
  wxSearchConfirm: WxSearch.wxSearchConfirm,  // 搜索函數
  wxSearchClear: WxSearch.wxSearchClear,  // 清空函數

  // 4 搜索回調函數  
  mySearchFunction: function (value) {
    // do your job here
    // 示例：跳轉
    wx.redirectTo({
      url: '../index/index?searchValue='+value
    })
  },

  // 5 返回回調函數
  myGobackFunction: function () {
    // do your job here
    // 示例：返回
    wx.redirectTo({
      url: '../index/index?searchValue=返回'  
    })
  }

})

 

說明

回調函數

爲了方便調用，提升開發效率，組件實際上只是提供了兩個回調接口，開發者也只須要提供這兩個函數，介紹以下：

  1. 搜索回調函數，下面是一個例子。當用戶點擊歷史記錄、搜索熱點、搜索提示、搜索按鈕時，都會回調開發者提供的函數接口，開發者拿到參數後能夠跳到另外一個頁面展現查詢結果。
  mySearchFunction: function (value) {
    // do your job here
  }

 

  1. 返回回調函數，下面是一個例子。搜索框邊上的按鈕有兩個角色，當輸入爲空的時候，是一個返回按鈕；當輸入不爲空時，是一個搜索按鈕。當點擊返回按鈕時，就會回調開發者提供的函數，這裏能夠跳回到指定頁面。
  myGobackFunction: function () {
    // do your job here
  }

 

頁面關係

爲了不輸入法遮擋的影響，該組件適合放在一個獨立的搜索頁面中。該搜索頁面與其餘頁面間的關係以下圖所示：

頁面關係

  1. 搜索入口：搜索頁面須要一個導入的入口，這個入口能夠是一個搜索框，也能夠是一些搜索按鈕。在本項目中，搜索入口頁面是index頁面，搜索入口是一個搜索框。
  2. 搜索頁面：搜索組件是放在搜索頁面中的，直接按照QuickStart中的描述導入便可。搜索頁面能夠經過返回回調函數跳轉到以前的頁面中去，能夠經過搜索回調函數跳轉到具體展現結果的頁面中去。在本項目中，搜索頁面是search頁面，開發者能夠進行參考或直接拷貝。
  3. 搜索結果：搜索結果頁面根據搜索頁面傳遞過來的參數展現搜索結果。本項目中，爲了簡單，將搜索入口和搜索結果統一成一個index頁面，開發者能夠參考index頁面中onLoad函數來查看參數如何獲取。

界面修改位置

爲了提升開發者的開發效率，下表列出了一些經常使用修改的位置。

界面效果        修改位置
標籤寬度       wxSearchView.wxss -> .wxSearchKeyItem -> flex
標籤背景色     wxSearchView.wxss -> .wxSearchKeyItem -> background-color
頁面背景色     wxSearchView.wxss -> .wxSearch -> background-color
提示面板背景色 wxSearchView.wxss -> .wxSearchInner -> background-color
返回按鈕不須要 wxSearchView.wxml -> 搜索 weui-search-bar__cancel-btn
搜索提示修改 wxSearchView.wxml -> 搜索 wxSearchMindKey
... ...

響應事件

本組件在設計的時候，實際只提供了兩個回調接口：搜索和返回。若是開發者須要響應一些其它事件，能夠參考組件js的導出接口，以下所示。

// 導出接口
module.exports = {
  init: init, //初始化函數
  wxSearchInput: wxSearchInput,// 輸入變化時的操做
  wxSearchKeyTap: wxSearchKeyTap, // 點擊提示或者關鍵字、歷史記錄時的操做
  wxSearchDeleteAll: wxSearchDeleteAll, // 刪除全部的歷史記錄
  wxSearchConfirm: wxSearchConfirm, // 搜索函數
  wxSearchClear: wxSearchClear,  // 清空函數
}

 

能夠看到的是，爲了減小開發者的開發量，這些事件在QuickStart中聲明成固定部分。若是開發者須要添加本身的事件，能夠修改那些固定的部分，提供本身的響應函數，並在本身的函數中調用WxSearch.wxSearchXXX函數，從而保證搜索框的正確效果。

 

三、在項目中正式使用

首先複製wxSearchView包到項目，與pages同級，

而後先在videoInfo.js頁面定義showSearch搜索事件。

接着按照步驟走下去

// 1 導入js文件
var WxSearch = require('../../wxSearchView/wxSearchView.js');


Page({
  data: {
    
  },


  onLoad: function () {

    // 2 搜索欄初始化
    var that = this;
    WxSearch.init(
      that,  // 本頁面一個引用
      ['慕課網', 'imooc', "java", "小程序", 'zookeeper', 'springboot'], // 熱點搜索推薦，[]表示不使用
      [],// 搜索匹配，[]表示不使用
      that.mySearchFunction, // 提供一個搜索回調函數
      that.myGobackFunction //提供一個返回回調函數
    );

  },


  // 3 轉發函數，固定部分，直接拷貝便可
  wxSearchInput: WxSearch.wxSearchInput,  // 輸入變化時的操做
  wxSearchKeyTap: WxSearch.wxSearchKeyTap,  // 點擊提示或者關鍵字、歷史記錄時的操做
  wxSearchDeleteAll: WxSearch.wxSearchDeleteAll, // 刪除全部的歷史記錄
  wxSearchConfirm: WxSearch.wxSearchConfirm,  // 搜索函數
  wxSearchClear: WxSearch.wxSearchClear,  // 清空函數

  // 4 搜索回調函數  
  mySearchFunction: function (value) {
    // do your job here
    // 示例：跳轉
    wx.redirectTo({
      url: '../index/index?searchValue=' + value
    })
  },

  // 5 返回回調函數
  myGobackFunction: function () {
    // do your job here
    // 示例：返回
    wx.redirectTo({
      url: '../index/index?searchValue=返回'
    })
  }

})

 

 

 

5、 修改全局用戶對象使用緩存

而後在相應的文件上修改。

 

6、查詢接口完善以及熱搜詞保存

 

 7、熱搜詞查詢接口開發

 

 

 

8、熱搜詞先後端聯調

 

onLoad: function () {

    // 2 搜索欄初始化
    var that = this;
    
    //查詢熱搜詞
    var serverUrl = app.serverUrl;
    wx.request({
      url: serverUrl + '/video/hot',
      method: "POST",
      success: function(res){
        console.log(res);
        var hotList = res.data.data;


        WxSearch.init(
          that,  // 本頁面一個引用
          hotList,
          // ['慕課網', 'imooc', "java", "小程序", 'zookeeper', 'springboot'], // 熱點搜索推薦，[]表示不使用
          hotList,// 搜索匹配，[]表示不使用
          that.mySearchFunction, // 提供一個搜索回調函數
          that.myGobackFunction //提供一個返回回調函數
        );

      }
    })

 

  },

 

9、搜索功能整合首頁列表聯調

 先定義搜索回調事件

會帶上參數跳轉到index.js上，

//index.js
//獲取應用實例
const app = getApp()

Page({
  data: {
    totalPage: 1,
    page: 1,
    videoList:[],
    screenWidth: 350,
    serverUrl: "",
    searchContent: ""
  },

  onLoad: function (params){
    var me = this;
    var screenWidth = wx.getSystemInfoSync().screenWidth;
    me.setData({
      screenWidth: screenWidth,
    });

    var searchContent = params.search; var isSaveRecord = params.isSaveRecord; if (isSaveRecord == null || isSaveRecord == '' || isSaveRecord == undefined) { isSaveRecord = 0; } me.setData({ searchContent: searchContent }); //獲取當前的分頁數
    var page = me.data.page;
    me.getAllVideoList(page, isSaveRecord);
  },

  getAllVideoList: function (page, isSaveRecord) {
    var me = this;

    var serverUrl = app.serverUrl;
    wx.showToast({
      title: '請等待...',
    });

    var searchContent = me.data.searchContent; wx.request({ url: serverUrl + '/video/showAll?page=' + page + "&isSaveRecord=" + isSaveRecord, //熱搜詞會被保存 method: "POST", data: { videoDesc: searchContent //只是做爲一個載體傳遞熱搜詞 },
      success: function (res) {
        wx.hideLoading();
        wx.hideNavigationBarLoading();
        wx.stopPullDownRefresh();

        console.log(res.data);

        if (page == 1) {
          me.setData({
            videoList: []
          });
        }

        var videoList = res.data.data.rows;
        var newVideoList = me.data.videoList;

        me.setData({
          videoList: newVideoList.concat(videoList),
          page: page,
          totalPage: res.data.data.total,
          serverUrl: serverUrl
        });
      }

    })
  },

  onPullDownRefresh: function() {
    //在當前頁面顯示導航條加載動畫
    wx.showNavigationBarLoading();
    this.getAllVideoList(1, 0);
  },

  onReachBottom: function (){
    var me = this;
    var currentPage = me.data.page;
    var totalPage = me.data.totalPage;

    //判斷當前頁數和總頁數是否相等，若是相等的話無需查詢
    if(currentPage == totalPage){
      wx.showToast({
        title: '已經沒有視頻了~~',
        icon: "none"
      })
      return;
    }

    var page = currentPage + 1;

    me.getAllVideoList(page, 0);
  }

})

 

 

10、熱搜查詢聯調與視頻對象的播放與暫停

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程