自定义HarmonyOS启动页组件-ios 自定义启动页

自定义HarmonyOS启动页组件

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

​​想了解更多关于开源的内容，请访问：​​

​​51CTO开源基础软件社区​​

​​https://ost.51cto.com​​

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

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

属性

类型

描述

必填

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;// 显示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;}}

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

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

预览效果如下图所示：

​​想了解更多关于开源的内容，请访问：​​

​​51CTO开源基础软件社区​​

​​https://ost.51cto.com​​

责任编辑：jianghua 来源：51CTO 开源基础软件社区 启动页组件鸿蒙