小程序ios/安卓移动端兼容问题

原创已于 2025-02-10 23:00:41 修改 · 699 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2022-04-28 18:12:13 首次发布

本文探讨了如何解决iPhone X及以上型号手机底部出现的安全区域黑条问题，并提到了在iOS真机上日期格式处理的技巧。同时介绍了如何使用env()和constant()函数适配安全区域。

iphoneX 及以上底部存在黑条

方案：


mounted() {
	this.$nextTick(()=>{
	     uni.getSystemInfo({ 
	         success:(res)=> { //成功回调函数
	             if(res.model.indexOf('iPhone X') !== -1 || 
	             res.model.indexOf('iPhone 11') !== -1 || 
	             res.model.indexOf('iPhone 12') !== -1 || 
	             res.model.indexOf('iPhone 13') !== -1){
	                 this.safetyBottom = true
	             }
	         }
	     })
	 })
	},

.safetyBottom{
	padding-bottom: constant(safe-area-inset-bottom); 
	padding-bottom: env(safe-area-inset-bottom);
}


/**
	env() 和 constant()是IOS11新增的css函数，有四个预定义的变量
	safe-area-inset-bottom、safe-area-inset-top、safe-area-inset-left、
	safe-area-inset-right，
	分别是安全区域到各边界的距离，此时我们只需要关心afe-area-inset-bottom
	（横竖屏的情况下是不一样的）。对于不支持这两个属性的情况，浏览器会忽略。
*/

ios 真机不能解析YYYY-MM-DDDD格式 date.getYear()/ getFullYear()/getMonth(); 返回NaN

方案

	let dateStr = '2022-01-01'; 
	dateStr = dateStr.replace(/\-/g, '/'); // 将'-'符号替换成'/'
	let dataTime = new Date(dateStr).getTime();

键盘弹出导致页面布局错乱

iOS：键盘弹出时会将整个页面顶起，可能导致页面元素错位。

Android：键盘可能遮挡输入框，且不会自动调整页面布局。

方案

监听键盘高度并动态调整布局：

wx.onKeyboardHeightChange(res => {
  const keyboardHeight = res.height;
  this.setData({ paddingBottom: keyboardHeight + 'px' });
});

使用 scroll-view 包裹输入区域：

<scroll-view scroll-y style="height: 100vh;">
  <input bindfocus="onInputFocus" />
</scroll-view>

手动聚焦输入框并滚动到可视区域：

onInputFocus(e) {
  wx.pageScrollTo({
    selector: '#input-id',
    duration: 300
  });
}

ios两个滚动条

方案
使用 scroll-view 的 enhanced 属性

<scroll-view enhanced scroll-y style="height: 100vh;">
  <!-- 内容 -->
</scroll-view>