鸿蒙软件开发实战案例（一）

本系列为黑马程序员HarmonyOS4+NEXT实战案例跟做记录，目录：

1. 鸿蒙软件开发实战案例（一）
2. 鸿蒙软件开发实战案例（二）
3. 鸿蒙软件开发实战案例（三）
4. 鸿蒙软件开发实战案例（四）
5. 鸿蒙软件开发实战案例（五）

---

 欢迎页面以及相关组件的书写与效果展示：

整体效果展示（.gif）：

相关实现代码：

欢迎页面：

import common from '@ohos.app.ability.common'
import router from '@ohos.router'
import PreferenceUtil from '../common/utils/PreferenceUtil'
import UserPrivacyDialog from '../view/welcome/UserPrivacyDialog'
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(){//aboutToAppear函数在创建自定义组件的新实例后，在执行其build()函数之前执行。允许在aboutToAppear函数中改变状态变量，更改将在后续执行build()函数中生效
      let isagree=await PreferenceUtil.getPreferenceValue(PREF_KEY,false)
      if(isagree){
      this.jumpindex()//同意则跳转主页
      }
      else {
        this.controller.open()//不同意，弹窗
      }
    }

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

  onConfirm(){//保存首选项操作
    PreferenceUtil.putPreferenceValue(PREF_KEY,true)//保存成功后跳转首页
    this.jumpindex()
  }

  exitAPP(){//退出app
    this.context.terminateSelf()//系统功能。能力。运行时的能力。核心破坏此页面功能。退出软件
  }

  build() {
      Column({space:10}) {
        Row() {
          Image($r('app.media.home_slogan'))
            .width(260)
        }
        .layoutWeight(1)//@since: 9 布局的重量(method)常用方法,行属性。layoutWeight(值:string | number):行属性(译)，指占用剩余全部空间，类似于弹性布局,类型为number时属于谁数字高谁脸大,string时就是按百分比分配剩余
        Image($r('app.media.home_logo'))
        .width(150)
        Row(){
          Text('黑马健康支持')
            .fontSize(12)//字体大小
            .opacity(0.8)//透明度，透明比率的值，取值范围：0-1
            .fontColor(Color.White)//字体颜色
          Text('IPv6')
            .fontSize(10)//字体大小
            .opacity(0.8)//透明度，透明比率的值，取值范围：0-1
            .fontColor(Color.White)//字体颜色
            .border({style: BorderStyle.Solid,width:1,color:Color.White,radius:15})//设置边框样式，从左至右依次为实线边框、1宽度、白色、15px圆角
            .padding({left:5,right:5})//左右各5px的外边距
          Text('网络')
            .fontSize(12)//字体大小
            .opacity(0.8)//透明度，透明比率的值，取值范围：0-1
            .fontColor(Color.White)//字体颜色
        }
          Text(`'减更多'指黑马健康App希望通过软件工具的形式，帮助更多用户实现身材管理`)

            //问``和''的区别

            .fontSize(10)//字体大小
          .opacity(0.6)//透明度，透明比率的值，取值范围：0-1
          .fontColor(Color.White)//字体颜色
        Text('浙ICP备00000000号-36D')
          .fontSize(10)//字体大小
          .opacity(0.4)//透明度，透明比率的值，取值范围：0-1
          .fontColor(Color.White)//字体颜色
          .margin({bottom:35})
      }
      .width('100%')
      .height('100%')
      .backgroundColor($r('app.color.welcome_page_background'))
  }
}

效果实现相关组件一——弹窗部分：

import { CommonConstants } from '../../common/constants/CommonConstants'
//@Preview//预览装饰器
@CustomDialog//弹窗装饰器
export default  struct UserPrivacyDidlog {
  controller:CustomDialogController//使用CustomDialogController类来显示自定义弹出窗口。类CustomDialogController
  confirm:()=>void//通过其他页面传参调用对应组件（同意）
  cancel:()=>void//通过其他页面传参调用对应组件（不同意）
  build() {
    Column({space:CommonConstants.SPACE_10}){
      //标题
      Text($r('app.string.user_privacy_title'))
        .fontSize(20)
        .fontWeight(CommonConstants.FONT_WEIGHT_700)
      //内容
      Text($r('app.string.user_privacy_content'))
      //按钮
      Button('同意')
        .width(150)
        .backgroundColor($r('app.color.primary_color'))
        .onClick(()=>{
          this.confirm()
          this.controller.close()//关闭弹窗
        })
      Button('不同意')
        .width(150)
        .backgroundColor($r('app.color.lightest_primary_color'))
        .fontColor($r('app.color.light_gray'))
        .onClick(()=>{
          this.cancel()
          this.controller.close()//关闭弹窗
        })
    }
    .width('100%')
    .padding(10)
  }

}

效果实现相关组件二——加载app优先打开欢迎页面：

import UIAbility from '@ohos.app.ability.UIAbility';
import hilog from '@ohos.hilog';
import window from '@ohos.window';
import PreferenceUtil from '../common/utils/PreferenceUtil';

export default class EntryAbility extends UIAbility {
  onCreate(want, launchParam) {
    //加载用户首选项
    PreferenceUtil.loadPreference(this.context)
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
  }

  onDestroy() {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
  }

  onWindowStageCreate(windowStage: window.WindowStage) {
    // Main window is created, set main page for this ability
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');

    windowStage.loadContent('pages/welcomepage', (err, data) => {//加载app时默认进入welcomepage页面
      if (err.code) {
        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
        return;
      }
      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
    });
  }

  onWindowStageDestroy() {
    // Main window is destroyed, release UI related resources
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
  }

  onForeground() {
    // Ability has brought to foreground
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');
  }

  onBackground() {
    // Ability has back to background
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
  }
}