微信浏览器显示一个起始页

src/views/HomeView.vue

@@ -2,6 +2,25 @@
   <div class="home">
     <transition name="fade-out">
       <div
+        v-if="isShowStartup"
+        class="startup-mask"
+      >
+        <img
+          class="title"
+          src="@/assets/images/title.png"
+          alt="雨花台烈士纪念馆"
+          draggable="false"
+        >
+        <button
+          @click="onClickStart"
+        >
+          开始体验
+        </button>
+      </div>
+    </transition>
+
+    <transition name="fade-out">
+      <div
         v-if="isShowVideo"
         class="video-wrap"
       >
@@ -82,6 +101,7 @@
 </template>
 
 <script>
+import Vue from 'vue'
 
 export default {
   name: 'HomeView',
@@ -89,13 +109,20 @@ export default {
   },
   beforeRouteEnter (to, from, next) {
     next(vm => {
-      if (!from.name) {
+      if (!from.name && !vm.$isWeChat) {
         vm.isShowVideo = true
+        setTimeout(() => {
+          vm.isShowSkip = true
+        }, 3000)
+      }
+      if (!from.name && vm.$isWeChat) {
+        vm.isShowStartup = true
       }
     })
   },
   data() {
     return {
+      isShowStartup: false,
       isShowSkip: false,
       isShowVideo: false,
     }
@@ -106,30 +133,35 @@ export default {
     ])
   },
   mounted() {
-    setTimeout(() => {
-      this.isShowSkip = true
-    }, 3000)
-    // setTimeout(() => {
-    //   let dom = document.querySelector("#VideoDom")
-    //   if (dom) {
-    //     console.log('找到了视频')
-    //     dom.play()
-    //     dom.addEventListener('canplaythrough', () => {
-    //       console.log('play!!!!!')
-    //       dom.play()
-    //     })
-    //     dom.addEventListener("ended", () => {
-    //       this.isShowVideo = false
-    //     })
-    //   } else {
-    //     console.error('居然没找到视频？！')
-    //   }
-    // }, 2000)
   },
   methods: {
     ...globalMapMutations([
       'toggleMute',
     ]),
+    onClickStart() {
+      this.isShowStartup = false
+      this.isShowVideo = true
+
+      this.$nextTick(() => {
+        let dom = document.querySelector("#VideoDom")
+        if (dom) {
+          console.log('找到了视频')
+          dom.play()
+          dom.addEventListener('canplaythrough', () => {
+            dom.play()
+          })
+          dom.addEventListener("ended", () => {
+            this.isShowVideo = false
+          })
+        } else {
+          console.error('居然没找到视频？！')
+        }
+
+        setTimeout(() => {
+          this.isShowSkip = true
+        }, 3000)
+      })
+    },
     onVideoHide() {
       this.isShowVideo = false
       const audioNode = document.getElementById('global-audio')
@@ -148,7 +180,39 @@ export default {
   background-image: url(@/assets/images/homepage-bg.jpg);
   background-size: cover;
 
-  .video-wrap {
+  > .startup-mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 3;
+    background-color: #D8B275;
+    background-image: url(@/assets/images/homepage-bg.jpg);
+    background-size: cover;
+
+    > .title {
+      position: absolute;
+      width: 39.63rem;
+      top: 9.4%;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+    > button {
+      width: 21.67rem;
+      height: 6.25rem;
+      background: red;
+      color: #fff;
+      font-size: 1.83rem;
+      font-weight: bold;
+      position: absolute;
+      left: 50%;
+      bottom: 8.08rem;
+      transform: translate(-50%);
+    }
+  }
+
+  > .video-wrap {
     position: absolute;
     top: 0;
     left: 0;
@@ -161,7 +225,7 @@ export default {
       height: 100%;
       object-fit: cover;
     }
-    .skip {
+    > .skip {
       opacity: 0;
       pointer-events: none;
       transition: opacity 0.5s;
@@ -178,7 +242,7 @@ export default {
         opacity: 1;
         pointer-events: auto;
       }
-      span {
+      > span {
         position: absolute;
         left: 50%;
         top: 50%;
@@ -187,7 +251,7 @@ export default {
     }
   }
 
-  button.music {
+  > button.music {
     position: absolute;
     width: 3.08rem;
     height: 3.08rem;
@@ -198,14 +262,14 @@ export default {
       height: 100%;
     }
   }
-  .title {
+  > .title {
     position: absolute;
     width: 39.63rem;
     top: 9.4%;
     left: 50%;
     transform: translateX(-50%);
   }
-  .button-group {
+  > .button-group {
     position: absolute;
     left: 50%;
     bottom: 8.08rem;