记一次 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

阅读 4.5k

推荐阅读
willspace
用户专栏

stay hungry stay foolish

109 人关注
23 篇文章
专栏主页