TmOct5/AGuestSaas
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

测试短视频功能

Browse Source
This commit is contained in:
唐明明
2020-12-02 17:06:42 +08:00
parent 034b7906fa
commit dcc406f6a1
21 changed files with 401 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apis/interfaces/auth.js
View File

@@ -5,9 +5,7 @@
import {req} from "../request"
const authPhone = data => req({url: "auth/mini", method: "POST", data: data}) //登录
const authInfo = data => req({url: "auth/mini/info", method: "POST", data: data}) //完善用户信息
export default({
authPhone,
authInfo
authPhone
})

5
apis/request.js
View File

@@ -86,9 +86,10 @@ const upload = (obj) => {
if (jsonData.status_code == 200) {
resolve(jsonData.data)
} else {
if (jsonData.status_code == 401) {
if (res.data.status_code == 401 || res.data.status_code == 400) {
reject({
login: false
login : false,
codeBeen: false
})
}
errInfo(jsonData)

3
app.json
View File

@@ -1,6 +1,7 @@
{
"pages": [
"pages/videos/videos"
"pages/shortVideo/shortVideo",
"pages/login/login"
],
"window": {
"backgroundTextStyle": "light",

75
components/videoSwiper/videoSwiper.js → components/swiperVideo/swiperVideo.js
View File

@@ -10,13 +10,20 @@ Component({
* 组件的属性列表
*/
properties: {
// 视频列表
videoList: {
type : Array,
value : []
},
playId : {
type : Number,
value : 0
// 是否自动播放
autoPlay: {
type : Boolean,
value : true
},
// 视频展示方式
fit:{
type : String,
value : "contain"
}
},
@@ -26,7 +33,8 @@ Component({
data: {
controls: false,
showPlay: false,
isPlay : true
isPlay : false,
playId : 0
},
/**
@@ -39,6 +47,9 @@ Component({
current = e.detail.current,
currentId = this.data.playId,
prevId = videoLists[current].video_id
// 滚动回调
this.triggerEvent("swiperindex", {current: current})
// 停止老
let videoContextCurrent = wx.createVideoContext("video" + currentId, this)
@@ -69,30 +80,44 @@ Component({
this.setData({
isPlay : !isPlayState
})
},
// 视频播放状态
vipdeBindPlay(e){
this.triggerEvent("play", {
playType : e.type,
videoId : e.currentTarget.dataset.videoid
})
// let videoId,
// priorId = this.data.playId
if(e.type == "play"){
this.setData({
isPlay: true
})
}else if(e.type == "pause"){
this.setData({
isPlay: false
})
}
}
},
/**
* 生命周期组件
*/
lifetimes: {
attached(){
let videoList = this.data.videoList
// if(e.type == "tap"){
// // 点击播放视频
// videoId = "video" + e.currentTarget.dataset.videoid
// // 实例化video
// let videoContext = wx.createVideoContext(videoId)
// // 播放视频
// videoContext.play()
// wx.showToast({
// title: "播放",
// icon : "none"
// })
// }else{
// // 滑动切换视频
// videoId = e
// }
// console.log("当前的：", videoId)
// console.log("上一个：", priorId)
// 默认当前视频id
if(videoList.length > 0){
this.setData({
playId: videoList[0].video_id
})
// 是否默认播放
if(this.data.autoPlay){
let playVideoContext = wx.createVideoContext("video" + videoList[0].video_id, this)
playVideoContext.play()
}
}
}
}
})

0
components/videoSwiper/videoSwiper.json → components/swiperVideo/swiperVideo.json
View File

19
components/swiperVideo/swiperVideo.wxml Normal file
View File

@@ -0,0 +1,19 @@
<swiper class="videoSwiper" vertical bindchange="changeVideo">
<swiper-item class="videoSwiperItem" wx:for="{{videoList}}" wx:key="videoItem" circular="{{videoList.length > 2}}">
<video
id="video{{item.video_id}}"
src="{{item.path_url || ''}}"
controls="{{controls}}"
object-fit="{{fit}}"
show-center-play-btn="{{showPlay}}"
data-videoid="{{item.video_id}}"
bindtap="videoPlay"
bindplay="vipdeBindPlay"
bindpause="vipdeBindPlay"
loop
>
</video>
<image class="videoLayer-play {{!isPlay ? 'show': ''}}" src="/static/icon/play_icon.png"></image>
</swiper-item>
</swiper>

36
components/swiperVideo/swiperVideo.wxss Normal file
View File

@@ -0,0 +1,36 @@
/**
* Web唐明明
* 一个梦想做木雕手艺人的程序员
* explain: videoSwiper
*/
.videoSwiper{
background-color: #0e0c1a;
height: 100%;
}
.videoSwiperItem{
position: relative;
-webkit-overflow-scrolling:touch;
}
.videoSwiperItem video{
width: 100%;
height: 100%;
}
/* 视频按钮 */
.videoLayer-play{
position: relative;
width: 78rpx;
height: 78rpx;
left: calc(50% - 39rpx);
top: calc(50% - 39rpx);
opacity: 0;
transition: all .5s;
}
.videoLayer-play.show{
opacity: .7;
}

48
components/videoSwiper/videoSwiper.wxml
View File

@@ -1,48 +0,0 @@
<swiper class="videoSwiper" vertical bindchange="changeVideo">
<swiper-item class="videoSwiperItem" wx:for="{{videoList}}" wx:key="videoItem">
<!-- 视频 -->
<video
class="video"
id="video{{item.video_id}}"
src="{{item.path_url}}"
controls="{{controls}}"
show-center-play-btn="{{showPlay}}"
data-videoid="{{item.video_id}}"
bindtap="videoPlay"
loop
>
<!-- 播放按钮 -->
<image class="videoLayer-play" wx:if="{{!isPlay}}" src="/static/icon/play_icon.png" mode="widthFix"></image>
</video>
<!-- 视频信息 -->
<view class="videoInfo">
<view class="videoInfoUser">@ 哈尔滨域展科技开发</view>
<view class="videoInfoTitle">计算机网络技术服务，软件开发及咨询、技术评测、技术转让服务；</view>
</view>
<!-- 视频工具栏 -->
<view class="videoTool">
<view class="videoTool-item">
<image class="videoTool-cover" src="/static/img/cover.jpeg" mode="aspectFill"></image>
</view>
<view class="videoTool-item">
<image class="videoTool-icon" src="/static/icon/video_tool_00.png" mode="widthFix"></image>
<view class="videoTool-number">12.5w</view>
</view>
<view class="videoTool-item">
<image class="videoTool-icon" src="/static/icon/video_tool_01.png" mode="widthFix"></image>
<view class="videoTool-number">1000</view>
</view>
<view class="videoTool-item">
<image class="videoTool-icon" src="/static/icon/video_tool_02.png" mode="widthFix"></image>
<view class="videoTool-number">2.9w</view>
</view>
<view class="videoTool-item">
<view class="videoTool-vinyl {{!isPlay ? '' : 'rotate'}}">
<image class="videoTool-vinyl-back" src="/static/img/vinyl_back.png" mode="widthFix"></image>
<image class="videoTool-vinyl-cover" src="/static/img/cover.jpeg" mode="aspectFill"></image>
</view>
</view>
</view>
</swiper-item>
</swiper>

58
pages/login/login.js Normal file
View File

@@ -0,0 +1,58 @@
/**
* Web唐明明
* 一个梦想做木雕手艺人的程序员
*/
Page({
/**
* 页面的初始数据
*/
data: {
code : ""
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(){
this.wxLogin()
},
/**
* 手机号码授权
*/
PhoneNumber(e){
if(!e.detail.encryptedData){
this.wxLogin()
return
}
wx.$api.auth.authPhone({
code : this.data.code,
iv : e.detail.iv,
encryptedData : e.detail.encryptedData,
parent_id : ""
}).then(res=>{
// 存储登录信息
wx.setStorageSync('token', res.access_token)
// 返回首页
wx.navigateBack()
}).catch(()=>{
this.wxLogin()
})
},
/**
* 更新code
*/
wxLogin(){
wx.login({
success: res=>{
this.setData({
code: res.code
})
}
})
}
})

7
pages/login/login.json Normal file
View File

@@ -0,0 +1,7 @@
{
"usingComponents": {
"userinfo-layer" : "/components/loginLayer/loginLayer"
},
"navigationBarTitleText": ""
}

11
pages/login/login.wxml Normal file
View File

@@ -0,0 +1,11 @@
<view class="login">
<view class="login-header">
<image class="login-logo" src="/static/img/logo.jpeg" mode="aspectFill"></image>
<view class="login-title">微信授权，体验更多服务</view>
<view class="login-subhead">请使用您本人的手机号码登录/注册平台账户</view>
</view>
<button class="login-btn" size="default" open-type="getPhoneNumber" bindgetphonenumber="PhoneNumber">授权手机号</button>
<view class="login-agree">点击授权登录表示您已阅读并同意 <text>用户隐私规则</text>，<text>用户服务协议</text></view>
</view>

71
pages/login/login.wxss Normal file
View File

@@ -0,0 +1,71 @@
/**
* Web唐明明
* 一个梦想做木雕手艺人的程序员
*/
page{
background-color: white;
}
.login{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-pack: center;
position: relative;
text-align: center;
height: 100vh;
width: 100vw;
padding: 100rpx 100rpx 200rpx;
box-sizing: border-box;
}
/* btn */
.login-btn[size="default"]{
width: 100%;
height: 90rpx;
line-height: 90rpx;
padding: 0;
font-size: 34rpx;
border-radius: 0;
background: #2d6af6;
color: white;
}
/* header */
.login-header{
text-align: center;
padding-bottom: 70rpx;
}
.login-logo{
width: 128rpx;
height: 128rpx;
background: #eee;
vertical-align: top;
}
.login-title{
font-weight: bold;
padding: 50rpx 0 20rpx;
font-size: 40rpx;
}
.login-subhead{
font-size: 26rpx;
color: #afafaf;
}
/* 用户协议 */
.login-agree{
margin-top: 20vh;
color: #afafaf;
font-size: 26rpx;
text-align: center;
line-height: 50rpx;
}
.login-agree text{
color: #ff8d37;
padding: 0 5rpx;
}

67
pages/shortVideo/shortVideo.js Normal file
View File

@@ -0,0 +1,67 @@
Page({
/**
* 页面的初始数据
*/
data: {
videoList : [], //获取短视频列表
videoIndex : 0, //当前播放视频的下标
videoId : "", //当前播放的视频id
playState : true, //视频播放状态
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
wx.$api.video.videos().then(res=>{
this.setData({
videoList: res,
videoId : res[0].video_id
})
})
},
/***
* 视频的播放状态
*/
videoPlay(e){
if(e.detail.playType == "play" && this.data.playState == false){
this.setData({
playState : true,
videoId : e.detail.videoId
})
}else if(e.detail.playType == "pause" && this.data.playState == true){
this.setData({
playState : false
})
}
},
/**
* 获取视频下标
*/
swiperIndex(e){
this.setData({
videoIndex: e.detail.current
})
},
/**
* 点赞视频
*/
binLike(){
let hasLogin = wx.getStorageSync("token")
if(hasLogin == ""){
wx.navigateTo({
url: "/pages/login/login"
})
}else{
wx.showToast({
title: "点赞成功"
})
}
}
})

5
pages/videos/videos.json → pages/shortVideo/shortVideo.json
View File

@@ -1,9 +1,8 @@
{
"usingComponents": {
"videoSwiper": "/components/videoSwiper/videoSwiper"
"swiperViode": "/components/swiperVideo/swiperVideo"
},
"navigationStyle": "custom",
"navigationBarTextStyle": "white",
"disableScroll": true
}
}

41
pages/shortVideo/shortVideo.wxml Normal file
View File

@@ -0,0 +1,41 @@
<view class="videos-content">
<swiperViode
wx:if="{{videoList.length > 0}}"
class="swiper-viode"
video-list="{{videoList}}"
autoPlay="{{playState}}"
fit="cover"
bind:play="videoPlay"
bind:swiperindex="swiperIndex"
>
</swiperViode>
<!-- 视频信息 -->
<view class="video-info">
<view class="video-user">@ {{videoList[videoIndex].company.name || "-"}}</view>
<view class="video-title">{{videoList[videoIndex].description || "-"}}</view>
</view>
<!-- 视频工具栏 -->
<view class="video-tool">
<view class="video-tool-item">
<image class="video-tool-cover" src="{{videoList[videoIndex].company.cover || ''}}" mode="aspectFill"></image>
</view>
<view class="video-tool-item" bindtap="binLike">
<image class="video-tool-icon" src="/static/icon/video_tool_00.png" mode="widthFix"></image>
<view class="video-tool-number">{{videoList[videoIndex].likes || "0"}}</view>
</view>
<!-- <view class="video-tool-item">
<image class="video-tool-icon" src="/static/icon/video_tool_01.png" mode="widthFix"></image>
<view class="video-tool-number">1000</view>
</view> -->
<view class="video-tool-item">
<image class="video-tool-icon" src="/static/icon/video_tool_02.png" mode="widthFix"></image>
<view class="video-tool-number">{{videoList[videoIndex].shares || "0"}}</view>
</view>
<view class="video-tool-item">
<view class="video-tool-vinyl {{playState ? 'rotate': ''}}">
<image class="video-tool-vinyl-back" src="/static/img/vinyl_back.png" mode="widthFix"></image>
<image class="video-tool-vinyl-cover" src="{{videoList[videoIndex].company.cover || ''}}" mode="aspectFill"></image>
</view>
</view>
</view>
</view>

87
components/videoSwiper/videoSwiper.wxss → pages/shortVideo/shortVideo.wxss
View File

@@ -2,80 +2,59 @@
/**
* Web唐明明
* 一个梦想做木雕手艺人的程序员
* explain: videoSwiper
*/
.videoSwiper{
background-color: #0e0c1a;
height: 100%;
width: 100%;
page{
background: #0e0c1a;
}
.videoSwiperItem{
.videos-content{
position: relative;
}
.video{
z-index: 1;
width: 100%;
height: 100%;
}
/* 播放按钮 */
.videoLayer-play{
position: absolute;
width: 78rpx;
height: 78rpx;
opacity: .6;
top: calc(50% - 39rpx);
left: calc(50% - 39rpx);
height: 100vh;
}
/* 视频信息 */
.videoInfo,
.videoTool{
position: fixed;
bottom: 0;
z-index: 999;
}
.videoInfo{
left: 0;
padding: 0 0 50rpx 30rpx;
.video-info{
position: absolute;
bottom: 50rpx;
left: 30rpx;
width: calc(100% - 218rpx);
box-sizing: border-box;
color: white;
}
.videoInfoUser{
.video-user,
.video-title{
color: white;
text-shadow: 0 3rpx 3rpx rgba(0, 0, 0, .3);
}
.video-user{
font-weight: bold;
padding-bottom: 10rpx;
font-size: 38rpx;
}
.videoInfoTitle{
padding-top: 10rpx;
.video-title{
font-size: 28rpx;
line-height: 40rpx;
}
/* 视频工具栏 */
.videoTool{
right: 0;
width: 128rpx;
padding: 0 30rpx 50rpx 0;
box-sizing: border-box;
.video-tool{
position: absolute;
right: 30rpx;
bottom: 50rpx;
}
.videoTool-item{
.video-tool-item{
margin-top: 40rpx;
text-align: center;
}
.videoTool-item:first-child{
.video-tool-item:first-child{
margin-top: 0;
}
.videoTool-cover{
.video-tool-cover{
width: 98rpx;
height: 98rpx;
border-radius: 50%;
@@ -84,25 +63,25 @@
box-sizing: border-box;
}
.videoTool-icon{
.video-tool-icon{
width: 48rpx;
vertical-align: top;
}
.videoTool-number{
.video-tool-number{
font-size: 26rpx;
line-height: 50rpx;
color: white;
}
/* 黑胶唱片 */
.videoTool-vinyl{
.video-tool-vinyl{
width: 98rpx;
height: 98rpx;
position: relative;
}
.videoTool-vinyl.rotate{
.video-tool-vinyl.rotate{
animation: rotate 10s linear infinite;
}
@@ -115,22 +94,22 @@
}
}
.videoTool-vinyl-cover,
.videoTool-vinyl-back{
.video-tool-vinyl-cover,
.video-tool-vinyl-back{
position: absolute;
}
.videoTool-vinyl-back{
.video-tool-vinyl-back{
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.videoTool-vinyl-cover{
.video-tool-vinyl-cover{
width: 50%;
height: 50%;
left: 25%;
top: 25%;
border-radius: 50%;
}
}

24
pages/videos/videos.js
View File

@@ -1,24 +0,0 @@
Page({
/**
* 页面的初始数据
*/
data: {
videoList: [], //获取短视频列表
showId : 0 //当前播放得id
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
wx.$api.video.videos().then(res=>{
console.log(res)
this.setData({
videoList: res,
showId : res[0].video_id
})
})
}
})

7
pages/videos/videos.wxml
View File

@@ -1,7 +0,0 @@
<videoSwiper
video-list="{{videoList}}"
play-id="{{showId}}"
class="videoSwiper"
>
</videoSwiper>

16
pages/videos/videos.wxss
View File

@@ -1,16 +0,0 @@
/**
* Web唐明明
* 一个梦想做木雕手艺人的程序员
*/
page{
/* background: #0e0c1a; */
}
.videoSwiper{
width: 100%;
height: 100%;
background: #ddd;
position: absolute;
}

BIN
static/img/cover.jpeg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 27 KiB

BIN
static/img/logo.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.5 KiB