Write the Code. Change the World.

5月 18

微信、百度小程序都支持常量 env,来自适应有圆弧屏幕的手机。头条小程序却不可以(抖音开发者官网也没有,只手搜适配,自适应等关键词没找到,看了部分文档也没找到)。头条自己的官方示范的小程序自己都没适配。这就是他们的态度。好吧,别人不做,自己总得做做好,要不体验肯定会差的。

常规处理

像苹果这种棱角是圆弧的手机,底部顶部都是要做自适应处理,才可以有更好的体验。常规操作是加一个 margin 或 一个 padding 或补一个 div。而这些都会用到这个常量: env(safe-area-inset-bottom)

比如可以这样做:

    .safe-bottom {
        margin-bottom: env(safe-area-inset-bottom);
    }

    # 或
    .safe-bottom {
        box-sizing: box-border;
        padding-bottom: env(safe-area-inset-bottom);
    }

    # 或多加一个 div
    .safe-bottom {
        height: env(safe-area-inset-bottom);
    }

甚至可以和 calc 组合使用, 比如:

.footer {
    width: 100%;
    height: calc(88rpx + env(safe-area-inset-bottom));
    box-sizing: box-border;
    padding-bottom: env(safe-area-inset-bottom);
}

可是,头条小程序中 env(safe-area-inset-bottom) 这玩意不支持。

头条小程序自适应

既然一条路走不通,那就选其他的路。找找思路。比如只要能知道圆弧区域的高度不就可以了吗。在系统信息中,会携带这些信息(叫安全区域信息)。拿到了高度,一样可以 margin,一样可以 padding 哈。

那梳理下流程。

  1. 在 main.js 中,拿到安全区域信息,并将底部的高度数据定义到 globalProperties 中。之所以这样做,是因为需要自适应场景的页面有很多个,不想每个页面都再重复去获取这些信息。
  2. 在有需要的地方使用这个高度。
# main.js
import App from './App'
import { createPinia } from 'pinia'
import {
    createSSRApp
} from 'vue'

export function createApp() {
    const app = createSSRApp(App)

    app.use(createPinia())

    // 头条自适应
    // #ifdef MP-TOUTIAO
    const systemInfo = uni.getSystemInfoSync();
    if (systemInfo && systemInfo.safeAreaInsets) {
        app.config.globalProperties.$safeTop = systemInfo.safeAreaInsets.top;
        app.config.globalProperties.$safeBottom = systemInfo.safeAreaInsets.bottom;
    }
    // #endif

    return {
        app
    }
}

# 使用的地方
<view  hover-class="hover" :style="{'margin-bottom': $safeBottom + 'px'}">
</view>

好吧,就这样完事了。

字节小程序官方实例

滑到底部了,不仅不自适应,底部还有一部分被挡住了。

其实,并不赞成官方实例的搞法。底部导航栏非原生,会对整个项目带来影响。页面滚动不丝滑是其中之一,滚动条会滚动到底部不好看。要不就是使用 scroolview 隐藏了滚动条。反正体验还是不怎么好。

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注