解决uni-app开发中刘海屏下背景不能全屏铺满的问题

使用原生占位（仅App端支持）

mainfest.json 文件 app-plus 节点下配置 safearea

"safearea": {  "background": "#CCCCCC",  "bottom": {  "offset": "auto"  }
}

不使用原生占位（非App端可以不配置mainfest）

mainfest.json 文件 app-plus 节点下配置 safearea

"safearea": {  "bottom": {  "offset": "none"  }
}

然后在需要适配的页面内使用 css 常量 constant(safe-area-inset-bottom)、env(safe-area-inset-bottom) 来适配，参考：为iPhoneX设计网站。微信小程序模拟器不支持，以真机为准。

比如为列表底部添加内边距避开安全区，在 iPhoneX 上列表底部会有内边距，在其他设备上没有内边距：

.list {  padding-bottom: 0;  padding-bottom: constant(safe-area-inset-bottom);  padding-bottom: env(safe-area-inset-bottom);
}

安卓全面屏底部安全区背景色修改方式

使用Native.js修改：

var Color = plus.android.importClass("android.graphics.Color");
plus.android.importClass("android.view.Window");
var mainActivity = plus.android.runtimeMainActivity();
var window_android = mainActivity.getWindow();
window_android.setNavigationBarColor(Color.GREEN);

完整 manifest.json

{"appid": "__UNI__XXXXXX，创建应用时云端分配的，不要修改。","name": "应用名称，如uni-app","description": "应用描述","versionName": "1.0.0","versionCode": "100",// 是否全局关闭uni统计"uniStatistics": {  "enable": false//全局关闭  },// app-plus 节点是 App 特有配置，推荐在 HBuilderX 的 manifest.json 可视化界面操作完成配置。"app-plus": {// HBuilderX->manifest.json->模块权限配置"optimization": {"subPackages": true // HBuilderX 2.7.12+ 支持},"modules": {"Contacts": {},"Fingerprint": {},"Maps": {},"Messaging": {},"OAuth": {},"Payment": {},"Push": {},"Share": {},"Speech": {},"Statistic": {},"VideoPlayer": {},"LivePusher": {}},"distribute": {// Android 与 iOS 证书相关信息均在打包时完成配置"android": {"packagename": "Android应用包名，如io.dcloud.uniapp","keystore": "Android应用打包使用的密钥库文件","password": "Android应用打包使用密钥库中证书的密码","aliasname": "Android应用打包使用密钥库中证书的别名","schemes": ["应用支持的scheme，大小写相关，推荐使用小写"],"theme": "程序使用的主题","android:name": "自定义程序入口类名","custompermissions": "Boolean类型，是否自定义android权限，true表示自定义权限，只使用permissions下指定的android权限，不根据用户使用的5+模块自动添加android权限，false表示自动根据用户使用的5+模块自动添加android权限","permissions": ["要添加的额外的android权限，如<uses-permission android:name=\"com.android.launcher.permission.INSTALL_SHORTCUT\" />","<uses-permission android:name=\"com.android.launcher.permission.UNINSTALL_SHORTCUT\" />"],"minSdkVersion": "apk支持的最低版本，默认值为14","targetSdkVersion": "apk的目标版本，默认值为21"},"ios": {"appid": "iOS应用标识，苹果开发网站申请的appid，如io.dcloud.uniapp","mobileprovision": "iOS应用打包配置文件","password": "iOS应用打包个人证书导入密码","p12": "iOS应用打包个人证书，打包配置文件关联的个人证书","devices": "iOS应用支持的设备类型，可取值iphone/ipad/universal","urltypes": [{"urlschemes": ["hbuilder","必选，程序所支持的自定义协议名称"],"id": "可选，自定义协议的标识","icon": "可选，打开程序时显示的图标"},{"urlschemes": ["http","https","必选，程序所支持的自定义协议名称，大小写无关，推荐使用小写"],"id": "可选，自定义协议的标识","icon": "可选，打开程序时显示的图标"}],"frameworks": ["使用native.js调用API要引用的库文件名称，如CoreLocation.framework", "QuartzCore.framework"],"idfa": "true|false，是否使用广告标识符，默认值为false","plistcmds": ["Set :权限 使用权限的原因","Set :NSCameraUsageDescription 说明使用用户相机的原因"]},// HBuilderX->manifest.json->SDK配置"sdkConfigs": {"maps": {// 地图只能选一个，这里选的是百度。"baidu": {"appkey_ios": "","appkey_android": ""}},"oauth": {// 微信登录"weixin": {"appid": "","appsecret": ""},// QQ登录"qq": {"appid": ""},// 新浪微博登录"sina": {"appkey": "","appsecret": "","redirect_uri": ""},// 小米登录"xiaomi": {"appid_ios": "","appsecret_ios": "","redirect_uri_ios": "","appid_android": "","appsecret_android": "","redirect_uri_android": ""}},"payment": {// Apple应用内支付"appleiap": {},// 支付宝支付"alipay": {"scheme": ""},// 微信支付"weixin": {"appid": ""}},"push": {// 推送只能选择一个，这里选的是个推。"igexin": {"appid": "","appkey": "","appsecret": ""}},"share": {// 微信分享"weixin": {"appid": ""},// 新浪微博分享"sina": {"appkey": "","appsecret": "","redirect_uri": ""},// 分享到QQ"qq": {"appid": ""}},"statics": {// 友盟统计"umeng": {"appkey_ios": "","channelid_ios": "","appkey_android": "","channelid_android": ""}}},// 屏幕方向 需要云打包/本地打包/自定义基座生效"orientation": ["portrait-primary","landscape-primary","portrait-secondary","landscape-secondary"],// HBuilderX->manifest.json->图标配置"icons": {"ios": {"appstore": "必选, 1024x1024, 提交app sotre使用的图标","iphone": {"app@2x": "可选，120x120，iOS7-11程序图标（iPhone4S/5/6/7/8）","app@3x": "可选，180x180，iOS7-11程序图标（iPhone6plus/7plus/8plus/X）","spotlight@2x": "可选，80x80，iOS7-11 Spotlight搜索图标（iPhone5/6/7/8）","spotlight@3x": "可选，120x120，iOS7-11 Spotlight搜索图标（iPhone6plus/7plus/8plus/X）","settings@2x": "可选，58x58，iOS5-11 Settings设置图标（iPhone5/6/7/8）","settings@3x": "可选，87x87，iOS5-11 Settings设置图标（iPhone6plus/7plus/8plus/X）","notification@2x": "可选，40x40，iOS7-11 通知栏图标（iPhone5/6/7/8）","notification@3x": "可选，60x60，iOS7-11 通知栏图标（iPhone6plus/7plus/8plus/X）"},"ipad": {"app": "可选，76x76，iOS7-11程序图标","app@2x": "可选，152x152，iOS7-11程序图标（高分屏）","proapp@2x": "可选，167x167，iOS9-11程序图标（iPad Pro）","spotlight": "可选，40x40，iOS7-11 Spotlight搜索图标","spotlight@2x": "可选，80x80，iOS7-11 Spotlight搜索图标（高分屏）","settings": "可选，29x29，iOS5-11 设置图标","settings@2x": "可选，58x58，iOS5-11 设置图标（高分屏）","notification": "可选，20x20，iOS7-11 通知栏图标","notification@2x": "可选，40x40，iOS7-11 通知栏图标（高分屏）"}},"android": {"mdpi": "必选，48x48，普通屏程序图标","ldpi": "必选，48x48，大屏程序图标","hdpi": "必选，72x72，高分屏程序图标","xhdpi": "必选，96x96，720P高分屏程序图标","xxhdpi": "必选，144x144，1080P高分屏程序图标","xxxhdpi": "可选，192x192"}},// HBuilderX->manifest.json->启动图配置"splashscreen": {"ios": {"iphone": {"retina35": "可选，640x960，3.5英寸设备(iPhone4)启动图片","retina40": "可选，640x1136，4.0英寸设备(iPhone5)启动图片","retina40l": "可选，1136x640，4.0英寸设备(iPhone5)横屏启动图片","retina47": "可选，750x1334，4.7英寸设备（iPhone6）启动图片","retina47l": "可选，1334x750，4.7英寸设备（iPhone6）横屏启动图片","retina55": "可选，1242x2208，5.5英寸设备（iPhone6Plus）启动图片","retina55l": "可选，2208x1242，5.5英寸设备（iPhone6Plus）横屏启动图片","iphonex": "可选，1125x2436，iPhoneX启动图片","iphonexl": "可选，2436x1125，iPhoneX横屏启动图片"},"ipad": {"portrait": "可选，768x1004，需支持iPad时必选，iPad竖屏启动图片","portrait-retina": "可选，1536x2008，需支持iPad时必选，iPad高分屏竖屏图片","landscape": "可选，1024x748，需支持iPad时必选，iPad横屏启动图片","landscape-retina": "可选，2048x1496，需支持iPad时必选，iPad高分屏横屏启动图片","portrait7": "可选，768x1024，需支持iPad iOS7时必选，iPad竖屏启动图片","portrait-retina7": "可选，1536x2048，需支持iPad iOS7时必选，iPad高分屏竖屏图片","landscape7": "可选，1024x768，需支持iPad iOS7时必选，iPad横屏启动图片","landscape-retina7": "可选，2048x1536，需支持iPad iOS7时必选，iPad高分屏横屏启动图片"}},"android": {"mdpi": "必选，240x282，普通屏启动图片","ldpi": "必选，320x442，大屏启动图片","hdpi": "必选，480x762，高分屏启动图片","xhdpi": "必选，720x1242，720P高分屏启动图片","xxhdpi": "必选，1080x1882，1080P高分屏启动图片"}}},// HBuilderX->manifest.json->启动图配置->启动界面选项"splashscreen": {"waiting": true,"autoclose": true,"delay": 0},"error": {"url": "页面加载错误时打开的页面地址，可以是网络地址，也可以是本地地址"},"useragent": {"value": "自定义ua字符串","concatenate": "是否为追加模式"},"useragent_ios": {"value": "与useragent的value一致，仅在iOS平台生效，当useragent和useragent_ios同时存在时优先级useragent_ios>useragent","concatenate": "与useragent的concatenate一致，仅iOS平台生效"},"useragent_android": {"value": "与useragent的value一致，仅在Android平台生效，当useragent和useragent_android同时存在时优先级useragent_android>useragent","concatenate": "与useragent的concatenate一致，仅Android平台生效"},"ssl": "accept|refuse|warning，访问https网络时对非受信证书的处理逻辑","runmode": "normal","appWhitelist": ["Android平台下载apk地址白名单列表","iOS平台跳转appstore地址白名单列表"],"schemeWhitelist": ["URL Scheme白名单列表，如：mqq" //iOS要求预先指定要打开的App名单，不能随意调用任何App],"channel": "渠道标记，可在DCloud开发者中心查看各渠道应用的统计数据","adid": "广告联盟会员id，在DCloud开发者中心申请后填写","safearea": { //安全区域配置，仅iOS平台生效  "background": "#CCCCCC", //安全区域外的背景颜色，默认值为"#FFFFFF"  "bottom": { // 底部安全区域配置  "offset": "none|auto" // 底部安全区域偏移，"none"表示不空出安全区域，"auto"自动计算空出安全区域，默认值为"none"  },"left": { //左侧安全区域配置（横屏显示时有效）  "offset": "none|auto"},"right": { //右侧安全区域配置（横屏显示时有效）  "offset": "none|auto"}},"softinput": {"navBar": "auto", //是否显示iOS软键盘上的“完成”导航条"mode": "adjustResize|adjustPan" //软键盘弹出模式，},"popGesture": "none" //iOS上是否支持屏幕左边滑动关闭当前页面。默认是可关闭。设为none则不响应左滑动画。},// 快应用特有配置"quickapp": {},// 微信小程序特有配置"mp-weixin": {"appid": "wx开头的微信小程序appid","uniStatistics": {"enable": false//仅微信小程序关闭uni统计},},// 百度小程序特有配置"mp-baidu": {"appid": "百度小程序appid"},// 字节跳动小程序特有配置"mp-toutiao": {"appid": "字节跳动小程序appid"},"h5": {"title": "演示", //页面标题，默认使用 manifest.json 的 name"template": "index.html", //index.html模板路径，相对于应用根目录，可定制生成的 html 代码"router": {"mode": "history", //路由跳转模式，支持 hash|history ,默认 hash"base": "/hello/" //应用基础路径，例如，如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 "/app/"},"async": { //页面js异步加载配置"loading": "AsyncLoading", //页面js加载时使用的组件（需注册为全局组件）"error": "AsyncError", //页面js加载失败时使用的组件（需注册为全局组件）"delay": 200, //展示 loading 加载组件的延时时间（页面 js 若在 delay 时间内加载完成，则不会显示 loading 组件）"timeout": 3000 //页面js加载超时时间（超时后展示 error 对应的组件）}}
}

解决uni-app开发中刘海屏下背景不能全屏铺满的问题相关推荐

解决uni-app开发中iphoneX下背景不能全屏铺满的问题
解决uni-app开发中iphoneX下背景不能全屏铺满的问题参考文章: (1)解决uni-app开发中iphoneX下背景不能全屏铺满的问题 (2)https://www.cnblogs.com/ ...
html背景图片手机端全屏,css 背景图全屏显示，兼容移动端
.login { background: url(img/login.jpg) no-repeat center center; background-size: cover; background- ...
java做直播需要哪些技术_直播APP开发中需要解决哪些技术难点？千联信息
泛娱乐发展的火热,网红经济不断发酵的今天,不少企业靠着开发直播APP狠狠的赚了一波,导致很多人眼红,也想投入其中. 那么开发一款直播APP开发中需要解决哪些技术难点?小编在这里就来为大家解答: 视频直 ...
直播软件app开发中直播公屏如何做出来？
直播软件app开发中直播公屏如何做出来? 功能直播软件app开发中公屏最简单的就是通过一个可滑动的列表进行展示用户发送出来的消息,当然,一般都是通过服务器给客户端推送单条或者一组数据,然后客户端再把 ...
HTML5+移动APP开发中遇到的各种代码元素的含义（四）
系列目录跨平台移动APP开发中遇到的各种代码元素的含义(一) HTML5+移动APP开发中遇到的各种代码元素的含义(二) HTML5+移动APP开发中遇到的各种代码元素的含义(三) 目录系列目录 ...
APP开发中这十个细节能直接影响到用户体验，那么如何提升用户体验？
随着软件开发技术的不断发展和完善,有众多同类选择的APP用户越来越挑剔,单单拼功能拼硬件已经不足以捕获用户芳心.在APP使用过程中,大部分用户无意识地培养出了对使用体验的重视感.这警醒企业,只盯着为用 ...
uni app 开发微信小程序及上线体验
uni app 开发微信小程序及上线体验项目创建及微信小程序AppId的申请本次开发的是电商类的微信小程序,这里用到的是HBuilderX这个编辑器.之前用的Visual Studio Code ...
婚恋交友app开发中需要注意的安全问题
前言随着移动设备的普及,婚恋交友app已经成为了人们生活中重要的一部分.但是,这些应用的开发者需要确保应用的安全性,以保护用户的隐私和数据免受攻击.本文将介绍在婚恋交友app开发中需要注意的安全问题 ...
Android短视频app开发中如何实现上下滑动切换效果
在大部分短视频app开发中,都会在app内增加上下滑动切换视频的功能,即下滑切换到下一条短视频,上滑切回到上一条.这种机制可以给用户带来良好的视觉体验,云豹作为优秀的app源码供应商,在该效果的实现上 ...