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.云打包测试,只有打包后才能看到效果;

结束!下期见~

相关推荐
我不当帕鲁谁当帕鲁3 分钟前
web浏览器播放rtsp视频流,海康监控API
前端·node.js
Leo_DLi8 分钟前
Uncaught (in promise) ReferenceError: SharedArrayBuffer is not defined
前端·javascript·vue.js
七宝文17 分钟前
React前端面试每日一试 6.空标签(Fragment)<></>是什么?它有什么作用?
前端·react.js·面试·前端框架
wrx繁星点点18 分钟前
线程相关个人笔记总结
java·前端·jvm·spring boot·算法·spring·maven
RyzenVega19 分钟前
Vue3 + JS项目配置ESLint Pretter
前端·javascript·vue.js
托尼沙滩裤24 分钟前
【Vue】组件设计与状态管理优化
前端·javascript·vue.js
北城笑笑1 小时前
JavaScript 和 HTML5 Canvas实现图像绘制与处理
前端·javascript·html5
ResponseState2001 小时前
从需求理解到手搓实现一个react-redux
前端·javascript·react.js
Tylermeek1 小时前
纯前端实现PDF、MD、WORD文件导出
前端·javascript·程序员
软件测试凡哥1 小时前
一步步搭建Web自动化测试框架
运维·服务器·前端