请选择 进入手机版 | 继续访问电脑版
热门问答
更多

[App引擎] 【重要】App Store新规:iOS所有应用将必须适配iPhone X

  [复制链接]
技术咨询-Kenny 发表于 2017-10-19 16:27:55
本帖最后由 技术咨询-Kenny 于 2021-7-24 13:58 编辑

2018年2月15日,苹果发布公告内容:https://developer**.**/news/?id=02152018a QQ图片20180226181218.png
2018年2月16日互联网资讯(详细阅读),苹果官方向开发者发出通知,规定2018年4月开始,所有递交至App Store的新应用,包括通用应用必须使用iOS 11 SDK编译。这意味着,开发者必须使用Xcode 9或更新的版本,且开发者必须保证自己的iOS应用可以完美适配iPhone X的5.8英OLED显示屏。


APICloud平台适配iPhone X教程

由于iPhone X的特殊造型,为了方便开发者对iPhone X进行适配,苹果在iOS 11中引入了Safe Area的概念,引擎也在api对象下添加了safeArea属性safeareachanged事件,UI设计准则是页面重要的元素需要在安全区域以内,避免被遮挡。

对于大多数应用,通过以下几步基本就可以完成iPhone X的适配,其它的特殊情况如横竖屏切换等则需要结合使用场景另外处理。

:如果没有iPhone X真机,有需求的开发者可以到这里下载iOS的模块开发工程,使用Xcode9及更高版本将项目运行在iPhone X模拟器上面调试。

、解决顶部header被遮挡

由于iPhone X顶部的特殊形状,状态栏高度不再是以前的20px,而是变成了44px,如果应用开启了沉浸式效果,那么页面顶部会被遮住部分,如图:

WX20171019-114609.png

找到api.js中的fixIos7Bar、fixStatusBar方法,用以下代码替换即可。

u.fixIos7Bar = function(el){
    return u.fixStatusBar(el);
};
u.fixStatusBar = function(el){
    if(!u.isElement(el)){
        console.warn('$api.fixStatusBar Function need el param, el param must be DOM Element');
        return 0;
    }
    el.style.paddingTop = api.safeArea.top + 'px';
    return el.offsetHeight;
};


修改过后的顶部效果如图:

WX20171019-114707.png


二、解决底部标签栏被虚拟home键遮挡

由上面的图可以看到,页面底部的标签栏也被虚拟home键遮挡住了部分。对于虚拟home键,可以通过openWin和setWinAttr方法的hideHomeIndicator参数来控制显示隐藏,这对于沉浸式体验较高的场景很有用(比如观看视频)。而一般的页面通常的做法是避开虚拟home键,这里参考header的处理,我们在api.js中添加一个fixTabBar方法:

u.fixTabBar = function(el){
    if(!u.isElement(el)){
        console.warn('$api.fixTabBar Function need el param, el param must be DOM Element');
        return 0;
    }
    el.style.paddingBottom = api.safeArea.bottom + 'px';
    return el.offsetHeight;
}


然后在需要的地方进行调用:$api.fixTabBar($api.byId('footer')),修改后的效果如图:

WX20171019-121500.png










WX20171019-112337.png

113条回复

不想规则的三角形 新手上路 165Y币
666 广告位出租
APICloud--玲玲 萌萌的小学生 340Y币
6666,大家记得收藏哦
杨愿 职业车手 2782Y币
火钳刘明
哈哈哈哈 业余车手 731Y币
不改api.js能不能实现自动适配
SC_Chen 转正司机 2440Y币
头部的方法是不是不适应安卓系统?
用过都说好 实习司机 194Y币
可以,不错
技术咨询-Kenny 官方版主 7851Y币
SC_Chen 发表于 2017-10-19 16:54
头部的方法是不是不适应安卓系统?

iOS和安卓都适应
技术咨询-Kenny 官方版主 7851Y币
哈哈哈哈 发表于 2017-10-19 16:49
不改api.js能不能实现自动适配

如果你以前就是用的api.js,那么改api.js是比较好的选择。如果项目没有开启沉浸式效果,那么顶部就不用单独适配,只需要看下底部。
tanjingwaini 职业车手 4727Y币
本帖最后由 tanjingwaini 于 2017-10-19 19:46 编辑

注:由于iPhone X目前尚未发布,无法真机测试

就算有iPhone X真机也买不起哈,官方啥时候送一台给兄弟们
12345678910... 12下一页
您需要登录后才可以回帖 登录

本版积分规则