自定义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; }}
自定义启动页组件代码如下所示：
@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%') }}
预览效果如下图所示：
设备如何使用华为云接入MQTT上报数据
POL无源全光局域网方案亮点及应用场景
变频器载波频率范围_变频器载波频率与干扰的关系_变频器载波频率与输出电压的关系
科锐宣布推出XLamp XP－G3 S Line LED 将提供优异的LED系统可靠性
小米6、荣耀8青春版、荣耀9颜值最高的7款手机,都被这个颜色承包了！
自定义HarmonyOS启动页组件
韩国三星首次研发5纳米半导体工艺
直击云转型挑战，SAP联合工博科技助推企业加速上云
必易微超简洁水泵、风机直流无刷电机驱动方案
华为Mate20曝光 采用流行的美人尖屏幕
吴恩达眼中深度学习七剑客,你都认识吗？
三星电视出货量4000万台蝉联全球第一大_面板价格持续下降
6种常见深孔加工方式
电瓶修复——电池修复哪种方法最好？
Dynabook推出了其纤薄的PortégéX系列的三款新笔记本电脑
英特尔7纳米芯片制造工艺或将2023年上市销售
关于基于Xilinx FPGA 的高速Viterbi回溯译码器的性能分析和应用介绍
浅谈USB快充技术的现状
绿色航空 领航未来|12月14、15日深圳2023世界eVTOL大会报名通道正式开启
关于Linux嵌入式操作系统的优势特征详解
常见启动页参数如下表所示：
属性 类型 描述 必填
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; }}
自定义启动页组件代码如下所示：
@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%') }}
预览效果如下图所示：
设备如何使用华为云接入MQTT上报数据
POL无源全光局域网方案亮点及应用场景
变频器载波频率范围_变频器载波频率与干扰的关系_变频器载波频率与输出电压的关系
科锐宣布推出XLamp XP－G3 S Line LED 将提供优异的LED系统可靠性
小米6、荣耀8青春版、荣耀9颜值最高的7款手机,都被这个颜色承包了！
自定义HarmonyOS启动页组件
韩国三星首次研发5纳米半导体工艺
直击云转型挑战，SAP联合工博科技助推企业加速上云
必易微超简洁水泵、风机直流无刷电机驱动方案
华为Mate20曝光 采用流行的美人尖屏幕
吴恩达眼中深度学习七剑客,你都认识吗？
三星电视出货量4000万台蝉联全球第一大_面板价格持续下降
6种常见深孔加工方式
电瓶修复——电池修复哪种方法最好？
Dynabook推出了其纤薄的PortégéX系列的三款新笔记本电脑
英特尔7纳米芯片制造工艺或将2023年上市销售
关于基于Xilinx FPGA 的高速Viterbi回溯译码器的性能分析和应用介绍
浅谈USB快充技术的现状
绿色航空 领航未来|12月14、15日深圳2023世界eVTOL大会报名通道正式开启
关于Linux嵌入式操作系统的优势特征详解