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
Weex 针对 iPhone X 的兼容直接发生在前端开发层面。
「不会搞 Native 是前提」,有了这个前提,我们就只能自己动手了。
动手的原则就是,「合理利用每寸空间,将内容展示在安全区内」。
安全区是苹果用来描述 iPhone X 的合理显示区域。
手机纵向持握状态下,安全区是从屏幕最顶端往下 44 pt 开始计算的,要注意的是,它并不是和「齐刘海」完全齐平的,而是要再往下一点。「下巴」位置上,从下往上推 34 pt 以上的部分开始才被视为安全区。
至于横向就不好描述了,直接上图吧。
更多关于 iPhone X UI 适配的概念可以看看这篇文章
原则上,我们是将内容显示在安全区内,但一定是在「自然过度」的前提下。
此 demo 没有横屏模式,所有,唯一需要适配的就是,竖屏模式下安全区外的界面遮挡处理。
也就是上下两个部分内收处理。空出来的部分用同色色块填充。
既要适配 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 环境下,
将返回 iPhone X 的特有标识
- weex.config.env.deviceModel
,「虚拟机拿到的未必是正确的标识」,关于 iPhone 的标识可参考这里
- 'iPhone10,3'
或者根据
组合判断是否是「刘海屏」。
- 操作系统 & 像素比 & 屏幕尺寸
在识别到 iPhone X 的标识后,做相应的留白即可,就这么简单,复杂度由你的项目决定,一般情况下,Weex 构建的项目还是很好适配的。
最基本的做法就是使用计算属性得到是否为 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';
- }
- },
- }
- </script>
- <style scoped>
- .wrapper{
- /* 正常样式 */
- }
- .w-ipx{
- /* iPhone X 样式 */
- }
- </style>
此处需要注意,在初始化时计算属性的作用域内未必每次都能拿到 weex 实例,所以必须做好容错。
如果是使用了
可以使用 mixin 函数混入,非常方便。
- vue-router
- <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 层的方法各有利弊,具体实施还需结合项目。
「没有最好的锤子,只有最适合钉子的锤子
来源: https://juejin.im/post/5a290ae46fb9a0450a673e82