混合式App开发 Apicloud 官方iPhone X 适配
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 适配的更多相关文章
- hybird app(混合式app开发)cordova ionic 创建相应平台的app
hybird app(混合式app开发) 之ionic 框架平台 guide cordova 创建相应平台的app 1. npm install -g cordova //全局安装cordova-cl ...
- HTML5来了:5个好用的混合式App开发工具
在残酷的移动互联网竞争环境下, HTML5技术一直受到各方关注,“HTML5颠覆原生 App”的争论也从未停止过,不管怎样HTML5生态的构建方兴未艾.不过对于移动开发者来说更关心的问题是如何低成本. ...
- iOS开发点滴:iPhone屏幕适配
最近开始做iOS开发,遇到一些小问题和解决方法,记录下. 今天是iPhone屏幕适配 iPhone5出来之后屏幕就有iPhone就有了2种尺寸:3.5寸和4寸,xcode 5 的IB设计器里面界面 ...
- 混合式APP开发中中间件方案Rexsee
发现Rexsee时,他已经一年多没有更新过了,最后版本是2012年的. 他的实现思路是通过Android自带的Java - Javascript 桥机制,在WebView中的JavaScript同Ja ...
- 项目实战 - 混合式App开发
为何要使用混合式开发? 要说为什么使用Hybrid App [混合式开发],就要先了解什么是Native App[原生程序], Web App[网站程序]. Native App 是专门针对某一类移动 ...
- hybrid app开发中用到的html5新特性localStorage、sessionStorage和websql database
近期在项目中进行hybrid app开发,项目中有大量的js代码执行在android设备上. 使用到了非常多HTML5的新特性,之前没有遇到过,不了解.这里记录下添加点前端的知识.混合式app开发中. ...
- ARC官方文档翻译! - iPhone App开发外包专区 - 威锋论坛 - 威锋网
CHENYILONG Blog ARC官方文档翻译! - iPhone App开发外包专区 - 威锋论坛 - 威锋网 http://bbs.weiphone.com/read-htm-tid-344 ...
- day97:MoFang:移动端APP开发准备&移动端项目搭建&APICloud前端框架
目录 1.移动端开发相关概念 1.APP类型 2.移动端屏幕介绍 3.移动端自适配方案 4.元信息(meta) 2.APP开发准备 1.注册APPCLoud账号 2.下载APP开发编辑器 3.下载AP ...
- phongap、APICloud、ionic等app开发平台你都知道吗?
大众创业热,很多人都想在互联网大展拳脚,然而大部分人却是非技术背景.针对这个行业痛点,现在国内外涌现出众多APP开发工具,开发者只要有相关的HTML5.CSS和JavaScript知识,便可以轻松快速 ...
随机推荐
- 题解 P1765 【手机_NOI导刊2010普及(10)】
说实话,打表真的很累! 所以小金羊又开始暴力出奇迹了! 这个题解适合初学者使用. 知识点:string里面的str.find()函数: 可以查找字符串和字符,有就返回位置(开头是0), 没有就返回st ...
- TCP的拥塞控制 (四)
TCP NewReno NewReno是在Reno的基础上,改进了Fast Recovery,主要思想是保证处于network中的packet的总量是饱和的. 在Reno算法中,一个超时会导致相 ...
- Contest Record
Contest 1135 at HZOI Problem A: 优美的棋发现一个可以证明的规律就是了……忘记给<<运算的左边变量转化为long long类型了,结果挂了20分……以后一定记 ...
- Caffe框架详细梳理
protobuf是google公司开发的,并在Google内部久经考验的一个东西,在08年google把它贡献给了开源社区,随后便有越来越多的人使用它.protobuf是一个结构化信息传递的工具,主要 ...
- Python3 字典 clear()方法
Python3 字典 描述 Python 字典 clear() 函数用于删除字典内所有元素. 语法 clear()方法语法: dict.clear() 参数 NA. 返回值 该函数没有任何返回值. ...
- opencv2 直方图之calchist函数使用(转)
OpenCV提供了calcHist函数来计算图像直方图. 其中C++的函数原型如下:void calcHist(const Mat* arrays, int narrays, const int* c ...
- HDU4003 树形DP
题意 :给一棵n个节点的树, 节点编号为1~n, 每条边都有一个花费值. 有k个机器人从S点出发, 问让机器人遍历所有边,最少花费值多少? 这题最难的地方应该就是如何定义状态了 定义dp ...
- mac pro电脑怎么安装rabbitmq
第一:依次执行以下命令: 1. /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/inst ...
- TC规则
633人阅读 TC规则涉及到 队列(QUEUE) 分类器(CLASS) 过滤器(FILTER),filter划分的标志位可用U32或iptables的set-mark来实现 ) 一般是" ...
- Exchange-fanout 广播模式
一.前言 我们看到生产者将消息投递到Queue中,实际上这在RabbitMQ中这种事情永远都不会发生.实际的情况是,生产者将消息发送到Exchange(交换器,下图中的X),由Exchange将消息路 ...