uniapp启动图延时效果,启动图的配置

今天阐述uniapp开发中给启动图做延迟效果,不然启动图太快了,一闪就过去了;

一:修改配置文件:manifest.json

bash 复制代码
 "app-plus" : {
		"splashscreen" : {
            "alwaysShowBeforeRender" : false,
            "autoclose" : false,
            "delay" : 3000, // 设置延时时间为3000毫秒
            "waiting" : true
        },
}

二:App.vue界面做一下处理

bash 复制代码
		onLaunch() {
			setTimeout(() => {
				plus.navigator.closeSplashscreen();
			}, 3000);
		},

三:这个关闭掉

OK了,这样就好了,运行看看效果,完美!


启动图配置

1.下载官方给的模版,stroybord文件,然后解压!

2.LaunchScreen文件用Hbulider打开,并且进行适当的修改,具体的可以看里面的说明文件(redme.md)

LaunchScreen如下:

bash 复制代码
<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="32700.99.1234" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
    <device id="retina6_5" orientation="portrait" appearance="light"/>
    <dependencies>
        <deployment identifier="iOS"/>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="22685"/>
        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
        <capability name="System colors in document resources" minToolsVersion="11.0"/>
        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
    </dependencies>
    <scenes>
        <!--View Controller-->
        <scene sceneID="EHf-IW-A2E">
            <objects>
                <viewController id="01J-lp-oVM" sceneMemberID="viewController">
                    <view key="view" contentMode="scaleToFill" id="Ze5-6b-2t3">
                        <rect key="frame" x="0.0" y="0.0" width="414" height="896"/>
                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                        <subviews>
                            <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="dc_launchscreen_pad_background.png" translatesAutoresizingMaskIntoConstraints="NO" id="Oly-Jg-H5o">
                                <rect key="frame" x="0.0" y="0.0" width="1032" height="1376"/>
                                <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                            </imageView>
                            <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="dc_launchscreen_landscape_background.png" translatesAutoresizingMaskIntoConstraints="NO" id="jN2-Td-r8h">
                                <rect key="frame" x="0.0" y="0.0" width="812" height="375"/>
                                <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                            </imageView>
                            <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="dc_launchscreen_portrait_background.png" translatesAutoresizingMaskIntoConstraints="NO" id="Tt8-jS-2H5">
                                <rect key="frame" x="0.0" y="0.0" width="414" height="896"/>
                                <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                            </imageView>
                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="hello uniapp" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="QBH-Ne-rcx">
                                <rect key="frame" x="168" y="835" width="78.333333333333314" height="17"/>
                                <fontDescription key="fontDescription" type="system" pointSize="14"/>
                                <color key="textColor" white="0.66666666666666663" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                                <nil key="highlightedColor"/>
                            </label>
                        </subviews>
                        <viewLayoutGuide key="safeArea" id="IW3-oA-Ytg"/>
                       <!-- <color key="backgroundColor" red="0.83516160100000003" green="0.88008347600000003" blue="0.88008347600000003" alpha="1" colorSpace="calibratedRGB"/> -->
                        <constraints>
                            <constraint firstAttribute="trailing" relation="greaterThanOrEqual" secondItem="vp6-uo-KS2" secondAttribute="trailing" id="1Cb-y2-pRQ"/>
                            <constraint firstItem="QBH-Ne-rcx" firstAttribute="bottom" secondItem="Ze5-6b-2t3" secondAttribute="bottom" constant="-44" id="5MD-Bb-oGe"/>
                            <constraint firstAttribute="trailing" secondItem="jN2-Td-r8h" secondAttribute="trailing" id="Bbg-68-h1T"/>
                            <constraint firstItem="Tt8-jS-2H5" firstAttribute="top" secondItem="Ze5-6b-2t3" secondAttribute="top" id="FH7-NM-QY8"/>
                            <constraint firstItem="vp6-uo-KS2" firstAttribute="centerX" secondItem="Ze5-6b-2t3" secondAttribute="centerX" id="GM5-vc-qeO"/>
                            <constraint firstItem="jN2-Td-r8h" firstAttribute="leading" secondItem="Ze5-6b-2t3" secondAttribute="leading" id="J9z-eJ-GkK"/>
                            <constraint firstItem="vp6-uo-KS2" firstAttribute="top" relation="greaterThanOrEqual" secondItem="Ze5-6b-2t3" secondAttribute="top" constant="10" id="M4i-XX-uO2"/>
                            <constraint firstItem="jN2-Td-r8h" firstAttribute="top" secondItem="Ze5-6b-2t3" secondAttribute="top" id="QFR-Dp-WZN"/>
                            <constraint firstAttribute="trailing" secondItem="Tt8-jS-2H5" secondAttribute="trailing" id="QGW-bk-xBw"/>
                            <constraint firstItem="vp6-uo-KS2" firstAttribute="centerY" secondItem="Ze5-6b-2t3" secondAttribute="centerY" id="Qji-wc-LLD"/>
                            <constraint firstAttribute="bottom" secondItem="Oly-Jg-H5o" secondAttribute="bottom" id="RrE-yv-HsN"/>
                            <constraint firstItem="Oly-Jg-H5o" firstAttribute="top" secondItem="Ze5-6b-2t3" secondAttribute="top" id="VcW-dk-n8h"/>
                            <constraint firstAttribute="bottom" relation="greaterThanOrEqual" secondItem="vp6-uo-KS2" secondAttribute="bottom" constant="10" id="dGX-JM-hiU"/>
                            <constraint firstItem="Oly-Jg-H5o" firstAttribute="leading" secondItem="Ze5-6b-2t3" secondAttribute="leading" id="fa7-4C-n5e"/>
                            <constraint firstItem="Tt8-jS-2H5" firstAttribute="leading" secondItem="Ze5-6b-2t3" secondAttribute="leading" id="fnt-hE-VMi"/>
                            <constraint firstAttribute="bottom" secondItem="jN2-Td-r8h" secondAttribute="bottom" id="iIX-Hl-IOF"/>
                            <constraint firstAttribute="trailing" secondItem="Oly-Jg-H5o" secondAttribute="trailing" id="mm9-f4-toK"/>
                            <constraint firstItem="vp6-uo-KS2" firstAttribute="leading" relation="greaterThanOrEqual" secondItem="Ze5-6b-2t3" secondAttribute="leading" id="oA2-4f-IGA"/>
                            <constraint firstItem="QBH-Ne-rcx" firstAttribute="centerX" secondItem="Ze5-6b-2t3" secondAttribute="centerX" id="rO7-2t-bpH"/>
                            <constraint firstAttribute="bottom" secondItem="Tt8-jS-2H5" secondAttribute="bottom" id="seh-wj-zPF"/>
                        </constraints>
                        <variation key="default">
                            <mask key="subviews">
                                <exclude reference="Oly-Jg-H5o"/>
                                <exclude reference="jN2-Td-r8h"/>
                                <exclude reference="Tt8-jS-2H5"/>
                            </mask>
                        </variation>
                        <variation key="heightClass=compact">
                            <mask key="subviews">
                                <include reference="jN2-Td-r8h"/>
                            </mask>
                        </variation>
                        <variation key="heightClass=regular-widthClass=compact">
                            <mask key="subviews">
                                <include reference="Tt8-jS-2H5"/>
                            </mask>
                        </variation>
                        <variation key="heightClass=regular-widthClass=regular">
                            <mask key="subviews">
                                <include reference="Oly-Jg-H5o"/>
                            </mask>
                        </variation>
                    </view>
                </viewController>
                <placeholder placeholderIdentifier="IBFirstResponder" id="iYj-Kq-Ea1" userLabel="First Responder" sceneMemberID="firstResponder"/>
            </objects>
            <point key="canvasLocation" x="52.173913043478265" y="374.33035714285711"/>
        </scene>
    </scenes>
    <resources>

        <image name="dc_launchscreen_portrait_background.png" width="375" height="812"/>
   <!--     <systemColor name="systemBackgroundColor">
            <color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
        </systemColor> -->
    </resources>
</document>

3.把启动图xxx@2x,xxx@3x直接放到项目下,不要放images文件下:

4.云打包测试,只有打包后才能看到效果;

结束!下期见~

相关推荐
IT_陈寒23 分钟前
Vite的热更新突然失效,原来是因为这个配置
前端·人工智能·后端
ZC跨境爬虫44 分钟前
3D 地球卫星轨道可视化平台开发 Day8(分步渲染200颗卫星+ 前端分页控制)
前端·python·3d·重构·html
竹林8181 小时前
RainbowKit快速集成多链钱包连接,我如何从“连不上”到“丝滑切换”
前端·javascript
笨笨狗吞噬者1 小时前
Opus 4.7 使用体验
前端·ai编程
No8g攻城狮1 小时前
【前端】Vue 中 const、var、let 的区别
前端·javascript·vue.js
文心快码BaiduComate1 小时前
Comate搭载Kimi K2.6,长程13h!
前端·后端·程序员
豹哥学前端1 小时前
新手小白学前端day4: Position定位
前端
fishmemory7sec2 小时前
Vue大屏自适应容器组件:v-scale-screen
前端·javascript·vue.js
饺子不吃醋2 小时前
Promise原理、手写与 async、await
前端·javascript
CHB2 小时前
uni-task - 轻量级团队任务管理系统
uni-app