鸿蒙开发--首次应用启动实例

前言

首次应用启动案例是一个综合性较强的案例，通过本次案例，可以学习到的知识有：

1. 通过创建弹窗来学习熟知自定义弹窗@Customdialog的创建，获取实例，创建弹窗结构，实现弹窗功能。
2. 通过页面之间的来回跳转熟知页面路由等相关知识。
3. 通过首选项数据存储来获取 用户登录状态可以学习首选项数据的创建，获取实例，操作首选项的数据等。
4. 通过延迟页面学习定时器的相关内容。
5. 通过弹窗出现影藏场景可以熟知Ability生命周期钩子的实际应用场景。

实现本次案例之前最好学习了以上相关知识，接下来就是代码的实现了。

注：本文为个人学习资料总结内容，更官方的项目讲解和源代码如下：

项目学习：首次应用启动
源代码： gitee源码地址

代码实现

题目介绍与思路

实现效果：

思路：

1. 先做出四个页面的基本框架，做出自定义弹窗。
2. 如果按下同意，则永远不会出弹窗，故使用首选项存储记录状态（数据持久化）
3. 进入页面，如果没有首选项数据，则跳出弹窗，有，则直接跳过页面。
4. 点击协议内容跳转后，弹窗应当关闭，从协议界面回来的时候，弹窗应该打开，故使用生命周期钩子的回调函数OnPageshow和OnPageHide来实现。

故有如下规划：

├──entry/src/main/ets // 代码区
│ ├──common
│ │ ├──constants
│ │ │ └──CommonConstants.ets // 常量类，用于存放常量
│ │ └──utils
│ │ ├──GlobalContext.ets // 全局上下文工具类（GlobalThis）
│ │ └──Logger.ets // 日志打印工具类
│ ├──entryability
│ │ └──EntryAbility.ets // 程序入口类
│ ├──pages
│ │ ├──AdvertisingPage.ets // 广告页
│ │ ├──AppHomePage.ets // 应用首页
│ │ ├──LauncherPage.ets // 应用启动页
│ │ └──PrivacyPage.ets // 隐私协议页
│ └──view
│ └──CustomDialogComponent.ets // 自定义弹窗组件
└──entry/src/main/resources // 资源文件目录

启动页面实现

页面内容的布置：在这里不过多的赘述，代码如下：

build() {
    Column({space:5}){
      Image($r('app.media.ic_logo'))
        .width(90)
        .margin({top:59})

      Text('健康生活')
        .fontSize(19)
        .fontWeight(900)

      Text('健 康 总 有 新 玩 法')
        .fontSize(11)
        .fontWeight(400)
        .opacity($r('app.float.launcher_text_opacity'))

// Button('弹出弹窗按钮，用于调试').onClick(()=>{
//   this.dialogController.open()
// })

    }
    .backgroundImage($r('app.media.ic_launcher_background'))
    .width('100%')
    .height(('100%'))
    .backgroundImagePosition(Alignment.Center)
    .backgroundImageSize(ImageSize.Cover)
  }
}

自定义弹窗实现

创建view目录，在目录下实现自定义弹窗组件，格式如下

@Preview
@CustomDialog//修饰器修饰自定义弹窗
export  default struct CustomDialogComponent{
  //new 一个控制器并获取
  controller:CustomDialogController=  new CustomDialogController({'builder': ''});
  cansel:Function=()=>{}
  confirm:Function=()=>{}

  build() {
    //这里是弹窗结构
    }
  }

在主界面使用自定义弹窗

@Entry
@Component
struct LauncherPage{
  dialogController: CustomDialogController = new CustomDialogController({
  //同意按钮和不同意按钮做的事情
    builder:CustomDialogComponent({
confirm:()=>{
  this.onConfirm()
},
cansel:()=>{
  this.onCancel()
}
    }),
    //编辑弹窗相关的外形于功能
    alignment:DialogAlignment.Bottom,//把弹窗设置在底部
    offset: { dx: 0, dy: CommonConstants.DIALOG_CONTROLLER_DY_OFFSET },//位置大小
    customStyle: true,//自定义弹窗风格是否自己设定
    autoCancel: false//关掉：点击别处关闭弹窗
  })

  onCancel() {
    // 退出程序
    this.context?.terminateSelf()
  }
  onConfirm(){
    this.SavePrivacy()
    this.jumpToAdvertisingPage()
  }

有关自定义弹窗的属性设置如下：
CustomDialogControllerOptions对象说明

实现弹窗出现隐藏（核心）

功能一：判断是否按过同意键：创建首选项获取Preference实例，如果按下同意，将值赋值给首选项，并且进行数据持久化操作。

首先创建Preference实例

  //获取对应上下文的首选项实例
  getPreference(common:Object){
    return preferences.getPreferences(getContext(common),CommonConstants.PREFERENCES_FILE_NAME)
  }

按下同意键之后，需要保存这个状态，并持久化

 //按同意后，保存状态
  SavePrivacy(){
    let preference:Promise<preferences.Preferences>=this.getPreference(this)//获取实例
    preference.then((preference:preferences.Preferences)=>{
      preference.put(CommonConstants.PREFERENCES_KEY_PRIVACY,false)//将这个状态值存入首选项，即按下同意键后，CommonConstants.PREFERENCES_KEY_PRIVACY这个键对应的值是faulse
      preference.flush()
    })
  }

在页面被展示的时候，CommonConstants.PREFERENCES_KEY_PRIVACY的值为false将会直接跳到广告页

onPageShow(): void {
    this.context=getContext(this) as common.UIAbilityContext//获取上下文
    this.getPreference(this).then((preference:preferences.Preferences)=>{  //传入object,获取Preference实例
      preference.get(CommonConstants.PREFERENCES_KEY_PRIVACY,true).then((value)=>{ //获取首选项文件里的数据，没有的话返回true
        //没有首选项数据，继续进行判断，有的话直接跳入广告页面
        if(value){
          //这里是没有首选项数据进一步的判断
          }
        }else{
          this.jumpToAdvertisingPage()
        }
      })
    })
  }

这里首选项数据！！空缺部分！！进一步判断一会会讲

这是按下同意键后的代码

onConfirm(){
    this.SavePrivacy()
    this.jumpToAdvertisingPage()
  }

至此，按下同意键后的逻辑已经完成，即将这个状态值保存到首选项数据里，然后跳到下一步。

这时候退出程序，再次点进来的时候，在页面展示之时，会执行查询首选项存入的数据是否为false，是的话表面已经按过了同意键，会直接跳到广告页。

功能二：判断页面是否跳转到隐私页面
当你点击隐私协议的时候，弹窗将会关闭，这个显然很容易实现，就是在点击事件中，使用控制器把弹窗关掉就好，但是当你从隐私界面点击返回的时候，弹窗要怎么自动打开呢？

解决方法就是，在onPageshow的时候写入逻辑，还记得刚才留下来写逻辑的空缺部分吧？
当从隐私界面跳回来的时候，就会打开弹窗

 onPageShow(): void {
    this.context=getContext(this) as common.UIAbilityContext//获取上下文
    this.getPreference(this).then((preference:preferences.Preferences)=>{  //传入object,获取Preference实例
      preference.get(CommonConstants.PREFERENCES_KEY_PRIVACY,true).then((value)=>{ //获取首选项文件里的数据，没有的话返回true
        //没有首选项数据，继续进行判断，有的话直接跳入广告页面
        if(value){
          //let privacyPut=(GlobalContext.getContext().getObject(CommonConstants.PREFERENCES_KEY_PRIVACY)) as boolean??false
          //if(!privacyPut){
            this.dialogController.open()
          //}
        }else{
          this.jumpToAdvertisingPage()
        }
      })
    })
  }

至此完成了弹窗在隐私页面和主页之间的来回跳转，弹窗的显示隐藏。

功能三：点击不同意键则会跳出程序，代码如下：

onCancel() {
    // 退出程序
    this.context?.terminateSelf()
  }

实现广告界面

延时功能官方讲的已经很详细了：定时器API接口介绍
具体代码如下：

onPageShow() {
    this.timeId = setInterval(() => {
      if (this.countDownSeconds == 0) {
        this.jumpToAppHomePage();
      } else {
        this.countDownSeconds--;
      }
    }, CommonConstants.ADVERTISING_INTERVAL_TIME);
  }

总结

本篇文章还需要很多需要完善的细节，比如说广告页面点击跳过，跳转页面后对页面进行clear操作，还有第二次打开应用还需要在首页面停顿一段时间再进入广告页面等等。

另外，本篇文章和官网的代码有些许不一样，官网的有些代码我是无法理解的，官网中专门存入一个键值对去判断有没有进入到隐私界面，具体代码可以去分析以下官网的。

本次总结只是总结了这个实例最核心的部分，就是首选项数据存储的实际应用，其他细节部分需要大家自己动手操作后完成领悟。