1. 什么是刘海屏？
刘海屏是指在手机屏幕上设计出一块凸起的部分，以容纳前置摄像头、听筒及其他传感器，目的是为了在不增加手机体积的前提下，实现全面屏的设计方案。刘海屏设计早在2017年iPhone X发布时就开始流行，并且成为了当前手机市场的趋势。而在手机开发中，如何适配刘海屏成为了开发者所关注的问题之一。本文主要介绍如何利用uniapp来适配刘海屏，使应用在不同的刘海机型上可以兼容显示。
2. uniapp适配刘海屏的方式
在uniapp中，通过设置 viewport-fit 属性来适配刘海屏。viewport-fit属性是针对手机浏览器在设置meta视口属性时不同填写值而定义的差异化CSS渲染属性，具体值如下：
auto: 浏览器默认属性
cover: 在视口范围内根据宽度或高度比例自动缩放内容
contain: 在视口范围内保证内容不失真自适应缩放显示
当应用在刘海屏设备上运行时，可以通过如下方式设置viewport-fit属性：
/* 设置 viewport-fit */
html{
font-size: 30px;
viewport-fit:cover;
}
在这个例子中，我们将viewport-fit属性设置为cover，以保证应用内容可以自适应屏幕。如此，无论是在刘海屏机型，还是在普通设备上运行，应用都可以按照屏幕大小自适应缩放显示，减少屏幕适配方面的工作量。
3. uniapp适配步骤
3.1 修改manifest.json配置文件
首先，在项目根目录的manifest.json文件中，需要添加“navigation_style“配置，属性值设置为“custom”。此属性用来设置带有刘海的机型的页面顶部导航栏样式。配置完成后manifest.json文件内容大致如下：
{
"app": {
"name": "myapp",
"versionName": "1.0.0",
"versionCode": "1"
},
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
}
],
"window": {
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"backgroundColor": "#f5f5f5",
"backgroundTextStyle": "light",
"enablePullDownRefresh": false,
"navigationStyle":"custom" // 带有刘海的机型顶部导航栏样式设置
},
"tabBar":{
"backgroundColor":"#fff",
"color":"#7A7E83",
"selectedColor":"#007aff",
"list": []
}
}
3.2 设置顶部导航栏样式
在uniapp中，可以通过设置titleNView属性来设置页面顶部导航栏样式。titleNView属性包括标题栏的颜色、标题、图标、按钮等等，具体用法如下：
{
"navigationBarTitleText": "uni-app", // 设置标题
"navigationBarBackgroundColor": "#FFFFFF", // 设置标题栏背景色
"navigationBarTextStyle": "black", // 设置标题栏文字样式
}
在设置完导航栏的样式后，还需要在App.vue文件中，添加一段代码来设置页面的首次渲染，即设置页面的onLoad函数：
onLoad() {
uni.getSystemInfo({
success: function (res) {
if (res.statusBarHeight !== undefined) {
const custom = wx.getMenuButtonBoundingClientRect();
uni.setStorageSync('statusBar', res.statusBarHeight);
uni.setStorageSync('custom', custom.bottom + custom.top - res.statusBarHeight);
}
}
});
3.3 利用SafeArea组件进行UI布局
SafeArea组件是苹果iOS11引入的特性。在刘海屏设备上，这个组件会自动调整布局，以适应不同屏幕设备。当然，在应用中，需要添加适当的CSS样式以保证应用的整体布局美观、合理。下面是一个SafeArea组件的使用例子：
<template>
<View class="content">
<View class="header">标题内容</View>
<safe-area class="list" padding=true>
<View v-for="(item, index) in items" :key="index" class="item">{{ item }}</View>
</safe-area>
</View>
</template>
<style>
.content {
display: flex;
flex-direction: column;
background-color: #fff;
padding-top: 15px;
}
.header {
font-size: 20px;
color: #000;
text-align: center;
padding: 10px 0;
}
.list .item {
font-size: 16px;
color: #999;
padding: 10px;
}
</style>
<script>
export default {
data() {
return {
items: ['item1', 'item2', 'item3', 'item4', 'item5']
}
}
}
</script>
在这个例子中，通过使用safe-area标签，设置页面顶部和底部保留安全区域的距离，以适应屏幕的尺寸。同时，添加了一些CSS样式来美化页面，提高应用的用户体验。
4. 总结
在本文中，我们简单地介绍了如何利用uniapp来适配刘海屏。通过设置viewport-fit属性、顶部导航栏样式及SafeArea组件等，我们可以实现应用在不同的刘海机型上自适应显示，并且美化布局、提高用户体验。需要注意的是，刘海屏的适配是一个持续的工作过程，需要不断地关注刘海屏机型的更新，及时进行适配。