补全单页

pages/index/index.js

@@ -4,10 +4,18 @@ const app = getApp()
 
 Page({
   data: {
-    videoBackgroundUrl:'../../images/background.jpg',
+    // 视频路径
+    videoSrc:'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',
+    // 视频的封面图片
+    videoBackgroundUrl:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1523526097286&di=a4099fae1ee85e1cb0ecbfca5715e0ce&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F03087bf40ad162d92a1d14821bdfa9ec8b13cdb9.jpg',
+    // 背景图片
+    backgroundUrl:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1523526650589&di=709e872bb70dc4246fb045a22fc5dcbb&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F012bc0585250e8a801219c77cf3db4.jpg',
     displayBackground:true,
-    motto: 'Hello World',
     userInfo: {},
+    now: 0,
+    // 是否正在进行网络请求
+    networking:false,
+    loading: true,
     hasUserInfo: false,
     canIUse: wx.canIUse('button.open-type.getUserInfo')
   },
@@ -17,6 +25,18 @@ Page({
       url: '../logs/logs'
     })
   },
+  finishLoading(){
+    if (!this.data.networking){
+      this.setData({
+        loading:false
+      });
+      wx.setNavigationBarColor({
+        frontColor: '#000000',
+        backgroundColor: '#f6c173',
+      })
+      clearInterval(this.timer)
+    }
+  },
   sendRedpacket(){
     console.log('发发发发')
   },
@@ -30,15 +50,13 @@ Page({
     this.videoContext = wx.createVideoContext('myVideo')
     wx.setNavigationBarColor({
       frontColor: '#000000',
-      backgroundColor: '#f6c173',
-    })
-  },
-  getUserInfo: function(e) {
-    console.log(e)
-    app.globalData.userInfo = e.detail.userInfo
-    this.setData({
-      userInfo: e.detail.userInfo,
-      hasUserInfo: true
+      // #f6c173
+      backgroundColor: '#ffffff',
     })
+    this.timer = setInterval(()=>{
+      this.setData({
+        now:(this.data.now+1)%3
+      })
+    },500)
   }
 })

pages/index/index.wxml

 <!--index.wxml-->
-<view class="container" bindtap="startVideo">
+<view wx:if="{{loading}}" style="max-height:100%;overflow:hidden">
+  <view>
+    <image src="../../images/icon.png" style="width:138rpx;height:138rpx;display:block;margin:188rpx auto 0" />
+    <view style="text-align:center;margin-top:20rpx;">
+      <text style="color:#fe5454;font-size:36rpx">包你说</text>
+    </view>
+  </view>
+  <view style="display:flex;justify-content:center;margin-top:251rpx">
+    <view style="width:16rpx;height:16rpx;background:{{now==0?'#fe5454':(now==2?'#fe98b3':'#ffc5c9')}};border-radius:10rpx;margin:0 8rpx"></view>
+    <view style="width:16rpx;height:16rpx;background:{{now==1?'#fe5454':(now==0?'#fe98b3':'#ffc5c9')}};border-radius:10rpx;margin:0 8rpx"></view>
+    <view style="width:16rpx;height:16rpx;background:{{now==2?'#fe5454':(now==1?'#fe98b3':'#ffc5c9')}};border-radius:10rpx;margin:0 8rpx"></view>
+  </view>
+</view>
+<view style="visibility:{{loading?'hidden':'visible'}}" class="container" bindtap="startVideo">
   <view style="position:absolute;top:0;left:0;right:0;bottom:0;z-index:-10;max-height:100%;overflow:hidden">
-    <image mode="widthFix"src="../../images/background2.jpg" style="width:100%;"/>
+    <image mode="widthFix"src="{{backgroundUrl}}" style="width:100%;" bindload='finishLoading'/>
   </view>
   <view style="width:100%;position:relative;text-align:center;padding:0 auto">
     <view style="width: 656rpx;height: 369rpx;margin: 250rpx auto 200rpx;position:relative;box-shadow:rgba(0, 0, 0, 0.16) 0px 3px 10px, rgba(0, 0, 0, 0.23) 0px 3px 10px">
@@ -11,7 +24,7 @@
         </view>
         <image src="{{videoBackgroundUrl}}" style="width:656rpx;height:369rpx;"/>
       </view>
-      <video wx:if="{{!displayBackground}}" id="myVideo" style="z-index:{{displayBackground?-1:1}};position:absolute;margin:0 auto;top:0;left:0;right:0;bottom:0;width:656rpx;height:369rpx" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" controls></video>
+      <video wx:if="{{!displayBackground}}" id="myVideo" style="z-index:{{displayBackground?-1:1}};position:absolute;margin:0 auto;top:0;left:0;right:0;bottom:0;width:656rpx;height:369rpx" src="{{videoSrc}}" controls></video>
     </view>
   </view>