小程序短视频项目———视频详情页面开发（一）

本文转载自查看原文 2018-10-10 21:16 4668

一、视频组件与api介绍

video

视频。该组件是原生组件，使用时请注意相关限制。

属性名	类型	默认值	说明	最低版本
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设置宽高。

二、视频展示页开发1-视频展示页面

<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"

  }
})

三、视频展示页开发1-图标放置

cover-view

基础库 1.4.0 开始支持，低版本需做兼容处理。

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

属性名	类型	默认值	说明	最低版本
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

tip: 基础库 2.2.4 起支持 touch 相关事件，也可使用 hover-class 设置点击态
tip: 基础库 2.1.0 起支持设置 scale rotate 的 css 样式，包括 transition 动画
tip: 基础库 1.9.90 起 cover-view 支持 overflow: scroll，但不支持动态更新 overflow
tip: 基础库 1.9.90 起最外层 cover-view 支持 position: fixed
tip: 基础库 1.9.0 起支持插在 view 等标签下。在此之前只可嵌套在原生组件map、video、canvas、camera内，避免嵌套在其他组件内。
tip: 基础库 1.6.0 起支持css transition动画，transition-property只支持transform (translateX, translateY)与opacity。
tip: 基础库 1.6.0 起支持css opacity。
tip: 事件模型遵循冒泡模型，但不会冒泡到原生组件。
tip: 文本建议都套上cover-view标签，避免排版错误。
tip: 只支持基本的定位、布局、文本样式。不支持设置单边的border、background-image、shadow、overflow: visible等。
tip: 建议子节点不要溢出父节点
tip: 默认设置的样式有：white-space: nowrap; line-height: 1.2; display: block;
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;
}

四、开源搜索视频组件的使用

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

2、使用简介

QuickStart

拷贝项目根目录的wxSearchView文件夹到你项目的根目录下（也可以其它位置）。
在你的wxss文件里导入组件的样式（文件位置为相对位置）：

@import "../../wxSearchView/wxSearchView.wxss";

在你的wxml文件里导入组件（文件位置为相对位置）：

<include src="../../wxSearchView/wxSearchView.wxml" />

在你的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=返回'  
    })
  }

})

说明

回调函数

为了方便调用，提高开发效率，组件实际上只是提供了两个回调接口，开发者也只需要提供这两个函数，介绍如下：

搜索回调函数，下面是一个例子。当用户点击历史记录、搜索热点、搜索提示、搜索按钮时，都会回调开发者提供的函数接口，开发者拿到参数后可以跳到另一个页面展示查询结果。

  mySearchFunction: function (value) {
    // do your job here
  }

返回回调函数，下面是一个例子。搜索框边上的按钮有两个角色，当输入为空的时候，是一个返回按钮；当输入不为空时，是一个搜索按钮。当点击返回按钮时，就会回调开发者提供的函数，这里可以跳回到指定页面。

  myGobackFunction: function () {
    // do your job here
  }

页面关系

为了避免输入法遮挡的影响，该组件适合放在一个独立的搜索页面中。该搜索页面与其他页面间的关系如下图所示：

搜索入口：搜索页面需要一个导入的入口，这个入口可以是一个搜索框，也可以是一些搜索按钮。在本项目中，搜索入口页面是index页面，搜索入口是一个搜索框。
搜索页面：搜索组件是放在搜索页面中的，直接按照QuickStart中的描述导入即可。搜索页面可以通过返回回调函数跳转到之前的页面中去，可以通过搜索回调函数跳转到具体展示结果的页面中去。在本项目中，搜索页面是search页面，开发者可以进行参考或直接拷贝。
搜索结果：搜索结果页面根据搜索页面传递过来的参数展示搜索结果。本项目中，为了简单，将搜索入口和搜索结果统一成一个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函数，从而保证搜索框的正确效果。

3、在项目中正式使用

首先复制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=返回'
    })
  }

})

五、修改全局用户对象使用缓存

然后在相应的文件上修改。

六、查询接口完善以及热搜词保存

七、热搜词查询接口开发

八、热搜词前后端联调

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 //提供一个返回回调函数
        );

      }
    })

 

  },

九、搜索功能整合首页列表联调

先定义搜索回调事件

会带上参数跳转到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);
  }

})

十、热搜查询联调与视频对象的播放与暂停

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 TouTiao开源项目分析笔记18 视频详情页面小程序短视频项目———ffmpeg 小程序短视频项目———数据库设计微信小程序项目实战（三）list 列表页及 item 详情页小程序新闻网站详情页（六）微信小程序：制作新闻详情页如何用Baas快速在腾讯云上开发小程序-系列4：实现客户侧商品列表、商品详情页程序 Vue2.5开发去哪儿网App 详情页面开发使用Html模版创建详情页面 editormd实现文章详情页面预览