自定义HarmonyOS启动页组件

Posted 2023-02-18

启动页作为应用程序首次出现的页面，该页面提供一些预加载数据的提前获取，防止应用程序出现白屏等异常，如是否第一次访问应用程序并开启应用欢迎页；判断用户登录信息进行页面跳转；消息信息懒加载等。

常见启动页参数如下表所示：

属性	类型	描述	必填
timer	number	倒计时时长，默认3秒	Y
isLogo	boolean	显示图片类型。 false：常规图，默认； true：logo图	N
backgroundImg	ResourceStr	显示图片地址 ​	N
companyName	string	企业名称	N
mfontColor	ResourceColor	企业名称字体颜色	N

常见启动页方法如下表所示：

方法	类型	描述	必填
skip	void	跳转方法	Y

封装启动页参数类代码如下所示：

export class Splash 
  // 倒计时时长
  timer: number;
  // 显示Logo
  isLogo?: 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;
  

自定义启动页组件代码如下所示：

@Component
export struct SplashPage 

  @State mSplash: Splash = new Splash(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() 
    // 倒计时处理
    let skipWait = 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;

在entry模块引入自定义模块teui，打开entry目录下的package.json并在dependencies依赖列中加入如下代码：

"@tetcl/teui": "file:../teui"

注：其中"@tetcl/teui"中"tetcl/teui"需要和自定义模块teui中package.json中name属性一致。若提交到npm中心仓可直接使用"@tetcl/teui": "版本号"方式引入。引入完成后需要执行编辑器上的Sync now或者npm install进行下载同步。

在具体的页面中导入自定义启动页组件代码如下所示：

import  Splash as SplashObj, SplashPage  from @tetcl/teui
import router from @ohos.router;

注：为了和页面名称不冲突，对Splash作别名处理。

在页面中引入自定义组件SplashPage并填写相关属性值及跳转方法，代码如下所示：

@Entry
@Component
struct Splash 

  // 跳转到Index页面
  onSkip() 
    router.replaceUrl(
      url: pages/Index
    )
  

  build() 
    Row() 
      SplashPage( mSplash: new SplashObj(5, true, $r(app.media.icon),
        xxxx有限公司, 0x666666), skip: this.onSkip)
      // 常规图
      // SplashPage( mSplash: new SplashObj(5, false, $r(app.media.default_bg), 
      //  xxxx有限公司, 0xF5F5F5), skip: this.onSkip)
    
    .height(100%)
  

预览效果如下图所示：