鸿蒙启动页开发

鸿蒙启动页开发

1.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()@StateisStore: boolean = trueaboutToAppear(): void {window.getLastWindow(getContext()).then(win => {win.setWindowLayoutFullScreen(true)})const store = preferences.getPreferencesSync(this.context, {'name': 'infoStore'})this.isStore = store.getSync('isStore', true) as booleanconsole.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(()=>{// TODOrouter.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 = -1aboutToAppear(): 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%')}
}