自定义HarmonyOS启动页组件

电子说

1.3w人已加入

描述

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

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

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

 

预览效果如下图所示:

HarmonyOSHarmonyOS

审核编辑 黄宇
打开APP阅读更多精彩内容
声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉

全部0条评论

快来发表一下你的评论吧 !

×
20
完善资料,
赚取积分