准备
需要下载Apple Configurator 2
操作步骤
状态栏->文件->新建描述文件->Web Clip
然后填写桌面显示名称、域名
最后点击状态栏->存储
Uniapp H5应用使用WebClip方式 配置优化项
需要在h5的自定义模板中添加以下<mate>
注意:viewport-fit=cover是必写项
<link rel="shortcut icon" type="image/x-icon" href="/h5/static/app/ios/icon/40_40.png">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- iOS13之前 -->
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<!-- iOS13之后 -->
<meta name="theme-color" content="#fff">
<!-- 默认标题 -->
<meta name ="apple-mobile-web-app-title"content ="小说">
<!-- 桌面图标 -->
<link href="/h5/static/app/ios/icon/120_120.png" rel="apple-touch-icon" sizes="120x120"/>
<link href="/h5/static/app/ios/icon/180_180.png" rel="apple-touch-icon" sizes="180x180"/>
<!-- 启动图 -->
<!-- iPhone Xs Max (1242px x 2688px) -->
<link href="/h5/static/app/ios/launch/1242_2688.png" rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)">
<!-- iPhone Xr (828px x 1792px) -->
<link href="/h5/static/app/ios/launch/828_1792.png" rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)">
<!-- iPhone X, Xs (1125px x 2436px) -->
<link href="/h5/static/app/ios/launch/1125_2436.png" rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)">
<!-- iPhone 8 Plus, 7 Plus, 6s Plus, 6 Plus (1242px x 2208px) -->
<link href="/h5/static/app/ios/launch/1242_2208.png" rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3)">
<!-- iPhone 8, 7, 6s, 6 (750px x 1334px) -->
<link href="/h5/static/app/ios/launch/750_1334.png" rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)">
番外
以下方式可以改变tabbar高度以及样式;书写位置App.vue或者任意公共css
<style lang="scss">
.uni-app--showtabbar uni-page-wrapper:after {
height: 80rpx;
height: calc(80rpx + constant(safe-area-inset-bottom));
height: calc(80rpx + env(safe-area-inset-bottom));
}
uni-tabbar {
.uni-tabbar { // tab 背景
background-color: rgba(57, 181, 74, 0.1)!important; // tab 背景色
background-image: linear-gradient(to top, #a80077, #66ff00)!important; // tab 背景图片，也可以是渐变色，背景色和背景图片最多选择一个进行设置
.uni-tabbar-border { // tabBar 上边框
background-color: #e54d42!important; // tabBar 上边框的颜色
}
.uni-tabbar__bd { // tabBar 单项
height: 80px!important;
.uni-tabbar__icon { // tabBar 图标
width: 40px!important;
height: 40px!important;
}
.uni-tabbar__label { // tabBar 文字
font-size: 14px!important;
}
}
}
.uni-tabbar~.uni-placeholder {
height: 80rpx;
}
}
</style>
