uniapp中登录注册页面以视频为背景

最近在做一个注册页面，背景是一个视频。由于使用uniapp开发的，所以这坑只能慢慢爬

官网建议使用nvue做关于视频的页面。所以这个页面也是用nvue做的。

大坑：在app端使用nvue页面不能设置高度，所以需要设置高度的地方在CSS中使用条件编译

话不多说上代码

<template>
	<view class="login-box" :style="{height:screenHeight+'px'}">
		<view class="video-background">
			<video
				id="videoRef"
				src="https://klxxcdn.oss-cn-hangzhou.aliyuncs.com/histudy/hrm/media/bg1.mp4"
				object-fit="cover"
				:autoplay="true"
				:controls="false"
				:muted="true"
				:loop="true"
				:enable-progress-gesture="false"
				class="video"
			/>
		</view>
		<view class="register-top">
				<text class="text1">
				嗨~
				</text>
				<text class="text1">
				啦啦啦 
				</text>
				<text class="text2 text22">
				nvue每一个text标签就是一行
				</text>
		</view>
	</view>
</template>

<script lang="ts">
import {
	defineComponent, ref, reactive,
} from 'vue'

export default defineComponent({
	name: 'PageRegister',
	setup() {
		// 获取屏幕高宽
		function getScreenHeight():void {
			const that = this
			uni.getSystemInfo({
				success(res:any) {
					// #ifndef H5
					that.screenHeight = res.screenHeight
					// #endif
					// #ifdef H5
					console.log(res)
					that.screenHeight = res.windowHeight
					// #endif
				    // 判断menuBtnLeft 是否为0
					if (that.getMenuBtnInfoCom.left === 0) {
						// 如果为0,代表没胶囊。屏幕宽度-左边的安全距离-定位的宽度-右边的安全距离-预留小小位置，剩余便是搜索栏宽度
						that.searchBarWidth = (res.screenWidth - 24 - 60 - 24 - 30)
					} else {
						// 算出比例
						const p = res.windowWidth / 750
						that.searchBarWidth = that.getMenuBtnInfoCom.left - (48 * p) - 20
					}
				},
			})
			uni.setStorageSync('screenInfo', that.screenHeight)
		}
		return {
			VideoContext,
			getScreenHeight,
			screenHeight
		}
	},
	onShow() {
		// 当app切到后台再切回前台的时候会触发onShow这个时候视频应该继续播放，不这样做视频会暂停的
		this.$nextTick(() => {
			this.VideoContext = uni.createVideoContext('videoRef', this)
			this.VideoContext.play()
		})
		this.getScreenHeight()
	},
})

</script>

<style scoped lang="scss">
	$text-muted: #999;
	$text-light: #fff;
.login-box {
	position: relative;
	padding-left: 56rpx;
	padding-right: 56rpx;
	.video-background {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		/* #ifdef MP-WEIXIN || H5 */
		width: 100vw;
		height:100vh;
		/* #endif */
		.video {
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			/* #ifdef MP-WEIXIN || H5 */
			width: 100%;
			height: 100%;
			/* #endif */
		}
	}
}
</style>

最后发现app下面显示不全，经过调试发现需要给页面一个高度，所以直接获取系统的高度动态赋值给login-box。就是第一行内容：

	<view class="login-box" :style="{height:screenHeight+'px'}">