鸿蒙案例-黑马饮食健康软件（一）

前言

    饮食健康软件可以帮助用户管理自己的饮食习惯，提供营养信息，制定健康饮食计划，甚至跟踪用户的体重和身体状况。本次首先实现的是该软件的欢迎页面。

    主要实现欢迎页面的业务与UI实现。业务包括要求用户同意用户协议方可使用该软件，UI实现主要是页面的展示内容。

---

页面实现-欢迎页面业务和UI实现

1首先进行页面布局

build() {

  Column({space:10}) {

    Row(){
      Image($r('app.media.home_slogan')).width(260)
    }
    .layoutWeight(1)
    Image($r('app.media.home_logo')).width(150)
    Row(){
      Text('黑马健康支持').opacityWhiteText(0.8,12)
      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)

    }
    Text('减更多值黑马健康app希望通过软件工具的形式帮助更多用户实现身材管理')
      .fontSize(10).opacity(0.6).fontColor(Color.White)
    Text('浙ICP备000000号-360')
      .fontSize(10).opacity(0.4).fontColor(Color.White)
  }
  .width('100%')

  .height('100%')
  .backgroundColor($r('app.color.welcome_page_background'))
}

2是否同意用户协议

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


  //同意 跳转首页
this.jumpToIndex()
}else{


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


}

---

遇到的问题及解决方法：

问题：没有进行导包

解决方法：进行导包解决问题

---

代码实现：

整体页面布局：

//2 欢迎页面
import userAuth from '@ohos.userIAM.userAuth'
import router from '@ohos.router'
import PreferenceUtil from '../common/utils/PreferenceUtil'
import UserPrivacyDialog from '../view/welcome/UserPrivacyDialog'
import common from '@ohos.app.ability.common'
@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(){
  //加载首选项
let isAgree= await PreferenceUtil.getPreferenceValue(PREF_KEY,false)
  //判断是否同意
if(isAgree){


  //同意 跳转首页
this.jumpToIndex()
}else{


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


}
jumpToIndex(){
  setTimeout(()=>{//定时任务
    router.replaceUrl({
      url:'pages/Index'
  })

  },1000)
}

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

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

  build() {

    Column({space:10}) {

      Row(){
        Image($r('app.media.home_slogan')).width(260)
      }
      .layoutWeight(1)
      Image($r('app.media.home_logo')).width(150)
      Row(){
        Text('黑马健康支持').opacityWhiteText(0.8,12)
        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)

      }
      Text('减更多值黑马健康app希望通过软件工具的形式帮助更多用户实现身材管理')
        .fontSize(10).opacity(0.6).fontColor(Color.White)
      Text('浙ICP备000000号-360')
        .fontSize(10).opacity(0.4).fontColor(Color.White)
    }
    .width('100%')

    .height('100%')
    .backgroundColor($r('app.color.welcome_page_background'))
  }
}

用户协议：

//1 是否同意用户协议
import { CommonConstants } from '../../common/constants/CommonConstants'
@Preview
@CustomDialog
export default struct UsePrivacyDialog {
  controller: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($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)
  }
}

---

页面效果：

---

总结：

1.使用Stage模型的应用，需要在module。json5配置文件中声明权限。
2.声明Text组件并设置文本内容：string格式直接写文本内容，Resource格式读取本地资源文件
3.声明TextInput组件：placeHoder：输入框无输入时的提示文本，text：输入框当前的文本内容