vue嵌套H5到APP，安卓键盘顶起页面内容错乱解决方案

1.h5嵌套到APP，input输入框页面被键盘顶起错乱

2.解决方案：不能使用定位，使用margin-top

3.如果想满屏兼容比如登陆页面 按钮在下面 不允许出现滚动则则需要手动计算margin-top的高度

4.需求 ：登陆页面内嵌H5，兼容各个类型的手机不允许出现滑动，满屏展示

<template>
	<view class="box" :style="minHeight">
		<view @click="goBack">
			<u-icon name="close" size="32"></u-icon>
		</view>
		<view class="bolid-text">注册CCAPP账号</view>
		<view class="think-text">推荐使用手机验证码登录</view>
		<view class="phone-text">手机号</view>
		<view class="input-sty">
			<u-input v-model="user.phoneNo" type="number" border="none" placeholder="请输入手机号" />
		</view>
		<view class="valide-text">短信验证码</view>
		<view class="input-sty">
			<view style="width: 80%;">
				<u-input v-model="user.verifyCode" type="number" border="none" maxlength="6" placeholder="请输入验证码" />
			</view>
			<view>
				<tui-countdown-verify :seconds="90" :successVal="successVal" @send="send" :params="1" radius="70rpx"
					borderColor="#05CBA3" color="#05CBA3" :resetVal="resetVal">
				</tui-countdown-verify>
			</view>
		</view>
		<view class="shop" v-show="chanelFlag">
			渠道门店：{{channelName}}
		</view>
		<view class="registersIos" :style="{backgroundColor: text =='注册' ? '#04CBA3' :'#696969 ',marginTop: minHeight}" @click="goSubmit">
			{{text}}
		</view>
		<view class="xieyiIos">
			继续即表示您同意 <text style="color: #05CBA3;margin: 0 10rpx;text-decoration: underline;" @click="goProtocol">
				用户协议</text> 和 <text style="color: #05CBA3;margin: 0 10rpx;text-decoration: underline;"
				@click="goPrivacy">隐私条款</text>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	// let wx1 = require("../../static/jweixin-1.6.0")
	import {
		ajax
	} from '@/ajax.js';
	import {
		setPageMinHeight
	} from '@/fn.js'
	import tuiCountdownVerify from "@/components/tui-countdown-verify.vue";
	import {
		loading,
		hideLoading,
	} from "@/fn.js";
	export default {
		components: {
			tuiCountdownVerify,

		},
		data() {
			return {
				uid: "",
				value: '',
				successVal: 0,
				iswx: false,
				resetVal: 0,
				channelName: '',
				text: '注册',
				user: {
					phoneNo: '',
					verifyCode: '',
					sharePhoneNo: '',
				},
				chanelFlag: false,
				system:'',
				minHeight:0
			}
		},
		mounted() {
			this.minHeight = uni.getSystemInfoSync().windowHeight - 350 + 'rpx' // 重要代码！！！计算出注册按钮到上个盒子的margin-top距离
			console.log(this.minHeight)
		},
		onLoad(e) {
			if (e.uid) {
				this.uid = e.uid
			}
			this.system = this.detectOS()
			console.log(this.system)
			if (e.sharePhoneNo) {
				uni.setStorageSync('sharePhoneNo', e.sharePhoneNo) //分享者的手机号码
			}
			// this.getChannel()
			if (uni.getStorageSync('sharePhoneNo')) {
				this.getChannel()
				this.chanelFlag = true;
			}
			let ua = window.navigator.userAgent.toLowerCase();
			if (ua.match(/MicroMessenger/i) == 'micromessenger') {
				this.iswx = true;
			}
		},

		onReady() {
			this.refCode = this.$refs.uCode;
		},
		methods: {
			/*用户协议*/
			goProtocol() {
				uni.navigateTo({
					url: '/pages/agreement/agreement'
				})
			},
			/*隐私政策*/
			goPrivacy() {
				uni.navigateTo({
					url: '/pages/agreement/clause'
				})
			},
			/*返回上一级别*/
			goBack() {
				uni.navigateBack(1)
			},
			/*获取渠道*/
			getChannel() {
				let that = this;
				ajax("get", '/health/channel/getBySharePhoneNo/' + uni.getStorageSync('sharePhoneNo')).then(res => {
					console.log('cc')
					console.log(res)
					console.log(res.hasOwnProperty("data"))
					console.log('cc')
					
					if(res.hasOwnProperty("data")){
						that.channelName = res.data.channelName
					}else{
						that.channelName = uni.getStorageSync('sharePhoneNo')
					}
				})
			},
			handleLaunchFn(e) {
				alert('success', e)
			},
			handleErrorFn(e) {
				alert('fail', e);
			},
			handleReadyFn(e) {
				alert('fail', e);
			},
			openMini() {
				loading()
				ajax('get', '/applet/nav/toApplet/' + this.uid).then(res => {
					hideLoading()
					let cData = JSON.parse(res.msg)
					location.href = cData.openlink
				});
			},
			/*发送验证码*/
			send() {
				let that = this;
				let reg = /^1[3456789]\d{9}$/;
				if (this.user.phoneNo == '') {
					this.resetVal++;
					this.$refs.uToast.show({
						message: '请输入手机号码',
						duration: 500
					})
					return false;
				}
				if (!reg.test(this.user.phoneNo)) {
					this.resetVal++;
					this.$refs.uToast.show({
						message: '手机号码不正确',
						duration: 500
					})
					return false;
				}
				// that.$u.api.getCode({
				// 	data: {
				// 		user: {
				// 			mobile: that.user.mobile
				// 		}
				// 	}
				// }).then(res => {
				// 	that.successVal++;
				// 	that.$refs.uToast.show({
				// 		message: '验证码已发送',
				// 	})
				// }).catch(err => {
				// 	that.resetVal++;
				// })
				ajax("get", "/health/user/getVerifyCode", {
					phoneNo: that.user.phoneNo
				}).then(res => {
					that.successVal++;
					that.$refs.uToast.show({
						message: '验证码已发送',
					})
				})
			},
			/*注册*/
			goSubmit() {
				let that = this;
				that.user.sharePhoneNo = uni.getStorageSync('sharePhoneNo')
				if (that.text == '注册') {
					ajax("post", "/health/user/login", that.user).then(res => {
						that.successVal++;
						that.$refs.uToast.show({
							message: '注册成功',
						})
						if (that.iswx) {
							let timer = setTimeout(() => {
								clearTimeout(timer)
								let timer = null;
								uni.navigateTo({
									url: '/pages/browser/index?sharePhoneNo='+ that.user.sharePhoneNo
								})
							}, 1000)
						} else {
							uni.navigateTo({
								url: '/pages/loadapp/loadapp?type=a&sharePhoneNo=' + that.user.sharePhoneNo
							})
						}
					}).then(res => {
						that.text = '注册成功'
					})
				} else {
					uni.navigateTo({
						url: '/pages/browser/index?sharePhoneNo='+ that.user.sharePhoneNo
					})
				}
			},
			/*判断页面是ios还是安卓*/
			detectOS() {
				var userAgent = navigator.userAgent || navigator.vendor || window.opera;

				// 检测iOS设备
				if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
					return 'iOS';
				}
				// 检测Android设备
				if (/Android/.test(userAgent)) {
					return 'Android';
				}
				// 如果不是iOS或Android，则返回其他
				return 'Other';
			},
		}
	}
</script>

<style scoped>
	.box {
		width: 100%;
		padding-top: 80rpx;
		padding-left: 76rpx;
		padding-right: 76rpx;
		box-sizing: border-box;
		height: 100vh;
		position: relative;
		/* overflow-y: scroll */
	}

	.bolid-text {
		font-family: PingFangSC, PingFang SC;
		font-weight: 800;
		font-size: 48rpx;
		color: #000000;
		margin-top: 74rpx;
	}

	.think-text {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #B6B6B6;
		margin-top: 12rpx;
	}

	.phone-text {
		font-family: PingFangSC, PingFang SC;
		font-weight: 800;
		font-size: 32rpx;
		color: #000000;
		margin-top: 86rpx;
	}

	.valide-text {
		font-family: PingFangSC, PingFang SC;
		font-weight: 800;
		font-size: 32rpx;
		color: #000000;
		margin-top: 52rpx;
	}

	.input-sty {
		border-bottom: 2rpx solid #E6E6E6;
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		padding-bottom: 16rpx;
	}

	.u-input {
		padding: 12rpx 0 !important;
	}

	.shop {
		box-sizing: border-box;
		margin-top: 62rpx;
		height: 96rpx;
		border-radius: 12rpx;
		border: 2rpx solid #04CBA3;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 28rpx;
		color: #04CBA3;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		word-break:break-all;
		padding-left: 20rpx;
		padding-right: 20rpx;
		box-sizing: border-box;
		background-color: #E5FAF5;
		position: absolute;
		top: 725rpx;
		left: 76rpx;
	}

	.registersAndro {
		width: 60%;
		height: 88rpx;
		border-radius: 12rpx;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 200rpx
	}
	
	.registersIos{
		width: 60%;
		height: 88rpx;
		border-radius: 12rpx;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
		/* margin-top: calc(100vh - 1000rpx); */
	}
	
	.xieyiAndro {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #919191;
		margin: 40rpx auto 0;
		text-align: center;
	}
	.xieyiIos{
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #919191;
		text-align: center;
		width: 100%;
		margin-top: 52rpx;
	}
</style>