记一次 Weex 的 iPhone X 适配
前言
iPhone X 上市也一月有余了,「齐刘海」的设计给全世界的 IOS 和 M 站开发人员出了一道兼容题目,默认效果问题虽不严重,但是足以逼疯强迫症患者。幸得项目「空窗期」,实践下 iPhone X 的适配。还记得之前的一篇文章吗?《【Weex】网易严选 App 感受 Weex 开发》,此处将以此 demo 为基础做展开 Weex 适配。Native 和 H5 的适配此处就不再做赘述了。「专业 IOS 开发同学就当个笑话看看吧,反正你都会,此文是写给不会原生的朋友的」
默认的样子
如果不仔细看,还以为是 iPhone 7 的效果,这也是官方「故意为之」的。
如果你用惯了 iPhone X,无意识地打开了一个类似上图的 app,着实会有点难以接受。
全屏操作
打开 iPhone X 的全屏模式其实很简单,只需要在 Xcode 里配置 iPhone X 的 LaunchImage 即可,也可以直接改配置文件。
可能 Weex Toolkit 构建出来的 Platform 内不含这两个配置图片,不过没关系,右击选择「Show in Finder」,更改 「Contents.json」 配置文件。
{"images" : [{"extent" : "full-screen","idiom" : "iphone","subtype" : "2436h","filename" : "Default2@3x-1.png","minimum-system-version" : "11.0","orientation" : "portrait","scale" : "3x"},{"extent" : "full-screen","idiom" : "iphone","subtype" : "2436h","filename" : "Default2@3x.png","minimum-system-version" : "11.0","orientation" : "landscape","scale" : "3x"},{// other conf}],"info" : {"version" : 1,"author" : "xcode"}
}
再添加两张 1125×2436
的图片,记得名字需要和 filename
匹配,然后重新构建,你就会发现,他全屏啦!
同 native 适配有何不同
Weex 针对 iPhone X 的兼容直接发生在前端开发层面。
「不会搞 Native 是前提」,有了这个前提,我们就只能自己动手了。
动手的原则就是,「合理利用每寸空间,将内容展示在安全区内」。
什么是安全区
安全区是苹果用来描述 iPhone X 的合理显示区域。
手机纵向持握状态下,安全区是从屏幕最顶端往下 44 pt 开始计算的,要注意的是,它并不是和「齐刘海」完全齐平的,而是要再往下一点。「下巴」位置上,从下往上推 34 pt 以上的部分开始才被视为安全区。
至于横向就不好描述了,直接上图吧。
更多关于 iPhone X UI 适配的概念可以看看这篇文章
方向
原则上,我们是将内容显示在安全区内,但一定是在「自然过度」的前提下。
此 demo 没有横屏模式,所有,唯一需要适配的就是,竖屏模式下安全区外的界面遮挡处理。
也就是上下两个部分内收处理。空出来的部分用同色色块填充。
识别 iPhone X
既要适配 iPhone X 又不能影响其他系统,那就需要做「特殊识别处理」。
怎么识别 iPhone X?
幸运的是,Weex 官方有 API 提供平台消息,weex.config
,
weex.config
该变量包含了当前 Weex 页面的所有环境信息,包括不仅限于:
bundleUrl: JS bundle 的 URL,和页面的 URL 一致。
env: Object: 环境对象。
- weexVersion: string: Weex sdk 版本。
- appName: string: 应用名字。
- appVersion: string: 应用版本。
- platform: string: 平台信息,是 iOS、Android 还是 Web。
- osName: string: iOS或者android,表示操作系统的名称.
- osVersion: string: 系统版本。
- deviceModel: string: 设备型号 (仅原生应用) 。
- deviceWidth: number: 设备宽度。Weex 默认以宽度为 750px 做适配渲染,要获得750px下的屏幕高度,可以通过height = 750/deviceWidth*deviceHeight 公式获得,可以使用到 CSS 中,用来设置全屏尺寸
- deviceHeight: number: 设备高度。
iPhone X 环境下,weex.config.env.deviceModel
将返回 iPhone X 的特有标识 'iPhone10,3 or iPhone10,6'
,「注意 Xcode 虚拟机拿到的未必是正确的标识」
iPhone 5 - X 的标示
iPhone | models |
---|---|
5 | iPhone5,1 和 iPhone5,2 |
5c | iPhone5,3 和 iPhone5,4 |
5s | iPhone6,1 和 iPhone6,2 |
6 | iPhone7,2 |
6 Plus | iPhone7,1 |
6s | iPhone8,1 |
6s Plus | iPhone8,2 |
SE | iPhone8,4 |
7 | iPhone9,1 和 iPhone9,3 |
7 Plus | iPhone9,2 和 iPhone9,4 |
8 | iPhone10,1 和 iPhone10,4 |
8 Plus | iPhone10,2 和 iPhone10,5 |
ipX | iPhone10,3 和 iPhone10,6 |
更多关于 iPhone 的信息可参考这里
或者根据 操作系统 & 像素比 & 屏幕尺寸
组合判断是否是「刘海屏」。
留白
在识别到 iPhone X 的标识后,做相应的留白即可,就这么简单,复杂度由你的项目决定,一般情况下,Weex 构建的项目还是很好适配的。
计算属性和 class 绑定
最基本的做法就是使用计算属性得到是否为 iPhone X 标记,在配合 class 绑定的「数组语法」可以轻松实现适配。
<template><div :class="['wrapper', isipx?'w-ipx':'']"></div>
</template>
<script>export default {data () {},computed:{isipx:function () {return weex && (weex.config.env.deviceModel === 'iPhone10,3' || weex.config.env.deviceModel === 'iPhone10,6');}},}
</script>
<style scoped>.wrapper{/* 正常样式 */}.w-ipx{/* iPhone X 样式 */}</style>
此处需要注意,在初始化时计算属性的作用域内未必每次都能拿到 weex 实例,所以必须做好容错。
mixin 配合 router
如果是使用了 vue-router
可以使用 mixin 函数混入,非常方便。
<template><div :class="['wrapper', isIpxFuc()?'w-ipx':'']"></div>
</template>
<script>export default {data () {}}
</script>
<style scoped>.wrapper{/* 正常样式 */}.w-ipx{/* iPhone X 样式 */}
</style>
总结
从最终效果图上看,还可以,至少满足了我的需求。只不过实现起来有些麻烦,Weex 是单页的结构,每个页面都需要单独做适配,如果从 Native 上做处理,就需要有一定的 Native 开发技能,加之良好的架构和协议设计。但是,Native 的处理远没有 UI 处理来的灵活。
总的来讲,Native 层和 UI 层的方法各有利弊,具体实施还需结合项目。
「没有最好的锤子,只有最适合钉子的锤子?」
转载请标明出处
作者: 木羽 zwwill
首发地址:https://github.com/zwwill/blog/issues/15
记一次 Weex 的 iPhone X 适配相关推荐
- Weex 的 iPhone X 适配
前言 https://github.com/zwwill/blog/issues/15 iPhone X 上市也一月有余了,「齐刘海」的设计给全世界的 IOS 和 M 站开发人员出了一道兼容题目,默认 ...
- 移动端iPhone系列适配问题的一些坑
完成移动端的开发项目之后,发现谷歌自带的调试器似乎没有什么太大的作用,整天借同事的苹果手机测bug,尽管同事不厌其烦,但还是觉得这iPhone系列适配问题适配到想逃逃逃,好在项目已经顺利完成,测试通过 ...
- iPhone X 适配(全)
iPhone X 适配(全) 背景 iPhone X 刘海机于9月13日发布,给科技小春晚带来一波高潮.作为开发人员却多出来一份忧虑,iPhone X 怎么适配?我们 App 的脑袋会不会也长一刘海出 ...
- 记公司项目中数字大屏适配4K大屏的问题
记公司项目中数字大屏适配4K大屏的问题 在接手的时候,前端页面已经开发完成,div高度与宽度是百分比,所以适配问题不用考虑宽高问题,但字体边距等没有统一单位,要求适配4k屏 首先4k屏的宽高是3840 ...
- iOS iPhone X 适配
//联系人:石虎 QQ: 1224614774 昵称:嗡嘛呢叭咪哄 一.概念 想要适配iPhone X 的,请看: 苹果官方刚刚更新了中文版的iPhone X适配指南,这可是关于iPhone X的第 ...
- iPhone机型适配相关问题
iPhone机型适配相关问题 这里主要是介绍自己在项目开发过程中, 遇到的关于iphone适配相关的问题, 这里不是讲解怎么去做机型适配, 而是介绍自己在适配中踩到的坑, 希望对同道中人有所帮助. i ...
- 大屏iPhone的适配 +iOS 图片尺寸要求
摘自:http://blog.ibireme.com/2014/09/16/adapted_to_iphone6/ 苹果公司官网设计介绍到:Retina显示屏的超高像素密度已超过人眼能分辨的范围. R ...
- iPhone X适配以及iOS 11可能出现的常见崩溃(info.plist配置)
iPhone X适配 程序启动图,引导图等 iPhone X像素尺寸1125x2436,也就是说,你的启动图或者是闪屏页,App引导图等得新加一个图了,另外iPhone X用的是三倍图,开发用的逻辑分 ...
- iPhoneX设计稿适配Android,UI设计干货:关于IPHONE X适配问题
随着苹果iPhoneX上市大卖以来,市场份额越来越高,UI设计师不得不掌握IPHONEX的适配,今天就来讲讲IPHONEX的基础适配,高手绕道! iOS各个屏幕尺寸就不说了这里只介绍X的尺寸和适配 X ...
- iOS11 与 iPhone X适配的那些坑(持更中...)
目录 问题列表 1.适配iPhoneX 屏幕原则 2.适配过程一些常量的设置 3..iPhone X 上运行有黑色区域问题 4.iOS11导航栏适配 5.出现UIScrollview 漂移问题(基本都 ...
最新文章
- 海量数据处理_国家重点研发计划“面向异构体系结构的高性能分布式数据处理技术与系统”简介...
- 软件测试学习笔记:找代码中的fault,并设计特定的测试用例
- Towards a topological-geometrical theory of group equivariant non-expansive operators for data analy
- 最近使用的两个工具 winscp和xshell
- nginx 和 uWISG 服务器之间如何配合工作的
- WiFi网络编程(带OTA功能)
- java8新特性stream深入解析
- headerIP php_PHP curl伪造IP地址和header信息代码实例
- bugku 杂项 就五层你能解开吗_长春老旧小区加装电梯,你家符合条件吗?_媒体_澎湃新闻...
- Java继承知识之基本控制语句(if、switch与穿透现象)
- 随想录(编写简单资源管理代码)
- 控制div的大小自适应_干货 | 浅谈模糊自适应PID控制
- 破解AI大脑黑盒迈出新一步!谷歌现在更懂机器,还开源了研究工具
- yii2 html form,YII2中ajax通过post提交form表单数据报400错误的解决方法
- win7下手动配置apache+ php + mysql 记
- 数据结构与算法(一):概论
- UML 简单易懂 教程
- android系统版本下载6,安卓6.1系统下载 安卓android6.1官方版下载地址
- 2.2 matlab矩阵变换(对角阵、三角阵、矩阵的转置、矩阵的旋转、矩阵的翻转和矩阵求逆)
- 前阿里P10赵海平被打3.25后离职,加入字节跳动,职级或为4+