WebClip uniapp

WebClip

WebClip

920 发布: 2022/3/2 15:10 本文总阅读量次

准备

需要下载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>

参考

CATALOG
    FEATURED TAGS
    iOS OC C Xcode MIMEType 屏幕旋转 Mac 工具 SQLite3 重命名 证书+内购 Pod 像素 pch 支付协议税务 APP转让 审核 银行卡格式化 git 描述文件 命令行 沙盒日志 i386 x86_64 控制台log xcode10&iOS12 正则 textfield 输入限制 真机支持 封面尺寸 SDWebImage Ruby RVM 渐变色 jekyll 水印 富文本 标签 M3U8 动、静态库 异步上传 Url编码解码 AlertController 保活 pod报错 特定UI横竖屏 Launch版本号 ijkplayer 适配 手势 截图 网络和信号 礼物缓存 手绘礼物 UIPickerView 文件权限 键盘和菜单 耗时卡顿 国际化 Paypal AWSS3 npm、Node 控制台 warning 扩展 防盗链 动画 分析 CallKit 侧滑 重置根控制器 播放器 裁剪 日志 bugly uniapp Swift 文字翻转 跨域 WebClip 网络请求 地图导航 ZSH SPM Vapor 导航 验证码 杀进程 Ubuntu Android JWT vue html-js style-class ssh PHP jks css Runtime tree uniCloud 圆角 总结 flex block 图形验证码 gtm share Combine nvm
    FRIENDS