鸿蒙启动页开发

鸿蒙启动页开发 1.1 更改应用名称和图标 1.更改应用图标 找到moudle.json5文件，找到应用启动的EntryAbility下面的icon,将原来的图标改成自己设置的即可

2.更改应用名称

3.效果展示

2.1 广告页面开发

3.1 详细介绍 3.1.1 启动页面 import { PrivacyDialog } from '../views/components/PrivacyDialog' import { router, window } from '@kit.ArkUI' import { preferences } from '@kit.ArkData' import { common } from '@kit.AbilityKit' @Entry @Component struct launchPage { //获取应用的上下文 context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext //获取页面的上下文 // context:Context = getContext() @State isStore: boolean = true aboutToAppear(): void { window.getLastWindow(getContext()).then(win => { win.setWindowLayoutFullScreen(true) }) const store = preferences.getPreferencesSync(this.context, { 'name': 'infoStore' }) this.isStore = store.getSync('isStore', true) as boolean console.info(`userAction: ${this.isStore}`) } async saveInfo() { const store = preferences.getPreferencesSync(this.context, { 'name': 'infoStore' }) store.putSync('isStore', false) store.flush() } //在页面出现之后：需要展示弹窗 onPageShow(): void { //isStore用于定义是否保存的标识 如果显示true,就不用打开自定义弹窗，直接跳到广告界面 // promptAction.showToast({ // message: this.isStore+'' // }) if (this.isStore) { this.controller.open() } else { //跳到广告界面 router.pushUrl({ url: 'pages/AdvertisementPage' }) } } // context:Context:getContext() controller: CustomDialogController = new CustomDialogController({ builder: PrivacyDialog({ cancel: () => { this.context?.terminateSelf() //不同意关闭应用 }, confirm: () => { //当你点击同意，就会调用saveInfo方法 this.saveInfo() //TODO 跳到广告页面 router.pushUrl({ url: 'pages/AdvertisementPage' }) }, }), alignment: DialogAlignment.Bottom, //基准位置 // offset:{dx:30,dy:30} } //设置弹窗位置 ) build() { Stack() { //设置第一层 Image($r('app.media.back')) Column({ space: 10 }) { Image($r('app.media.study_app')) .width(80) .aspectRatio(1) Text('健康学习') .fontSize(20) .fontWeight(FontWeight.Bold) Text('学习总有新玩法') .fontWeight(FontWeight.Bold) }.width('100%') .height('100%') .padding({ top: 100 }) } .height('100%') .width('100%') } } 3.1.2 自定义弹层 import { router } from '@kit.ArkUI' @Preview @CustomDialog export struct PrivacyDialog { controller:CustomDialogController = new CustomDialogController({builder: ''}) //定义两个用来接收的方法 cancel:Function = ()=>{} confirm:Function = ()=>{} build() { Column(){ Text('欢迎使用我的应用') Text('我们充分尊重用户的隐私权，并按照法律要求和业界成熟的安全标准，为您的个人信息提供相应的安全保护措施。') Text('协议隐私保护声明') .fontColor('#007fdd') .onClick(()=>{ // TODO router.pushUrl({url:''}) }) Text('(以下简称为“本声明”)以便您了解我们如何搜集、使用、披露、保护、存储、及传输您的个人数据。请您仔细阅读本声明。如您有任何疑问，请告知我们。') Row(){ Text('不同意').fontColor('#007fdd') .onClick(()=>{ this.controller.close() //点击不同意，关闭 this.cancel() }) Blank() Text('同意').fontColor('#007fdd') .onClick(()=>{ this.controller.close() this.confirm() }) }.width('70%') } } } 3.1.3 广告页面 import { router, window } from '@kit.ArkUI' @Entry @Component struct AdvertisementPage { @State time: number = 5 @State timeID: number = -1 aboutToAppear(): void { window.getLastWindow(getContext()).then(win => { win.setWindowLayoutFullScreen(true) }) } onPageShow(): void { this.timeID = setInterval(() => { console.log('test', this.time) if (this.time > 0) { this.time-- } else if (this.time == 0) { clearTimeout(this.timeID) router.pushUrl({ url: 'pages/Index' }) } }, 1000) } build() { Stack() { Image($r('app.media.back')) Row() { Text('跳过广告' + this.time + 's') .fontSize(20) .backgroundColor('rgba(0,0,0,0.1)') .padding(8) .borderRadius(30) } .width('100%') .height('100%') .justifyContent(FlexAlign.End) .alignItems(VerticalAlign.Top) .padding({ top: 30, right: 30 }) Row({ space: 10 }) { Image($r('app.media.study_app')) .width(80) .aspectRatio(1) Column({ space: 5 }) { Text('健康学习') .fontSize(30) Text('学习总有新玩法') .fontSize(20) }.height(80) .justifyContent(FlexAlign.Start) } .width('100%') .height('100%') .justifyContent(FlexAlign.Center) .alignItems(VerticalAlign.Bottom) .padding({ bottom: 16 }) } .height('100%') .width('100%') } }