解决uni-app开发中刘海屏下背景不能全屏铺满的问题_uiapp中背景图片怎么占满整个屏幕

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

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

"safearea": {  
    "background": "#CCCCCC",  
    "bottom": {  
        "offset": "auto"  
    }  
}  
1
2
3
4
5
6

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

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

"safearea": {  
    "bottom": {  
        "offset": "none"  
    }  
}
1
2
3
4
5

然后在需要适配的页面内使用 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);  
}  
1
2
3
4
5

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

使用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); 
1
2
3
4
5

完整 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 对应的组件）
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320