uniapp多端注意事项整理

1、微信小程序兼容问题

1、微信小程序不支持公共css背景图

//微信小程序不支持
.class{ background: top center url() no-repeat #fff;} 
//可替换为，用样式来控制图片位置
<image src=""></image>

//页面内部背景图微信小程序是支持的
<style scoped>
.main_bar{
	background:top center url(../../static/my-bgm.jpg) no-repeat;
	background-size: 100% auto;
}
</style>

2、微信小程序顶部导航右侧有胶囊，如果自定义样式需要将此版块宽度遗留出来；胶囊宽度约为90px,180rpx

3、关于icon标签，h5及APP修改的标签为uni-icon，而微信小程序修改的为icon

.result-desc uni-icon{
	margin-right: 12rpx;
}
/* #ifdef MP-WEIXIN */
.result-desc icon{
	margin-right: 12rpx;
}
/* #endif */

2、自定义导航问题

//css样式
/*电池*/
.public-statusBar { height: var(--status-bar-height); width:100%; background:#fff; position: fixed; left: 0px; top:0px; right:0px; z-index:1000;}
/* 自定义头部 */
.public-navBar{}
.public-navCon{ background:#fff; display:flex; position: fixed; left: 0px; top:var(--status-bar-height); right:0px; z-index:1000;}
.public-navLeft,.public-navRight{ height:88rpx; display: flex; align-items: center;}
.public-navLeft,.public-navRight{ width:18%; display: flex; align-items: center; color:$textColor; font-size:24rpx;}
.public-navLeft{ padding-left:32rpx;}
.public-navLeft-avatar{ width:68rpx; height:68rpx; border-radius:50%; overflow: hidden;}
.public-navLeft-avatar image{ width:100%; height:100%;}
.public-navMiddle{ height:88rpx; line-height: 88rpx; width:64%; overflow:hidden;text-overflow:ellipsis;white-space: nowrap; font-size:34rpx; color:#000; text-align:center;}
.public-navRight{padding-right:32rpx; justify-content:flex-end;}
.public-navRight-image{ width:28rpx; height:28rpx; margin-right: 5px;}
.public-navRight-icon{ margin-right: 5px;}
//自定义导航间隔
.public-navJG{ width: 100%; height:calc(var(--status-bar-height) + 88rpx);}


//html
<!-- 状态栏 -->
<view class="public-statusBar"></view>
<!-- 状态栏end -->
<!-- 导航栏 -->
<view class="public-navBar">
	<view class="public-navCon">
		<view @tap="$util.navBack()" class="public-navLeft" open-type="switchTab">
			<uni-icons type="left" style="margin-left: -20rpx;" color="#000" size="26" />
		</view>
		<view class="public-navMiddle">自定义导航</view>
		<view class="public-navRight">
			<text class="iconfont public-navRight-icon" :class="{ 'fontColor-main': boxShow }">&#xe75e;</text>
			<view :class="{ 'fontColor-main': boxShow }">右侧</view>
		</view>
	</view>
	<view class="public-navJG"></view>
</view>
<!-- 导航栏end -->

备注：如果页面使用到了public-statusBar 类，但未使用导航，未使用public-navJG来占位，APP、小程序和h5需要用到–status-bar-height来区分样式兼容

3、定位问题

顶部定位及底部定位，不能直接用top:0；或者bottom:0；直接以偏概全，需要考虑到APP小程序的顶部状态栏及底部导航栏

.topFixed{
	position: fixed;
	top: var(--status-bar-height);
	left: 0px;
	right: 0px;
	height: 100rpx;
	border:1px solid #f00;
	z-index: 100000;
}
.bottomFixed{
	position: fixed;
	bottom: var(--window-bottom);
	left: 0px;
	right: 0px;
	height: 100rpx;
	border:1px solid #f00;
	z-index: 100000;
}

例二：固定顶部的tab切换

/*--------------   公共tab切换   --------------*/
.pub_tabBar{
	width:100%;
	background: $whiteColor;
	display: flex;
	position: fixed;
	// top: calc(var(--status-bar-height) + 88rpx);//错误写法
	top:var(--window-top);
	left: 0px;
	right: 0px;
	z-index: 10;
}
.pub_tabList{
	flex:1;
	height: 90rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
}
.pub_tabName{
	font-size: 32rpx;
	color: $placeholderColor;
	font-weight:600;
}
.pub_tabActive .pub_tabName{
	color: $mainColor;
}
.pub_tabList text{
	background-color: $whiteColor;
	width:56rpx;
	height:3px;
	border-radius:2px;
	position:absolute;
	bottom:5px;
	left: 50%;
	margin-left:-28rpx;
}
.pub_tabActive text{
	background-color: $mainColor;
}
.pub_tabJG{
	width: 100%;
	height: 90rpx;
	background-color: #FE5E42;
}