preface

The iPhone X has been on the market for more than a month, and the “bangs” have created a compatibility problem for IOS and M developers around the world. The default effect problem is not serious, but it is enough to drive people crazy with OBSessive-compulsive disorder. Thanks to the “gap period” of the project, I practiced iPhone X adaptation. Remember the previous article? Weex [Weex] netease Yan Xuan App experience Weex development, here will be based on this demo to expand Weex adaptation. Native and H5 adaptation will not be discussed here. “Just a joke for those of you who are professional IOS developers. You know how to do it anyway. This is for those of you who don’t know how to do it.”

Default look

If you don’t take a closer look, you might think it’s the iPhone 7 effect, but this is also an official “intentional”.

If you’re used to the iPhone X and accidentally open an app like the one above, it’s a little hard to swallow.

Full screen operation

Opening the iPhone X’s full-screen mode is as simple as configuring the iPhone X’s LaunchImage in Xcode or changing the configuration file directly.

The Platform built by Weex Toolkit may not contain these two configuration images, but that’s ok. Right-click “Show in Finder” and change the “Contents. Json” configuration file.

{
    "images": [{"extent" : "full-screen"."idiom" : "iphone"."subtype" : "2436h"."filename" : "[email protected]"."minimum-system-version" : "11.0"."orientation" : "portrait"."scale" : "3x"
        },
        {
            "extent" : "full-screen"."idiom" : "iphone"."subtype" : "2436h"."filename" : "[email protected]"."minimum-system-version" : "11.0"."orientation" : "landscape"."scale" : "3x"
        },
        {
            // other conf
        }
    ],
    "info" : {
        "version" : 1,
        "author" : "xcode"}}Copy the code

Add two more 1125×2436 images, remember the name needs to match filename, then rebuild, you will find that it is full screen!

What’s the difference with native adaptation

Weex’s compatibility with the iPhone X comes directly from the front end.

“Not being able to learn Native is the premise.” With this premise, we have to do it ourselves.

The principle is to “use every inch of space properly and display content in a safe zone”.

What is a safe area

Safe zone is the logical display area Apple uses to describe the iPhone X.

When the phone is held vertically, the safety zone is calculated from 44 pt down from the top of the screen. Note that it is not exactly flush with the “fringe”, but a little further down. The chin position is considered safe only when it is pushed up at least 34 pt.

It’s hard to describe the landscape, so let’s go ahead.

Check out this article for more on iPhone X UI adaptation concepts

The direction of

In principle, we display content within a safe zone, but only under the premise of “natural excess.”

This demo does not have landscape mode, so the only thing that needs to be adapted is the screen occlusion processing outside the security zone in portrait mode.

This is the upper and lower part of the adduction process. The empty parts are filled with the same color blocks.

Identify the iPhone X

Adapting to the iPhone X without affecting other systems requires “special recognition processing.”

How to identify the iPhone X?

Fortunately, Weex has an API to provide platform information, weex.config,

weex.config

This variable contains all the environment information of the current Weex page, including but not limited to:

BundleUrl: the URL of the JS bundle, the same as the URL of the page.

Env: Object: indicates an environment Object.

  • WeexVersion: string: Weex SDK version.
  • AppName: string: indicates the application name.
  • AppVersion: string: indicates the application version.
  • Platform: string indicates the platform information, which can be iOS, Android, or Web.
  • OsName: string: iOS or Android, indicating the name of the operating system.
  • OsVersion: string: indicates the system version.
  • DeviceModel: string: deviceModel (native application only) 。
  • DeviceWidth: number: indicates the deviceWidth. Weex uses a width of 750px for rendering adaptation by default. To obtain a screen height of 750px, run the height = 750/deviceWidth*deviceHeight formula, which can be used in the CSS to set the full-screen size
  • DeviceHeight: number: indicates the deviceHeight.

IPhone X environment, weex. Config. Env. DeviceModel will return the iPhone X’s unique identifier ‘or iPhone10 iPhone10, 3, 6’, “pay attention to the Xcode virtual machine to get is not necessarily the right logo”

The iPhone 5-X logo

iPhone models
5 The iphone 5, 1 and the iphone 5, 2
5c The iphone 5, 3 and iphone 4
5s IPhone6, 1 and iPhone6, 2
6 IPhone7, 2
6 Plus IPhone7, 1
6s IPhone8, 1
6s Plus IPhone8, 2
SE IPhone8, 4
7 IPhone9, 1 and iPhone9, 3
7 Plus IPhone9, 2, and iPhone9, 4
8 IPhone10, 1 and iPhone10, 4
8 Plus IPhone10, 2, and iPhone10, 5
X IPhone10, 3 and iPhone10, 6

More information about the iPhone can be found here

Or depending on the combination of OS, pixel ratio and screen size.

White space

After identifying the logo of the iPhone X, do the corresponding white space. It is as simple as that. The complexity depends on your project.

Evaluate properties and class bindings

The most basic approach is to use computed properties to determine whether or not the iPhone X is marked, which can be easily adapted with the class binding’s array syntax.

<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{
        /* Normal style */
    }
    .w-ipx{
        /* iPhone X style */
    }

</style>
Copy the code

Note that the weeX instance may not be available every time in the scope where attributes are calculated during initialization. Therefore, you must be fault-tolerant.

Mixins with the router

If vue-router is used, it can be mixed with mixin function, which is very convenient.

<template>
    <div :class="['wrapper', isIpxFuc()?'w-ipx':'']">
    </div>
</template>
<script>
    export default {
        data () {}
    }
</script>
<style scoped>
    .wrapper{
        /* Normal style */
    }
    .w-ipx{
        /* iPhone X style */
    }
</style>
Copy the code

conclusion

From the final renderings, it’s okay. At least it meets my needs. Weex is a single-page structure, and each page needs to be adapted separately. If it is processed from Native, it requires certain Native development skills, as well as good architecture and protocol design. However, Native processing is not nearly as flexible as UI processing.

In general, both methods of Native layer and UI layer have advantages and disadvantages, and specific implementation needs to be combined with the project.

“There is no best hammer, only the best hammer for nails 🔨”

Please indicate the source for reprinting

By Zwwill Kiba

Initial address: github.com/zwwill/blog…