自定义HarmonyOS启动页组件

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

​

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

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

属性	类型	描述	必填
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%')
  }
}

预览效果如下图所示：