HarmonyOS 鸿蒙Next 实况窗能力

故事描述

便了么是一款通过让用户每日记录、监测、分析排便情况，继而为用户健康建议和方案的应用程序。大家可能不知道的是如果你蹲便的时间过长，身体有可能出问题，我们需要在用户打开便了么开始便便的时候，需要能有一个地方能够提醒用户现在蹲了多少时间了。

解决方案

我们使用了鸿蒙的实况窗能力，下图第一幅点开始便便，然后切换到桌面或者去玩其他的app，在左上角会出现实况窗胶囊，显示现在便便多久了。然后你点一下胶囊会弹出右图更清楚的便便计时和提醒你不要蹲太久的贴心提示，这样对用户就很友好了！

我们来看看实况窗如何实现，不过首先你要实现实况窗这个特性，需要先看一下你的应用是否符合申请实况窗的条件，华为对特定的类型应用才能申请实况窗

如果你的应用类型在上述的列表中，就可以参考这个链接申请实况窗去申请，便了么这个功能属于计时类应用的功能，所以去申请了实况窗，目前实况窗控制还比较严格，申请即使通过也是先放给你测试的权限，等你测试通过后还需要一次正式的验收才会有正式的权限，不过审核时间周期都不长。

你首先需要构建的是一个实况窗控制器类，这里我直接把整体代码贴出来，如果你和我一样是计时器类，粘过去改改就行了</p

/*
 * Copyright (c) 2024 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import { liveViewManager } from '@kit.LiveViewKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { ContextUtil } from './ContextUtil';
import { getAvatarName, getUserNickname } from './UserFileHelper';
import { AvatarEnum } from './CommonConstant';

export class TimerController {
  private static defaultView: liveViewManager.LiveView | undefined = undefined;
  private static capsuleColor: string = '#FFFBCF2F';
  private static pickUpColor: string = '#FFFFD700';
  // private static resourceManager = ContextUtil.applicationContext.resourceManager;
  private static isCountdown: boolean = false;

  public async startLiveView(isCountdown: boolean = false): Promise<void> {
    //live view is disabled
    console.log('********startLIveView')
    if (!await TimerController.isLiveViewEnabled()) {
      console.log(`liveview disable`)
      return;
    }

    console.log('********startLiveView2')

    //update liveView parameters
    TimerController.isCountdown = isCountdown;
    TimerController.defaultView = await TimerController.buildDefaultView(TimerController.isCountdown);
    //start liveView
    try {
      console.log(`startLiveView start`)
      const result = await liveViewManager.startLiveView(TimerController.defaultView);
      console.log(`startLiveView result=${result}`)
    } catch (e) {
      console.log(`liveview=${e}`)
      const err: BusinessError = e as BusinessError;
    }
  }

  public async pauseTimer(): Promise<void> {
    try {
      //is liveView parameters initialized
      if (!TimerController.defaultView) {
        return;
      }
      //update liveView parameters
      TimerController.defaultView.timer = {
        isPaused: true
      }
      TimerController.defaultView.liveViewData.primary.title = '已暂停'
      TimerController.defaultView.liveViewData.capsule = {
        type: liveViewManager.CapsuleType.CAPSULE_TYPE_TIMER,
        status: 1,
        isPaused: true,
      }
      if (TimerController.defaultView.sequence) {
        TimerController.defaultView.sequence += 1;
      }
      //update liveView
      await liveViewManager.updateLiveView(TimerController.defaultView);
    } catch (e) {
      const err: BusinessError = e as BusinessError;
    }
  }

  public async continueTimer(): Promise<void> {
    try {
      //is liveView parameters initialized
      if (!TimerController.defaultView) {
        return;
      }
      //update liveView parameters
      TimerController.defaultView.timer = {
        isPaused: false
      }
      TimerController.defaultView.liveViewData.primary.title = '计时中'
      TimerController.defaultView.liveViewData.capsule = {
        type: liveViewManager.CapsuleType.CAPSULE_TYPE_TIMER,
        status: 1,
        isPaused: false,
      }
      if (TimerController.defaultView.sequence) {
        TimerController.defaultView.sequence += 1;
      }
      //update liveView
      await liveViewManager.updateLiveView(TimerController.defaultView);
    } catch (e) {
      const err: BusinessError = e as BusinessError;
    }
  }

  public async stopLiveView(): Promise<void> {
    try {
      //live view is disabled
      if (!await TimerController.isLiveViewEnabled() || !TimerController.defaultView) {
        return;
      }
      //update liveView parameters
      if (TimerController.defaultView.sequence) {
        TimerController.defaultView.sequence += 1;
      }
      TimerController.defaultView.liveViewData.primary.title = '已结束'
      TimerController.defaultView.liveViewData.primary.layoutData = {
        layoutType: liveViewManager.LayoutType.LAYOUT_TYPE_PICKUP,
        title: '计时时间',
        underlineColor: TimerController.pickUpColor,
        descPic: 'timer.png'
      };
      TimerController.defaultView.timer = {
        isPaused: true
      };
      TimerController.defaultView.liveViewData.capsule = {
        type: liveViewManager.CapsuleType.CAPSULE_TYPE_TEXT,
        status: 1,
        title: "便了么"
      }
      //destroy the liveView
      const result = await liveViewManager.stopLiveView(TimerController.defaultView);
    } catch (e) {
      const err: BusinessError = e as BusinessError;
    }
  }

  private static async isLiveViewEnabled(): Promise<boolean> {
    //live view is disabled
    let result: boolean = false;
    try {
      result = await liveViewManager.isLiveViewEnabled();
    } catch (e) {
    }
    return result;
  }

  private static async buildDefaultView(isCountdown: boolean = false): Promise<liveViewManager.LiveView> {
    let avatarName = getAvatarName()

    return {
      id: 8, // liveView ID, generated by the developer
      event: "TIMER", // application scenarios of liveView:TIMER。
      sequence: 1,//serial number
      isMute: true,//is ringing reminder
      timer: {
        time: isCountdown ? 5 * 60 * 1000 : 0,
        isCountdown: isCountdown,
        isPaused: false
      },
      liveViewData: {
        primary: {
          title: '便便💩中',
          content: [
            {
              text: '便便时间不要超过3分钟，避免得痔疮'
            }
          ],
          keepTime: 0,
          clickAction: await ContextUtil.buildWantAgent(),
          layoutData: {//auxiliary area
            layoutType: liveViewManager.LayoutType.LAYOUT_TYPE_PICKUP,
            title: '计时时间',
            content: '${placeholder.timer}',
            underlineColor: TimerController.pickUpColor,
            descPic: `${avatarName}.png`
          },
          extensionData: {//expansion Zone
            type: liveViewManager.ExtensionType.EXTENSION_TYPE_DEFAULT,
          }
        },
        capsule: {//capsule
          type: liveViewManager.CapsuleType.CAPSULE_TYPE_TIMER,
          status: 1,
          icon: 'capsule_logo.png',
          backgroundColor: TimerController.capsuleColor,
          time: isCountdown ? 5 * 60 * 1000 : 0,
          isCountdown: isCountdown,
          isPaused: false,
        }
      }
    }
  }
}

然后你需要在调用这个实况窗控制器的地方进行初始化，比如说我就是在点开始便便的时候进行初始化

  [@State](/user/State) liveViewController: TimerController = new TimerController();
private startLiveView = async () => {
//Start timing and create liveView
try {
await this.liveViewController.startLiveView();
} finally {
}
}

然后记住你如果是需要结束计时，需要调用实况窗控制器的结束方法

  private stopLiveView = async () => {
//Start timing and create liveView
try {
await this.liveViewController.stopLiveView()
} finally {
}
}

好了，这样我们就集成了一个可以给用户带来很清晰信息提示的实况窗能力！