「小程序JAVA实战」小程序视频展示页开发(52)

转自:https://idig8.com/2018/09/22/xiaochengxujavashizhanxiaochengxushipinzhanshiyekaifa51/

这次说下,小程序的视频组件,图标放置 关联到了之前没有说过的一个组件cover-view。https://github.com/limingios/wxProgram.git 中No.15

覆盖在原生组件之上的文本视图

  • 官网介绍
    >https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html

视频上需要添加功能

Page({

  data: {
    cover:‘cover‘,
  }
})

<view style=‘width:100%;height:100%‘>
  <video src="https://127.0.0.1:8081/180831CF2TS25MNC/4e0ca373-6520-45b9-a1a6-7ee8429dc5d8.mp4" muted=‘{{true}}‘ controls=‘{{false}}‘ autoplay=‘{{true}}‘ loop=‘{{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;
}

PS:如果我们把cover-view中的cover去掉的话,我们这个view肯定是无法保存在我们的视频里面的。下面的我们来一起实现里面的功能。

原文地址:https://www.cnblogs.com/sharpest/p/10312461.html

时间: 2024-11-05 13:04:11

「小程序JAVA实战」小程序视频展示页开发(52)的相关文章

「小程序JAVA实战」 小程序默认加载的页面和生命周期(八)

转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-08/ 小程序如何加载的呢?生命周期!源码:https://github.com/limingios/wxProgram.git 中的No.3 加载页面 小程序默认加载的pages中的第一个目录 不管你的名称,只管你的顺序 其他目录需要通过触发才能加载 生命周期 相关的框架的时候都有生命周期的概念,通过了解生命周期更好的把控框架的使用! onLaunch 第一次打开小程序的初始化,也被调用一次.

「小程序JAVA实战」小程序注册界面的开发(29)

转自:https://idig8.com/2018/08/27/xiaochengxujavashizhanxiaochengxuzhucejiemiandekaifa29/ 小程序基本所有的常用组件已经了解的差不多了,基本可以实战了,本次就开始小程序的真正实战,完成小程序的一个注册页面的设计.源码:https://github.com/limingios/wxProgram.git 中的No.15 开发最重要的就是实操! 开发人员很少人懂美工 我就懂css 其实也设计不出来什么好看的,在网上找

「小程序JAVA实战」小程序的关注功能(65)

转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudeguanzhugongneng64/ 在个人页面,根据发布者个人和个人的信息来进行展示,如果是发布者,可以进行关注和取消关注. 后端开发 涉及2涨表,一个关联表,个人和粉丝的关联表,用户表. UsersMapper.java package com.idig8.mapper; import com.idig8.pojo.Users; import com.idig

「小程序JAVA实战」小程序的个人信息作品,收藏,关注(66)

转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudegerenxinxizuopinshoucangguanzhu65/ 个人信息页面有一个tab(作品,收藏,关注)源码:https://github.com/limingios/wxProgram.git 中No.15和springboot 作品,收藏,关注的列表 VideoController.java package com.idig8.controller;

「小程序JAVA实战」 小程序手写属于自己的第一个demo(六)

转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-06/ 自己尝试的写一个小demo,用到自定义样式,自定义底部导航,页面之间的跳转等小功能.官方文档对于小程序开发来说要时刻打开https://developers.weixin.qq.com/miniprogram/dev/framework/config.html源码:https://github.com/limingios/wxProgram.git 中的No.1 创建小程序 项目名称创建

「小程序JAVA实战」 小程序wxss样式文件的使用(七)

转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-07/ 细说下微信小程序的wxss样式文件.源码:https://github.com/limingios/wxProgram.git 中的No.2 样式rpx 原来在html里面都是使用px和pt,微信这边自定义的rpx的方式.文档:https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html /* pages

「小程序JAVA实战」小程序页面引用外部wxml通用页面(21)

转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-21/ 现在都是讲究开发的效率,原来单纯的android 和 ios 已经不在吃香了,都是混合开发,混合开发很多页面的结构基本都是上中下,head,body,foot,所以小程序也要这么的满足如图例.源码:https://github.com/limingios/wxProgram.git 中的No.8 小程序的引入外部的页面 include 可以将目标文件除了 template ,wxs 外的整

「小程序JAVA实战」小程序的基础组件(24)

转自:https://idig8.com/2018/08/12/xiaochengxu-chuji-24/ 来说下 ,小程序的基础组件.源码:https://github.com/limingios/wxProgram.git 中的No.11 基础组件 icon图标组件 rich-text 富文本组件 text 文本组件 progress 进度条组件 icon图标组件 官方介绍>https://developers.weixin.qq.com/miniprogram/dev/component/

「小程序JAVA实战」小程序的组件(23)

转自:https://idig8.com/2018/08/11/xiaochengxu-chuji-23/ 开始了解下小程序的组件.源码:https://github.com/limingios/wxProgram.git 中的No.10 组件 多个组件构成一张视图页面>经过样式和布局,页面其实理解成html 组件包含<开始标签></结束标签> 每个组件都包含一些公用属性 官方的阐述 https://developers.weixin.qq.com/miniprogram/d