当前位置:   article > 正文

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

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
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/羊村懒王/article/detail/152859
推荐阅读
相关标签
  

闽ICP备14008679号