黑马健康APP——欢迎页面业务

一.思路分析

欢迎页面业务设计主要是隐私协议的弹窗以及持久化保存，对于隐私弹窗的实现，主要是使用自定义弹窗来完成。如果用户同意隐私协议，则下次会直接进入页面，如果用户不同意隐私协议，则会退出应用，同时，在用户再次进入APP时，会继续弹窗提示用户隐私协议，对于持久化保存方面，使用首选项来实现，另外，还需要设计按钮以及相应的点击事件，来处理用户点击按钮后的事。

二.运行效果

三.开发中遇到的问题

如何实现用户隐私信息的弹窗

解决方法：使用自定义弹窗来实现用户隐私信息的弹窗，使用@CustomDialog装饰器来声明弹窗组件，注意其中一定要包含controller的成员变量，并且其类型一定为CustomDialogController,并日该控制器只需要声明，不需要进行初始化，由于该组件可能在许多地方使用，所以只需要在使用的时候进行初始化即可，其初始化页非常方便，只需要new即可。对于弹窗控制器的声明，可以在任意一个页面中进行，使用弹窗页非常简单，直接调用弹窗的open()属性便可以打开弹窗，close()属性就可以关闭弹窗。

如何保存用户的选择信息

解决方法：使用首选项来进行用户信息的存储，通过调用EntryAbility中的PreferenceUtil来实现用户信息的存储。

四.代码

import UserPrivacyDialog from '../view/welcome/UserPrivacyDialog'
import common from '@ohos.app.ability.common'
import PreferenceUtil from '../common/utils/PreferenceUtil'
import router from '@ohos.router'
@Extend(Text) function opacityWhiteText(opacity: number, fontSize: number = 10) {
  .fontSize(fontSize)
  .opacity(opacity)
  .fontColor(Color.White)
}
const PREF_KEY = 'userPrivacyKey'
@Entry
@Component
struct WelcomePage {
  context = getContext(this) as common.UIAbilityContext
  controller:CustomDialogController = new CustomDialogController({
    builder: UserPrivacyDialog({
      confirm: ()=> this.onConfirm(),
      cancel: () => this.exitApp()
    })
  })

  async  aboutToAppear(){
    // 1.加载首选项
   let isAgree = await PreferenceUtil.getPreferenceValue(PREF_KEY,false)
    // 2.判断是否同意
     if(isAgree){
       // 2.1 同意，跳转首页

     }else {
       // 2.2 不同意，弹窗
       this.controller.open()
     }
  }


  jumpToIndex(){
    setTimeout(() => {
      router.replaceUrl({
        url:'pages/Index'
      })
    },1000)
  }

  onConfirm(){
    // 1. 保存首选项
     PreferenceUtil.putPreferenceValue(PREF_KEY,true)
    // 2.跳转首选项
    this.jumpToIndex()
  }

  exitApp(){
    // 退出APP
    this.context.terminateSelf()
  }

  build() {
    Column({ space: 10 }) {
      // 1.中央Slogan
      Row() {
        Image($r('app.media.home_slogan')).width(260)
      }
      .layoutWeight(1)

      // 2.logo
      Image($r('app.media.home_logo')).width(150)
      // 3.文字描述
      Row() {
        Text('黑马健康支持').opacityWhiteText(0.8, 12)
        Text('IPv6')
          .opacityWhiteText(0.8)
          .border({ style: BorderStyle.Solid, width: 1, color: Color.White, radius: 15 })
          .padding({ left: 5, right: 5 })
        Text('网络').opacityWhiteText(0.8, 12)
      }

      Text(`'减更多'指黑马健康App希望通过软件工具的形式，帮助更多用户实现身材管理`)
        .opacityWhiteText(0.6)
      Text('浙ICP备0000000号-36D')
        .opacityWhiteText(0.4)
        .margin({ bottom: 35 })
    }
    .width('100%')
    .height('100%')
    .backgroundColor($r('app.color.welcome_page_background'))
  }
}

五.总结

欢迎页面业务的开发主要涉及了用户隐私信息弹窗这个自定义弹窗的实现，通过声明以及调用便可以实现自定义弹窗，其次还有按钮以及与按钮相应的点击事件的实现，open以及close等，最后关于用户信息的存储，则是使用了首选项来完成。