【HarmonyOS第一课：运动健康实战】健康生活之UI设计

1 devstudio3.1β2新特性之UI

1.1 开机闪屏（包括深恶痛觉的开屏广告）

开机闪屏的原理是程序启动时展示页面，用来后台加载数据，数据加载完毕后自动消失，不过后来发展为展示第三方广告。

声明周期函数aboutToAppear在创建自定义组件的新实例后，在执行其build()函数之前执行。允许在aboutToAppear函数中改变状态变量，更改将在后续执行build()函数中生效。aboutToDisappear函数在自定义组件析构销毁之前执行。使用这两个函数可以完成展示页面生成前的判断和展示后的自动销毁。如在aboutToAppear中加入判断，会员跳广告^_^。具体代码如下：

页面生命周期函数aboutToAppear：

 aboutToAppear() {
    let preferences = data_preferences.getPreferences(this.context, H_STORE);
    preferences.then((res) => {
      res.get(IS_PRIVACY, false).then((isPrivate) => {
        if (isPrivate === true) {
          this.jumpAdPage();
        } else {
          this.dialogController.open();
        }
      });
    });
  }复制

生命周期页面销毁函数aboutToDisappear：

  aboutToDisappear() {
    clearTimeout();
  }复制

1.2 广告页面设计

根据国家要求，设计一个跳过广告连接，倒计时5s内退出广告展示，当然狠一点的话还可以设计摇一摇、误触的导流方式，不过用户体验很差就是了，当然技术不是原罪，贪婪才是。

关键代码如下：

      Row() {
        Text($r('app.string.jump_ad', this.duration))
          .fontSize($r('app.float.default_12'))
          .fontColor($r('app.color.white'))
          .borderRadius($r('app.float.default_16'))
          .letterSpacing(LETTER_1)
          .height($r('app.float.default_36'))
          .backgroundColor('rgba(0,0,0,0.20)')
          .border({ color: $r('app.color.white'), width: $r('app.float.default_1') })
          .margin({ top: $r('app.float.default_36') })
          .padding($r('app.float.default_8'))
          .onClick(() => this.goToHomePage())
      }
      .width('90%')
      .justifyContent(FlexAlign.End)复制

1.2 低代码设计主页面

使用低代码模式设计主页面，主要使用了tabs组件和tabconnect组件，发现学习成本还挺高，一大片参数设置和事件设置，于是改了个雏形就转化为ets了额，直接写代码效率还高一点。低代码设计如下图：

1.3低代码设计组件ATS

可视化组件的设计使用了list组件和listitem组件，发现界面中的foreach不知道怎么绑定数据，只能半途转代码了。

2 数据库操作

数据库是应用程序数据存储读取最简便的方法。本应用主要使用了rdb并进行了一定封装，可以读取编辑健康规划。具体代码复用了封装好的数据库访问组件。

3 作品展示

【HarmonyOS第一课：运动健康实战】健康生活之UI设计

猜你喜欢