自定义HarmonyOS启动页组件 原创 精华
Tuer白晓明
发布于 2023-2-17 12:58
浏览
2收藏
启动页作为应用程序首次出现的页面,该页面提供一些预加载数据的提前获取,防止应用程序出现白屏等异常,如是否第一次访问应用程序并开启应用欢迎页;判断用户登录信息进行页面跳转;消息信息懒加载等。
常见启动页参数如下表所示:
属性 | 类型 | 描述 | 必填 |
---|---|---|---|
timer | number | 倒计时时长,默认3秒 | Y |
isLogo | boolean | 显示图片类型。 false:常规图,默认; true:logo图 |
N |
backgroundImg | ResourceStr | 显示图片地址 | N |
companyName | string | 企业名称 | N |
mfontColor | ResourceColor | 企业名称字体颜色 | N |
常见启动页方法如下表所示:
方法 | 类型 | 描述 | 必填 |
---|---|---|---|
skip | void | 跳转方法 | Y |
封装启动页参数类代码如下所示:
自定义启动页组件代码如下所示:
自定义组件定义完成后,还需要在模块的index.ets中将组件导出,代码如下所示:
在entry模块引入自定义模块teui,打开entry目录下的package.json并在dependencies依赖列中加入如下代码:
注:其中"@tetcl/teui"中"tetcl/teui"需要和自定义模块teui中package.json中name属性一致。若提交到npm中心仓可直接使用"@tetcl/teui": "版本号"方式引入。引入完成后需要执行编辑器上的Sync now或者npm install进行下载同步。
在具体的页面中导入自定义启动页组件代码如下所示:
注:为了和页面名称不冲突,对Splash作别名处理。
在页面中引入自定义组件SplashPage并填写相关属性值及跳转方法,代码如下所示:
预览效果如下图所示:
©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
赞
3
收藏 2
回复
3
3
2
相关推荐
优秀app有个好的启动页是必不可少的
原来启动页还有防止白屏的作用
可以把一些前期需要的数据加载放到启动页来获取😁😁😁