自定义 HarmonyOS 启动页组件

2023-02-17
宁夏
本文字数：1806 字
阅读完需：约 6 分钟

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

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

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

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

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;  }}

复制代码

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

@Componentexport 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@Componentstruct 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%')  }}