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. 集成学习—boosting和bagging异同

    集成学习 集成学习通过构建并结合多个学习器来完成学习任务.只包含同种类型的个体学习器,这样的集成是“同质”的:包含不同类型的个体学习器,这样的集成是“异质”的.集成学习通过将多个学习器进行结合,常可获 ...

  2. AFNetworking你最最最起码要知道的基本使用~

    AFNetworking是一个在iOS开发中,使用非常多的一个开源库 适用于iOS以及Mac OS X, 它构建于在(Apple iOS开发文档)NSURLConnection, NSOperatio ...

  3. BZOJ 1190 梦幻岛宝珠(分组01背包)

    跑了7000ms... 这是个体积和价值都超大的背包.但是体积保证为a*2^b的(a<=10,b<=30)形式.且n<=100. 于是可以想到按b来分组.这样的话每组最多为a*n*2 ...

  4. 高斯消元模板(pascal)

    洛谷P3389评测 program rrr(input,output); const eps=1e-8; var a:..,..]of double; n,i,j,k:longint; t:doubl ...

  5. shell的tr命令

    tr,translate的简写,即翻译的意思.主要用来从标准输入中通过替换或删除操作进行字符转换.只接受标准输入,不接受文件参数. 命令语法: tr [–c/d/s/t] [SET1] [SET2] ...

  6. python中括号的使用

    1. 列表list是用[ ]包住的以逗号分隔的数据集合 所有对列表的解析均采用[ ],不论是元素引用或取值 [ ]表示空列表 2. 字典由键-值(key-value)对构成,一般可采用{ }表示 取字 ...

  7. 【BZOJ5306】[HAOI2018]染色(NTT)

    [BZOJ5306]染色(NTT) 题面 BZOJ 洛谷 题解 我们只需要考虑每一个\(W[i]\)的贡献就好了 令\(lim=min(M,\frac{N}{S})\) 那么,开始考虑每一个\(W[i ...

  8. C/C++语言中让电脑随机的在某个范围中的任一随机数

    这是我在笔试中碰见的一题中一部分,这就就记录下来.举例,输出[1,3]中任一随机数. #include<iostream> #include<cstdlib> #include ...

  9. MSF下ms17_010_psexec模块使用技巧

    0x01 前言 MS17-010 的psexec是针对Microsoft Windows的两款最受欢迎的漏洞进行攻击. CVE-2017-0146(EternalChampion / EternalS ...

  10. 【题解】【LibreOJ Beta Round #5】游戏 LOJ 531 基环树 博弈论

    Prelude 题目链接:萌萌哒传送门♪(^∇^*) Subtask 1 & 2 这是什么鬼题面... 首先要看出,这就是一个基环树博弈. 具体题意:给出一个基环内向树,一个棋子初始在\(1\ ...