鸿蒙HarmonyOS开发实战(1)

 根据黑马程序员（https://www.bilibili.com/video/BV1Sa4y1Z7B1?p=36&vd_source=756db0e287d884b2979ab5b54a59c305）编写

1.欢迎界面的设置

加载页面

效果图:

需求:需要一个颜色，两个图片，和一些文本

代码实现（WelcomePage.ets）

@Entry
@Component
struct WelcomePage {
  @State message: string = 'Hello World'

  build() {
      Column() {
      Image($r('app.media.home_slogan')).width(260)
      Image($r('app.media.home_logo')).width(150)
      Row(){
     
        Text('黑马健康支持').fontSize(12).opacity(0.8).fontColor(Color.White)
        Text('IPv6')
          .fontSize(10)
          .opacity(0.8)
          .fontColor(Color.White)
          .border({style:BorderStyle.Solid,width:1,color:Color.White,radius:15})
          .padding({left:5 ,right:5})
          
        Text('网络').fontSize(12).opacity(0.8).fontColor(Color.White)
      }
      }
      .width('100%')
    .height('100%')
  .backgroundColor($r('app.color.welcome_page_background'))
  }
}

用户协议提示框

效果图:

需求:在提示框内需要一段文本(已经准备好),还需要两个按钮，以及点击按钮之后的跳转页面

实现代码(UserPrivacyDialog.ets)

import { CommonConstants } from '../../common/constants/CommonConstants'

@CustomDialog
export default struct UserPrivacyDialog {
  controller:CustomDialogController
  //设定事件
  confirm:()=>void
  cancel:()=>void
  build() {
    Column({space:CommonConstants.SPACE_10}){
      //1.标题
      Text($r('app.string.user_privacy_title'))
        .fontSize(20)
        .fontWeight(CommonConstants.FONT_WEIGHT_700)
      //2.内容
      Text($r('app.string.user_privacy_content'))
      //3.按钮
      Button($r('app.string.agree_label'))
        .width(150)
        .backgroundColor($r('app.color.primary_color'))
        .onClick(()=>{
          this.confirm()
          this.controller.close()
        })
      Button($r('app.string.refuse_label'))
        .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)
  }
}

需要注意在设置跳转页面之后需要在main_pages.json文件下进行设置

最后将以上代码整合在一起，令其在Welcom一个文件下就可以实现

import common from '@ohos.app.ability.common'
import UserPrivacyDialog from '../view/welcome/UserPrivacyDialog'
import PreferenceUtil from '../common/utils/PreferenceUtil'
import router from '@ohos.router'
@Extend(Text) function opacityWT(opacity:number,fontSize:number = 10){
  .fontSize(opacity)
  .opacity(fontSize)
  .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.同意,跳转首页
      this.jumpToIndex()
    }
    else {
      //2.2.不同意,弹窗
      this.controller.open()
    }
  }
  jumpToIndex(){
    //设置跳转时间
//此处的功能是实现一个延迟跳转功能，1000为1秒
    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}) {
        //中央Slogan
        Row(){
          Image($r('app.media.home_slogan')).width(260)
        }
        .layoutWeight(1)

      Image($r('app.media.home_logo')).width(150)
      Row(){
        Text('黑马健康支持').opacityWT(0.8,12)
        Text('IPv6')
          .opacityWT(0.8)
          .border({style:BorderStyle.Solid,width:1,color:Color.White,radius:15})
          .padding({left:5 ,right:5})
        Text('网络').opacityWT(0.8,12)
      }
        Text(`'减更多'指黑马健康APP希望通过软件工具的形式,帮助更多用户实现身材管理`)
          .opacityWT(0.6)
        Text('鲁ICP备000000号-12A')
          .opacityWT(0.4)
          .margin({bottom:35})
      }
      .width('100%')
    .height('100%')
  .backgroundColor($r('app.color.welcome_page_background'))
  }
}

小结

首先，代码中包含一个加载界面，这是用户打开应用程序时首先看到的界面。加载界面的主要功能是告知用户应用程序正在初始化，并可能显示一些进度条或动画来增强用户的等待体验。这个界面通常会在应用程序完成必要的后台任务（如数据加载、配置读取等）后自动消失，然后转向主界面。 接下来，用户协议提示框是这段代码中的另一个关键部分。在用户首次使用应用程序时，通常会弹出这个提示框，要求用户阅读并接受用户协议。用户协议是应用程序与用户之间的法律约定，明确了双方的权利和义务。为了提供更好的用户体验，这个提示框中可能还包含了一些文本解释或链接，帮助用户更好地理解协议内容。 特别值得一提的是，这段代码在用户协议提示框中使用了用户首选项功能。当用户首次接受用户协议后，他们的选择将被保存为首选项。这样，在后续的使用中，应用程序就可以根据用户的首选项来判断是否需要再次弹出用户协议提示框。这种设计不仅减少了不必要的打扰，还增强了用户体验的连贯性和个性化。 具体来说，实现用户首选项功能可能需要使用到应用程序的存储机制（如文件存储、数据库等）。当用户接受用户协议时，程序会将一个特定的标记（如布尔值）保存到存储中。在后续启动时，程序会读取这个标记来判断是否需要弹出提示框。如果标记表示用户已经接受过协议，则不再弹出；否则，弹出提示框供用户阅读和接受。