关键词：
启动页作为应用程序首次出现的页面，该页面提供一些预加载数据的提前获取，防止应用程序出现白屏等异常，如是否第一次访问应用程序并开启应用欢迎页；判断用户登录信息进行页面跳转；消息信息懒加载等。
常见启动页参数如下表所示：
属性 | 类型 | 描述 | 必填 |
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%)
预览效果如下图所示：
鸿蒙harmonyos的自定义组件一(代码片段)
当JavaUI框架提供的组件无法满足设计需求时，可以创建自定义组件，根据设计需求添加绘制任务，并定义组件的属性及事件响应，完成组件的自定义。常用接口表1 Component类相关接口接口名作用setEstimateSizeListener... 查看详情
鸿蒙harmonyos的自定义组件之五星好评(代码片段)
...效果。如果对自定义组件并不了解的同学请先看【鸿蒙】HarMonyOS的自定义组件一我们知道所有的组件都是继承至Component类，我们绘制五角星也不例外，我们先定义一个类继承至Component类，并实现几个构造方法publicclassS... 查看详情
鸿蒙harmonyos的自定义组件之五星红旗(代码片段)
...红旗。如果对自定义组件并不了解的同学请先看【鸿蒙】HarMonyOS的自定义组件一我们知道所有的组件都是继承至Component类，我们绘制五角星也不例外，我们先定义一个类继承至Component类，并实现几个构造方法publicclassS... 查看详情
鸿蒙harmonyos的自定义组件之抽奖大转盘(代码片段)
1.介绍当系统提供的组件无法满足设计需求时，您可以创建自定义组件，根据设计需求自定义组件的属性及响应事件，并绘制组件。自定义组件是在组件预留的两个自定义图层中实现绘制，通过addDrawTask方法添加绘... 查看详情
#夏日挑战赛#harmonyos-自定义组件之slider滑块(代码片段)
...乐本文正在参加星光计划3.0–夏日挑战赛前言最近在学习HarmonyOS开发相关知识，在项目开发过程中有用到slider滑块组件，本文主要结合HarmonyOS官网上的相关组件以及通用API，实现一个slider滑块组件。效果演示实现原理1.触发条件... 查看详情
harmonyos鸿蒙学习笔记@component注解自定义组件简单说明(代码片段)
@Component注解的作用是用来构建自定义组件，具体的说明可以参考资料：@Component组件官方文档。@Component自定义组件的简单使用本文通过一个简单的例子来说明@Component的作用。例子代码如下：在下面代码提... 查看详情
harmonyos鸿蒙学习笔记@component注解自定义组件简单说明(代码片段)
@Component注解的作用是用来构建自定义组件，具体的说明可以参考资料：@Component组件官方文档。@Component自定义组件的简单使用本文通过一个简单的例子来说明@Component的作用。例子代码如下：在下面代码提... 查看详情
harmonyos鸿蒙学习笔记@component注解自定义组件简单说明(代码片段)
@Component注解的作用是用来构建自定义组件，具体的说明可以参考资料：@Component组件官方文档。@Component自定义组件的简单使用本文通过一个简单的例子来说明@Component的作用。例子代码如下：在下面代码提... 查看详情
3.9harmonyos鸿蒙开发组件picker
3.9【HarmonyOS鸿蒙开发】组件Picker作者：韩茹公司：程序咖（北京）科技有限公司鸿蒙巴士专栏作家Picker提供了滑动选择器，允许用户从预定义范围中进行选择。一、支持的XML属性Picker的共有XML属性继承自：DirectionalLayoutPicker的自... 查看详情
自定义分页组件(代码片段)
自定义#pager.pyclassPagination(object):def__init__(self,totalCount,currentPage,perPageItemNum=10,maxPageNum=7):#数据总个数self.total_count=totalCount#当前页try:v=int(currentPage)ifv<=0:v=1self.current_page=ve 查看详情
drf的分页组件，过滤组件(代码片段)
...过滤组件1.搜索过滤组件的使用2.排序过滤组件的使用3.自定义过滤类三、过滤组件之分类与区间1.分类与区间的使用四、VUE前端播放器组件一、DRF中的分页组件DRF自带的分页组件帮我们写好了分页功能，包括各种小问题的优化，... 查看详情
支持自定义组件后的bdtab新标签页插件更加完美
...。如何使用下面给大家介绍一下如果在BdTab插件中安装自定义组件，1、我们在主页中鼠标右键，找打设置->选项，然后在选项中找打“小组件”2、我们在组件列表中 查看详情
django搭建个人博客平台7---自定义基于bootstrap的分页组件(代码片段)
Django搭建个人博客平台7—自定义基于Bootstrap的分页组件MyBlog-----------------项目名 blog---------------应用名 utils----------工具 page_html.py---分页组件 migrations-----数据库迁移文件 admin.py-------后台管理 models.py------模型文件（表 查看详情
harmonyos/openharmony双击返回与退出app(代码片段)
...遇到这样的一个需求，就是双击返回与退出App那么在HarmonyOS/OpenHarmony中如何如何实现呢，HarmonyOS测试环境：ApI8，HarmonyOS3，OpenHarmony测试环境：ApI9，OpenHarmony3.2.beta4在此之前，我们需要先来了解一下... 查看详情
django自定义分页组件(代码片段)
第一次在码云上面分享代码片段，记录一下：https://gitee.com/trunkslisa/codes/14gkxi3zf9e2ulbvjnqyo90 classPagination(object):def__init__(self,totalCount,currentPage,perPageNum=20,maxPageNum=7):#传入：#- 查看详情
vue自定义分页组件---切图网
vue2.5自定义分页组件Pagination.vue，可设置每页显示条数，带跳转框直接跳转到相应页面，亲测有用。目前很多框架自带有分页组件比如elementUI，不过在面对一个拿到PSD稿，然后重新切图，重新VUE开发的项目来说，自定义分页组件... 查看详情
webjquery表格组件jqgrid的使用-5.pager翻页搜索格式化自定义按钮
...bjquery表格组件JQGrid的使用-5.Pager翻页、搜索、格式化、自定义按钮Webjquery表格组件JQGrid的使用-6.准备工作&HelloJQGridWebjquery表格组件JQGrid的使 查看详情
android启动页显示自定义logo
参考技术A项目启动时，需要在开屏页显示一个Logo先在style.xml中新建一个样式：注意：重点是android:windowBackground属性。在drawable下面创建splash.xml注意：显示的Logo尺寸要求切图时就控制好尺寸。这里是没法限制尺寸的。样式创建好... 查看详情