了解更多开源请访问：开源基础软件社区https://ost.51cto.com启动页作为首次应用的页面出现时，该页面提前提供了一些预加载的数据获取，防止应用出现白屏等异常，比如是否是第一次访问应用，打开应用欢迎页面；判断用户登录信息跳转到页面；消息信息是懒加载等。常用启动页参数如下表：属性类型描述requiredtimernumber倒计时时长，默认3秒YisLogoboolean显示图片类型。false：常规图片，默认；true:logo图片NbackgroundImgResourceStr显示图片地址NcompanyNamestring公司名称NmfontColorResourceColor公司名称字体颜色N种常用启动页方法如下表所示：方法类型说明必填skipvoid跳转方法Y封装启动页参数类代码如下所示：exportclassSplash{//倒计时持续时间timer:number;//显示LogoisLogo?:boolean=false;//页面显示图片backgroundImg?:ResourceStr;//公司名称companyName?:string;//公司名称字体颜色mFontColor?:ResourceColor;constructor(timer:number,isLogo?:boolean,backgroundImg?:ResourceStr,companyName?:string,mFontColor?:ResourceColor){this.timer=timer;this.isLogo=isLogo;this.backgroundImg=backgroundImg;this.companyName=companyName;this.mFontColor=mFontColor;}}自定义启动页组件代码如下：@ComponentexportstructSplashPage{@StatemSplash:Splash=newSplash(3);//跳转方法skip:()=>void;build(){//底部企业名称展示栈组件Stack({alignContent:Alignment.Bottom}){//图片和倒计时跳转页面栈组件Stack({alignContent:Alignment.TopEnd}){if(this.mSplash.isLogo){Image(this.mSplash.backgroundImg).objectFit(ImageFit.None)}Button(`跳过|${this.mSplash.timer}s`,{type:ButtonType.Normal}).height(42).padding({left:16,right:16}).margin({top:16,right:16}).fontSize(16).fontColor(Color.White).backgroundColor(Color.Gray).borderRadius(8).onClick(()=>{this.skip();})}.backgroundImage(this.mSplash.isLogo?null:this.mSplash.backgroundImg).backgroundImageSize(this.mSplash.isLogo?null:{width:'100%',height:'100%'}).width('100%').height('100%')if(this.mSplash.companyName){Text(this.mSplash.companyName).width('100%').height(54).fontColor(this.mSplash.mFontColor).fontSize(14).fontWeight(FontWeight.Bold).textAlign(TextAlign.Center)}}.width('100%').height('100%')}aboutToAppear(){//倒计时处理letskipWait=setInterval(()=>{this.mSplash.timer--;if(this.mSplash.timer===0){clearInterval(skipWait);this.skip();}},1000)}}自定义组件定义完成后，需要在模块的index.ets中导出该组件。代码如下：export{Splash,SplashPage}from'./src/main/ets/components/splashpage/SplashPage';在入口模块中引入自定义模块teui，打开入口目录下的package.json并添加dependencies栏中的如下代码："@tetcl/teui":"file:../teui"注意：其中"@tetcl/"tetcl/teui"inteui"需要和package.json中的name属性保持一致在自定义模块teui中。如果提交到npm中央仓库，可以直接使用"@tetcl/teui":"版本号"导入。导入完成后，需要在编辑器上执行Syncnow或npminstall进行下载同步。在特定页面导入自定义启动页组件的代码如下：注意：为了不和页面名称冲突，AliasSplash。在页面中引入自定义组件SplashPage，并填写相关属性值和跳转方式。代码如下：@Entry@ComponentstructSplash{//跳转到Index页面onSkip(){router.replaceUrl({url:'pages/Index'})}build(){Row(){SplashPage({mSplash:newSplashObj(5,true,$r('app.media.icon'),'xxxxCo.,Ltd',0x666666),skip:this.onSkip})//常规图像//SplashPage({mSplash:newSplashObj(5,false,$r('app.media.default_bg'),//'xxxxCo.,Ltd',0xF5F5F5),skip:this.onSkip})}.height('100%')}}The预览效果如下图所示：了解更多开源内容请访问：开源基础软件社区https://ost.51cto.com
