iPhone X 适配

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

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

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

一、上传iPhone X启动图

进入控制台端设置,上传iPhone X启动图,图片尺寸为1125*2436,运行效果如下图。若未上传对应的iPhone X启动图或者启动图格式不正确,应用运行在iPhone X上面时上下将有大黑边,不能全屏运行。

二、解决顶部header被遮挡

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

 

找到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;
};

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

 

三、解决底部标签栏被虚拟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')),修改后的效果如图:

 

PS: 入坑说明

  • Apicloud 里面的App没有全屏模式
    云编译要求上传iPhoneX的启动页,不传不全屏
  • 没有iPhoneX手机,开发调试怎么玩
    更新IOS 10.3 安装新版Xcode,不更新,新的Xcode安装不了,不是新Xcode 没有iPhoneX的模拟器,
    Apicloud 下载模块开发示例项目,在Xcode里跑起来
    没有苹果电脑,那就算了
  • 苹果宣布,四月份全部App适配 iPhoneX
    商店审核不过,如果不更新,不影响

混合式App开发 Apicloud 官方iPhone X 适配的更多相关文章

  1. hybird app(混合式app开发)cordova ionic 创建相应平台的app

    hybird app(混合式app开发) 之ionic 框架平台 guide cordova 创建相应平台的app 1. npm install -g cordova //全局安装cordova-cl ...

  2. HTML5来了:5个好用的混合式App开发工具

    在残酷的移动互联网竞争环境下, HTML5技术一直受到各方关注,“HTML5颠覆原生 App”的争论也从未停止过,不管怎样HTML5生态的构建方兴未艾.不过对于移动开发者来说更关心的问题是如何低成本. ...

  3. iOS开发点滴:iPhone屏幕适配

    最近开始做iOS开发,遇到一些小问题和解决方法,记录下.   今天是iPhone屏幕适配 iPhone5出来之后屏幕就有iPhone就有了2种尺寸:3.5寸和4寸,xcode 5 的IB设计器里面界面 ...

  4. 混合式APP开发中中间件方案Rexsee

    发现Rexsee时,他已经一年多没有更新过了,最后版本是2012年的. 他的实现思路是通过Android自带的Java - Javascript 桥机制,在WebView中的JavaScript同Ja ...

  5. 项目实战 - 混合式App开发

    为何要使用混合式开发? 要说为什么使用Hybrid App [混合式开发],就要先了解什么是Native App[原生程序], Web App[网站程序]. Native App 是专门针对某一类移动 ...

  6. hybrid app开发中用到的html5新特性localStorage、sessionStorage和websql database

    近期在项目中进行hybrid app开发,项目中有大量的js代码执行在android设备上. 使用到了非常多HTML5的新特性,之前没有遇到过,不了解.这里记录下添加点前端的知识.混合式app开发中. ...

  7. ARC官方文档翻译! - iPhone App开发外包专区 - 威锋论坛 - 威锋网

    CHENYILONG Blog ARC官方文档翻译! - iPhone App开发外包专区 - 威锋论坛 - 威锋网  http://bbs.weiphone.com/read-htm-tid-344 ...

  8. day97:MoFang:移动端APP开发准备&移动端项目搭建&APICloud前端框架

    目录 1.移动端开发相关概念 1.APP类型 2.移动端屏幕介绍 3.移动端自适配方案 4.元信息(meta) 2.APP开发准备 1.注册APPCLoud账号 2.下载APP开发编辑器 3.下载AP ...

  9. phongap、APICloud、ionic等app开发平台你都知道吗?

    大众创业热,很多人都想在互联网大展拳脚,然而大部分人却是非技术背景.针对这个行业痛点,现在国内外涌现出众多APP开发工具,开发者只要有相关的HTML5.CSS和JavaScript知识,便可以轻松快速 ...

随机推荐

  1. 题解 P1765 【手机_NOI导刊2010普及(10)】

    说实话,打表真的很累! 所以小金羊又开始暴力出奇迹了! 这个题解适合初学者使用. 知识点:string里面的str.find()函数: 可以查找字符串和字符,有就返回位置(开头是0), 没有就返回st ...

  2. TCP的拥塞控制 (四)

     TCP NewReno   NewReno是在Reno的基础上,改进了Fast Recovery,主要思想是保证处于network中的packet的总量是饱和的. 在Reno算法中,一个超时会导致相 ...

  3. Contest Record

    Contest 1135 at HZOI Problem A: 优美的棋发现一个可以证明的规律就是了……忘记给<<运算的左边变量转化为long long类型了,结果挂了20分……以后一定记 ...

  4. Caffe框架详细梳理

    protobuf是google公司开发的,并在Google内部久经考验的一个东西,在08年google把它贡献给了开源社区,随后便有越来越多的人使用它.protobuf是一个结构化信息传递的工具,主要 ...

  5. Python3 字典 clear()方法

     Python3 字典 描述 Python 字典 clear() 函数用于删除字典内所有元素. 语法 clear()方法语法: dict.clear() 参数 NA. 返回值 该函数没有任何返回值. ...

  6. opencv2 直方图之calchist函数使用(转)

    OpenCV提供了calcHist函数来计算图像直方图. 其中C++的函数原型如下:void calcHist(const Mat* arrays, int narrays, const int* c ...

  7. HDU4003 树形DP

    题意 :给一棵n个节点的树, 节点编号为1~n, 每条边都有一个花费值.        有k个机器人从S点出发, 问让机器人遍历所有边,最少花费值多少? 这题最难的地方应该就是如何定义状态了 定义dp ...

  8. mac pro电脑怎么安装rabbitmq

    第一:依次执行以下命令: 1.  /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/inst ...

  9. TC规则

    633人阅读   TC规则涉及到 队列(QUEUE) 分类器(CLASS) 过滤器(FILTER),filter划分的标志位可用U32或iptables的set-mark来实现 ) 一般是" ...

  10. Exchange-fanout 广播模式

    一.前言 我们看到生产者将消息投递到Queue中,实际上这在RabbitMQ中这种事情永远都不会发生.实际的情况是,生产者将消息发送到Exchange(交换器,下图中的X),由Exchange将消息路 ...