测试短视频功能

apis/interfaces/auth.js

@@ -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,
+    authPhone
-    authInfo
 })

apis/request.js

@@ -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)

app.json

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

components/swiperVideo/swiperVideo.js

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

components/swiperVideo/swiperVideo.wxml

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

components/swiperVideo/swiperVideo.wxss

@@ -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;
+}

components/videoSwiper/videoSwiper.wxml

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

pages/login/login.js

@@ -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
+                })
+            }
+        })
+    }
+})

pages/login/login.json

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

pages/login/login.wxml

@@ -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>
+

pages/login/login.wxss

@@ -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;
+}

pages/shortVideo/shortVideo.js

@@ -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: "点赞成功"
+            })
+        }
+    }
+})

pages/shortVideo/shortVideo.json

@@ -1,7 +1,6 @@
-
 {
     "usingComponents": {
-        "videoSwiper": "/components/videoSwiper/videoSwiper"
+        "swiperViode": "/components/swiperVideo/swiperVideo"
     },
     "navigationStyle": "custom",
     "navigationBarTextStyle": "white",

pages/shortVideo/shortVideo.wxml

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

pages/shortVideo/shortVideo.wxss

@@ -2,80 +2,59 @@
 /**
  *  Web唐明明
  *  一个梦想做木雕手艺人的程序员
- *  explain: videoSwiper
  */
 
-.videoSwiper{
+page{
-    background-color: #0e0c1a;
+    background: #0e0c1a;
-    height: 100%;
-    width: 100%;
 }
 
-.videoSwiperItem{
+.videos-content{
     position: relative;
-}
+    height: 100vh;
-
-.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);
 }
 
 /* 视频信息 */
-.videoInfo,
+.video-info{
-.videoTool{
+    position: absolute;
-    position: fixed;
+    bottom: 50rpx;
-    bottom: 0;
+    left: 30rpx;
-    z-index: 999;
-}
-
-.videoInfo{
-    left: 0;
-    padding: 0 0 50rpx 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{
+.video-title{
-    padding-top: 10rpx;
     font-size: 28rpx;
     line-height: 40rpx;
 }
 
 /* 视频工具栏 */
-.videoTool{
+.video-tool{
-    right: 0;
+    position: absolute;
-    width: 128rpx;
+    right: 30rpx;
-    padding: 0 30rpx 50rpx 0;
+    bottom: 50rpx;
-    box-sizing: border-box;
 }
 
-.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,19 +94,19 @@
     }
 }
 
-.videoTool-vinyl-cover,
+.video-tool-vinyl-cover,
-.videoTool-vinyl-back{
+.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%;

pages/videos/videos.js

@@ -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
-            })
-        })
-    }
-})

pages/videos/videos.wxml

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

pages/videos/videos.wxss

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