feat: 微信浏览器增加播放按钮

pages.json

@@ -32,6 +32,7 @@
 		}
 	],
 	"globalStyle": {
+		"navigationStyle": "custom",
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "uni-app",
 		"navigationBarBackgroundColor": "#F8F8F8",

pages/index/index.vue

@@ -1,5 +1,9 @@
 <template>
 	<view class="container">
+		<view v-if="showPlayIcon" class="wx-play-mask" @click="handlePlay">
+			<image class="wx-play-mask__icon" src="../../static/play.png" />
+		</view>
+
 		<view class="loading" v-if="loadingState" :class="[loadingOutAnime?'loadingOut':'']">
 			<view class="loadingBox" v-if="loadPointState">
 				<span class="span1"></span>
@@ -59,9 +63,12 @@
 </template>
 
 <script>
+	const ua = window.navigator.userAgent.toLowerCase()
+
 	export default {
 		data() {
 			return {
+				showPlayIcon: ua.match(/MicroMessenger/i) == 'micromessenger',
 				loadPointState: false,
 				logoImg: "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/logo.png",
 				loadingState: true,
@@ -74,7 +81,7 @@
 				loadingText: "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/loading.jpg",
 				audioUrl: "",
 				webUrl: "https://dadu.oss-cn-hangzhou.aliyuncs.com/api/getHtml",
-				audioState: true,
+				audioState: false,
 				innerAudioContext: "",
 				imgShowIndex: "close",
 				videoBgPath: "https://dadu.oss-cn-hangzhou.aliyuncs.com/static/zhongduxiu/video/bg.mp4",
@@ -174,6 +181,11 @@
 			},
 			closeContent() {
 				this.imgShowIndex = 'close'
+			},
+			handlePlay() {
+				this.videoCtx.play()
+				this.changeAudio()
+				this.showPlayIcon = false
 			}
 		},
 		onLoad() {
@@ -187,6 +199,7 @@
 			this.audioState = false
 		},
 		onShow() {
+			if (this.showPlayIcon) return
 			this.audioState = true
 			if (this.innerAudioContext) {
 				this.innerAudioContext.play()
@@ -207,7 +220,22 @@
 		height: 100vh;
 		overflow: hidden;
 	}
-
+	.wx-play-mask {
+		position: absolute;
+		top: 0;
+		left: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 750rpx;
+		height: 1624rpx;
+		background: rgba(0, 0, 0, 0.6);
+		z-index: 9999;
+	}
+	.wx-play-mask__icon {
+		width: 128upx;
+		height: 128upx;
+	}
 	@media screen and (max-height: 750px) {
 		.container {
 			overflow: visible !important;
@@ -224,7 +252,7 @@
 		left: 0;
 		width: 100vw;
 		height: 100vh;
-		z-index: 9999999;
+		z-index: 9998;
 		background: #4c4c4c;
 		display: flex;
 		justify-content: center;