uniapp微信小程序兼容性问题记录（持续记录）-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp微信小程序兼容性问题记录（持续记录）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

开发环境版本

“vue”: {
“version”: “2.6.14”
}
“uview-ui”: {
“version”: “1.8.7”
},

全局组件引用的问题

uniapp微信小程序兼容性问题记录（持续记录）

用如上方式在H5端运行时没有问题的，但在微信小程序端就找不到组件，所以修改为全部在main.js中引入

官方解释如下

https://ask.dcloud.net.cn/question/145410

u-popup设置top弹出模式时H5端运行正常，微信小程序端设置margin-top想不遮挡navBar却无效

<u-popup class="info-top" v-model="show" z-index="10" mode="top" :style="{ 'margin-top': popTop + 'px' }">
			<view class="content">
				<view class="box">
					<view class="item u-flex u-font-28 color-666" style="border-bottom: 1rpx solid #F3F3F3;">
						<text>报货时间</text>
						<text class="u-flex" style="color: #999999;" @click="choiceDate">{{ startTime }}至{{ endTime }}
							<i class='iconfont icon-xiangyou2'></i> </text>
					</view>
				</view>
				<view class="confrim-btn u-flex">
					<view class="reset button u-font-28 u-text-center" @click="reset">
						重置
					</view>
					<view class="ok button u-font-28 u-text-center" @click="ok">
						筛选
					</view>
				</view>
			</view>
		</u-popup>

if (!this.popTop) {
					this.popTop = await this.getNavBar()
				}
				console.log(this.popTop)
				this.show = !this.show

getNavBar() {
				return new Promise(resolve => {
					setTimeout(() => {
						this.$u.getRect('.header').then(res => {
							console.log('res.height', res.height);
							resolve(res.height)
						})
					}, 0)

				})
			}

H5端运行效果
uniapp微信小程序兼容性问题记录（持续记录）
微信小程序端运行效果

一开始以为：style没起作用，后面自己手写了一个popup后发现是u-popup可能存在兼容性问题
修改代码如下：

<!-- 顶部弹窗，解决微信小程序top从最顶端出来，margin-top不起作用 -->
		<view class="popup u-p-l-18 u-p-r-18" v-show="show" @click="show=false" @touchmove.prevent>
			<view class="content" :style="{ 'margin-top': popTop + 'px' }">
				<view class="box">
					<view class="item u-flex u-font-28 color-666" style="border-bottom: 1rpx solid #F3F3F3;">
						<text>报货时间</text>
						<text class="u-flex" style="color: #999999;" @click="choiceDate">{{ startTime }}至{{ endTime }}
							<i class='iconfont icon-xiangyou2'></i> </text>
					</view>
				</view>
				<view class="confrim-btn u-flex">
					<view class="reset button u-font-28 u-text-center" @click="reset">
						重置
					</view>
					<view class="ok button u-font-28 u-text-center" @click="ok">
						筛选
					</view>
				</view>
			</view>
		</view>

/* 上弹框 */
	.popup {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.6);
		z-index: 9998;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}
	
	.content {
		position: relative;
		width: 100%;
		top: 0;
		background-color: #fff;
		z-index: 9999;
		.box {
			padding: 32rpx;
	
			.item {
				justify-content: space-between;
	
				padding-bottom: 32rpx;
			}
		}
	}
	
	.confrim-btn {
		.button {
			width: 50%;
			height: 80rpx;
			line-height: 80rpx;
		}
	
		.reset {
			background-color: #F3F3F3;
		}
	
		.ok {
			background-color: #F4613F;
			color: white;
		}
	}
	
	.btn {
		padding: 12rpx 20rpx;
		border-radius: 32rpx;
		background: linear-gradient(90deg, #F4613F 0%, #EA2E02 100%);
		margin-left: 16rpx;
		color: white;
		font-size: 28rpx;
	}

H5端运行效果
uniapp微信小程序兼容性问题记录（持续记录）

微信小程序运行效果
uniapp微信小程序兼容性问题记录（持续记录）
只是没做折叠的过渡动画了，其他运行正常文章来源地址https://www.toymoban.com/news/detail-485765.html

自定义tabbar，windowHeight的高度包不包括设置的tabBar高度

async getHeight() {
				let header = await this.$u.getRect('.header')
				let bar = await this.$u.getRect('.bottomTab')


				let windowHeight = await uni.getSystemInfoSync().windowHeight
				console.log("offer-header", header)
				console.log("offer-bar", bar)
				console.log("offer-windowHeight", windowHeight)
				const type = uni.getSystemInfoSync().uniPlatform
				if (type == 'mp-weixin') {
					this.scrollViewHeight = parseFloat(windowHeight - header.height)
				} else {
					this.scrollViewHeight = parseFloat(windowHeight - header.height - bar.height)
				}

				console.log("offer-scrollViewHeight", this.scrollViewHeight)
				// this.scrollViewHeight = parseFloat(this.windowHeight) - res.height - 50			
}