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

时间  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教程