参考资料
页面路由
轻量级存储
【ARK UI】HarmonyOS ETS的引导页的实现
代码实现
1、功能描述
打开一个应用程序时，会有一个类似欢迎的界面，它叫SplashPages。
一般在这个页面可以做一些App数据初始化的工作。
实现的效果当用户点击App icon后，进入SplashActivity，大约经过1～2秒跳转到程序的主界面。
2、思路
逻辑首先页面启动的时候进入SplashPage界面， 然后在页面启动的时候获取IsFirst的key的value值 如果IsFirst的key的value值为true，就认为他是第一次进入，那么进入欢迎页面 如果IsFirst的key的value值为false，就认为他是多次进入，那么就进入主页面 然后在欢迎页面的点击按钮实现 如果点击了按钮则判断他下次进入为多次进入这个界面了， 那么我们需要把IsFirst的key的value值修改为false
3、SplashPage界面
import dataStorage from ‘@ohos.data.storage‘import featureAbility from ‘@ohos.ability.featureAbility‘import router from ‘@system.router‘;@Entry@Componentstruct SplashPage { @State IsFirstValue:boolean=true; /** * 逻辑首先页面启动的时候进入SplashPage界面， * 然后在页面启动的时候获取IsFirst的key的value值 * 如果IsFirst的key的value值为true，就认为他是第一次进入，那么进入欢迎页面 * 如果IsFirst的key的value值为false，就认为他是多次进入，那么就进入主页面 * 然后在欢迎页面的点击按钮实现 如果点击了按钮则判断他下次进入为多次进入这个界面了， * 那么我们需要把IsFirst的key的value值修改为false */ public aboutToAppear(){ console.log(“aboutToDisappear“) var timeoutID = setTimeout(function() {//todo 延迟5 为了显示启动页面 console.log(‘delay 1s‘); //todo 获取 path路径 var context = featureAbility.getContext() context.getFilesDir((err, path) => { if (err) { console.error(‘getFilesDir failed. err: ‘ + JSON.stringify(err)); return; } console.info(‘getFilesDir successful. path:‘ + JSON.stringify(path)); //todo 获取 storage 对象 let storage = dataStorage.getStorageSync(path + ‘/mystore‘) let IsFirst = storage.getSync(‘isFirst‘, true)//todo 获取 是否第一次启动 console.log(“IsFirst=====>“+JSON.stringify(IsFirst)) if(IsFirst){// todo 如果是的话 跳转到欢迎页面 router.replace({ uri:“pages/WelcomePage“ }) }else{//TODO 如果不是的话 跳转到主界面 router.replace({ uri:“pages/index“ }) } }); }, 2000); } build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Stack({ alignContent: Alignment.Center }){ Image($r(“app.media.icon“)).width(100).height(100) Text(“启动页界面“).fontSize(20).fontColor(Color.White).margin({top:150}) }.width(‘100%‘).height(“100%“).backgroundColor(Color.Green).align(Alignment.Center) } .width(‘100%‘) .height(‘100%‘) }}4、主界面
@Entry@Componentstruct Index { build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Text(‘这是一个主界面‘) .fontSize(50) .fontWeight(FontWeight.Bold) } .width(‘100%‘) .height(‘100%‘) }}5、欢迎界面
欢迎界面我们可以参考之前的资料，我们需要在按钮点击事件，修改一下IsFirst修改为false，代表下次进去是多次进入
import router from ‘@system.router‘;import dataStorage from ‘@ohos.data.storage‘import featureAbility from ‘@ohos.ability.featureAbility‘@Entry@Componentstruct WelcomePage { private swiperController: SwiperController = new SwiperController()/** * 控制启动按钮显示还是隐藏 */ @State flag: boolean= false; build() { Column({ space: 5 }) { Stack({ alignContent: Alignment.TopEnd }) { Swiper(this.swiperController) { //todo 引导页图片内容 //todo 引导页一 Stack({ alignContent: Alignment.Center }){ Image($r(“app.media.icon“)).width(100).height(100) Text(“引导页一“).fontSize(20).fontColor(Color.White).margin({top:150}) }.width(‘100%‘).height(“100%“).backgroundColor(Color.Red).align(Alignment.Center) //todo 引导页 二 Stack({ alignContent: Alignment.Center }){ Image($r(“app.media.icon“)).width(100).height(100) Text(“引导页二“).fontSize(20).fontColor(Color.White).margin({top:150}) }.width(‘100%‘).height(“100%“).backgroundColor(Color.Orange).align(Alignment.Center) //todo 引导页三 Stack({ alignContent: Alignment.Center }){ Image($r(“app.media.icon“)).width(100).height(100) Text(“引导页三“).fontSize(20).fontColor(Color.White).margin({top:150}) }.width(‘100%‘).height(“100%“).backgroundColor(Color.Green).align(Alignment.Center) } .index(0) //todo 当前索引为0 开始 .autoPlay(false) //todo 停止自动播放 .indicator(true) // todo 默认开启指示点 .loop(false) // todo 停止自动播放 默认开启循环播放 .vertical(false) //todo 横向切换 默认横向切换 .onChange((index: number) => { /** * 根据Index 进行判断 当引导页播放到最后一个页面时候 * 让启动按钮显示 否则的话 不显示 */ if (index == 2) { //todo 最后一个 设置flag 为true this.flag = true } else { //todo 不是最后一个 设置flag为false this.flag = false } }) if (this.flag) //todo 当flag 为true 则显示启动按钮 为false的时候不显示 Text(‘启动‘) .width(‘300px‘) .height(‘150px‘) .textAlign(TextAlign.Center) .fontSize(20) .backgroundColor(Color.White) .margin({ right: 20, top: 20 }) .onClick(function () { //todo 实现按钮点击事件 进入到主界面 //todo 获取 path 对象 var context = featureAbility.getContext() context.getFilesDir((err, path) => { if (err) { console.error(‘getFilesDir failed. err: ‘ + JSON.stringify(err)); return; } console.info(‘getFilesDir successful. path:‘ + JSON.stringify(path)); //todo 获取 storage 对象 let storage = dataStorage.getStorageSync(path + ‘/mystore‘) storage.putSync(‘isFirst‘, false) storage.flushSync() let IsFirst = storage.getSync(‘isFirst‘, true) //todo 获取 是否第一次启动 console.log(“IsFirst=====>“ + JSON.stringify(IsFirst)) //todo 存储成功 跳转主界面 router.replace({ uri: “pages/index“ }) }) }) } } }}运行效果
更多鸿蒙资料可参考：华为开发者论坛
免责声明：本网站内容主要来自原创、合作伙伴供稿和第三方自媒体作者投稿，凡在本网站出现的信息，均仅供参考。本网站将尽力确保所提供信息的准确性及可靠性，但不保证有关资料的准确性及可靠性，读者在使用前请进一步核实，并对任何自主决定的行为负责。本网站对有关资料所引致的错误、不确或遗漏，概不负任何法律责任。任何单位或个人认为本网站中的网页或链接内容可能涉嫌侵犯其知识产权或存在不实内容时，应及时向本网站提出书面权利通知或不实情况说明，并提供身份证明、权属证明及详细侵权或不实情况证明。本网站在收到上述法律文件后，将会依法尽快联系相关文章源头核实，沟通删除相关内容或断开相关链接。