深度解析HarmonyOS SDK实况窗服务源码,Get不同场景下的多种模板

本文主要是介绍深度解析HarmonyOS SDK实况窗服务源码,Get不同场景下的多种模板,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

HarmonyOS SDK实况窗服务(Live View Kit)作为一个实时呈现应用服务信息变化的小窗口,遍布于设备的各个使用界面,它的魅力在于将复杂的应用场景信息简洁提炼并实时刷新,在不影响当前其他应用操作的情况下,时刻向用户展示最新的信息动态,用户也可以点击实况窗卡片或胶囊进入应用落地页查看详细信息,享受来自应用的高效信息同步服务。

实况窗服务为不同场景定制了多样化的卡片模板,包括进度可视化模板、强调文本模板、左右文本模板、赛事比分模板、导航模板,除了这5种卡片形态的模板外,实况窗还有实况胶囊和实况计时器两种形态。下面,本文将详细展示这些模板,介绍其适用的场景,并讲解模板的具体实现步骤。

开发准备

在创建本地实况窗之前,需要先完成基本的准备工作,并开通实况窗服务权益。开通实况窗权益大致分为5个步骤,详细的申请步骤可参考实况窗服务的开发指南。

开发步骤

下面将以在本地创建、更新和结束实况窗为例,展示具体的开发步骤。

1.导入liveViewManager。

在创建本地实况窗前,需要在项目中导入liveViewManager,并新建实况窗控制类,构造isLiveViewEnabled()方法,用于校验实况窗开关是否打开。打开实况窗开关是创建实况窗的前提条件。示例代码如下:

import { liveViewManager } from '@kit.LiveViewKit';export class LiveViewController {
private static async isLiveViewEnabled(): Promise<boolean> {
return await liveViewManager.isLiveViewEnabled();}
}
2.创建实况窗。

实况窗根据扩展区不同共有5种样式模板:进度可视化模板、强调文本模板、左右文本模板、赛事比分模板和导航模板。

进度可视化模板

进度可视化模板可适用于打车、外卖等需要呈现完整进程及当前节点的场景,通过进度可视化模板的实况窗,用户可一眼查看应用的服务进程和实时变化。这里以即时配送场景为例,展示具体的示例代码。

在构建LiveViewController后,需要在代码中初始化LiveViewController并调用liveViewManager.startLiveView()方法创建实况窗。其中event的取值为DELIVERY则代表即时配送场景,若取值为TAXI则表示出行打车场景。

import { liveViewManager } from '@kit.LiveViewKit';
import { Want, wantAgent } from '@kit.AbilityKit';export class LiveViewController {public async startLiveView(): Promise<liveViewManager.LiveViewResult> {// 校验实况窗开关是否打开if (!LiveViewController.isLiveViewEnabled()) {throw new Error("Live view is disabled.");}// 创建实况窗const defaultView = await LiveViewController.buildDefaultView();return await liveViewManager.startLiveView(defaultView);}private static async buildDefaultView(): Promise<liveViewManager.LiveView> {return {// 构造实况窗请求体id: 0, // 实况窗ID,开发者生成。event: "DELIVERY", // 实况窗的应用场景。DELIVERY:即时配送(外卖、生鲜)liveViewData: {primary: {title: "骑手已接单",content: [{ text: "距商家 " },{ text: "300 ", textColor: "#FF007DFF" },{ text: "米 | " },{ text: "3 ", textColor: "#FF007DFF" },{ text: "分钟到店" }], // 所有文本仅能设置为一种颜色,不设置textColor时,默认展示#FF000000keepTime: 15,clickAction: await LiveViewController.buildWantAgent(),layoutData: {layoutType: liveViewManager.LayoutType.LAYOUT_TYPE_PROGRESS,progress: 40,color: "#FF317AF7",backgroundColor: "#f7819ae0",indicatorType: liveViewManager.IndicatorType.INDICATOR_TYPE_UP,indicatorIcon: "indicator.png", // 进度条指示器图标,取值为
"/resources/rawfile"路径下的文件名lineType: liveViewManager.LineType.LINE_TYPE_DOTTED_LINE,nodeIcons: ["icon_1.png", "icon_2.png", "icon_3.png"] // 进度条每个节点图标,
取值为"/resources/rawfile"路径下的文件名}}}};}private static async isLiveViewEnabled(): Promise<boolean> {return await liveViewManager.isLiveViewEnabled();}private static async buildWantAgent(): Promise<Want> {const wantAgentInfo: wantAgent.WantAgentInfo = {wants: [{bundleName: 'xxx.xxx.xxx', // 应用实际bundleNameabilityName: 'EntryAbility'} as Want],operationType: wantAgent.OperationType.START_ABILITIES,requestCode: 0,wantAgentFlags: [wantAgent.WantAgentFlags.UPDATE_PRESENT_FLAG]};const agent = await wantAgent.getWantAgent(wantAgentInfo);return agent;}
}

强调文本模板

强调文本模板适用于取餐、排队等需要强调部分文本信息的场景。通过强调文本模板实况窗,用户可以快速获取取餐码、排号情况等重要信息,这里以取餐场景为例,展示具体的示例代码。

在强调文本模板中,event取值为PICK_UP则代表取餐场景,若取值为QUEUE则代表排队场景。

import { liveViewManager } from '@kit.LiveViewKit';
import { Want, wantAgent } from '@kit.AbilityKit';export class LiveViewController {public async startLiveView(): Promise<liveViewManager.LiveViewResult> {// 校验实况窗开关是否打开if (!LiveViewController.isLiveViewEnabled()) {throw new Error("Live view is disabled.");}// 创建实况窗const defaultView = await LiveViewController.buildDefaultView();return await liveViewManager.startLiveView(defaultView);}private static async buildDefaultView(): Promise<liveViewManager.LiveView> {return {// 构造实况窗请求体id: 0, // 实况窗ID,开发者生成。event: "PICK_UP", // 实况窗的应用场景。PICK_UP:取餐。liveViewData: {primary: {title: "餐品已备好",content: [{ text: "请前往", textColor: "#FF000000" },{ text: "XXX店取餐", textColor: "#FF000000" }],keepTime: 15,clickAction: await LiveViewController.buildWantAgent(),layoutData: {layoutType: liveViewManager.LayoutType.LAYOUT_TYPE_PICKUP,title: "取餐码",content: "72988",underlineColor: "#FF0A59F7",descPic: "coffee.png"}}}};}... ...
}

左右文本模板

左右文本模板适用于高铁、航班等左右信息对称的场景,通过该模板,用户可以快速获取始发地、目的地、开始和结束时间等出行信息。这里以高铁列车票场景为例,展示具体的示例代码。

在左右文本模板中,event取值为TRAIN则代表高铁/火车场景,若取值为FLIGHT则代表航班场景。

import { liveViewManager } from '@kit.LiveViewKit';
import { Want, wantAgent } from '@kit.AbilityKit';export class LiveViewController {public async startLiveView(): Promise<liveViewManager.LiveViewResult> {// 校验实况窗开关是否打开if (!LiveViewController.isLiveViewEnabled()) {throw new Error("Live view is disabled.");}// 创建实况窗const defaultView = await LiveViewController.buildDefaultView();return await liveViewManager.startLiveView(defaultView);}private static async buildDefaultView(): Promise<liveViewManager.LiveView> {return {// 构造实况窗请求体id: 0, // 实况窗ID,开发者生成。event: "TRAIN", // 实况窗的应用场景。TRAIN:高铁/火车。liveViewData: {primary: {title: "列车检票提醒",content: [{ text: "检票口 " },{ text: "6B ", textColor: "#FF007DFF" },{ text: "| 座位 " },{ text: "03车 12F", textColor: "#FF007DFF" }],// 所有文本仅能设置为一种颜色,不设置textColor时,默认展示#FF000000keepTime: 15,clickAction: await LiveViewController.buildWantAgent(), // 点击实况窗默认动作。layoutData: {layoutType: liveViewManager.LayoutType.LAYOUT_TYPE_FLIGHT,firstTitle: "09:00",firstContent: "上海虹桥",lastTitle: "14:20",lastContent: "汉口",spaceIcon: "icon.png",isHorizontalLineDisplayed: true,additionalText: "以上信息仅供参考" // 扩展区底部内容,仅可用于左右文本模板。}}}};}... ...
}

赛事比分模板

赛事比分模板适用于竞技比赛的场景,通过该模板,用户可以快速获取比赛队伍、当前比分、场次等比赛信息。

在赛事比分模板中,SCORE代表赛事比分场景。

import { liveViewManager } from '@kit.LiveViewKit';
import { Want, wantAgent } from '@kit.AbilityKit';export class LiveViewController {public async startLiveView(): Promise<liveViewManager.LiveViewResult> {// 校验实况窗开关是否打开if (!LiveViewController.isLiveViewEnabled()) {throw new Error("Live view is disabled.");}// 创建实况窗const defaultView = await LiveViewController.buildDefaultView();return await liveViewManager.startLiveView(defaultView);}private static async buildDefaultView(): Promise<liveViewManager.LiveView> {return {// 构造实况窗请求体id: 0, // 实况窗ID,开发者生成。event: "SCORE", // 实况窗的应用场景。SCORE:赛事比分。liveViewData: {primary: {title: "第四节比赛中",content: [{ text: "XX VS XX" },{ text: " | ", textColor: "#f7b7b1b3"},{ text: "小组赛第五场"}],keepTime: 1,clickAction: await LiveViewController.buildWantAgent(),layoutData: {layoutType: liveViewManager.LayoutType.LAYOUT_TYPE_SCORE,hostName: "队名A",hostIcon: "host.png",hostScore: "110",guestName: "队名B",guestIcon: "guest.png",guestScore: "102",competitionDesc: [{ text: "●", textColor: "#FFFF0000" },{ text: "Q4" }],competitionTime: "02:16",isHorizontalLineDisplayed: true}}}};}... ...
}

导航模板

导航模板适用于出行导航场景。通过该模板,用户可以快速获取所需导航的目的地大致方位信息。在导航模板中,event取值为NAVIGATION则代表导航场景。

import { liveViewManager } from '@kit.LiveViewKit';
import { Want, wantAgent } from '@kit.AbilityKit';export class LiveViewController {public async startLiveView(): Promise<liveViewManager.LiveViewResult> {// 校验实况窗开关是否打开if (!LiveViewController.isLiveViewEnabled()) {throw new Error("Live view is disabled.");}// 创建实况窗const defaultView = await LiveViewController.buildDefaultView();return await liveViewManager.startLiveView(defaultView);}private static async buildDefaultView(): Promise<liveViewManager.LiveView> {return {// 构造实况窗请求体id: 0, // 实况窗ID,开发者生成。event: "NAVIGATION", // 实况窗的应用场景。NAVIGATION:导航。liveViewData: {primary: {title: "178米后左转",content: [{ text: "去往", textColor: "#FF000000" },{ text: " 南京东路", textColor: "#FF000000" }],keepTime: 15,clickAction: await LiveViewController.buildWantAgent(),layoutData: {layoutType: liveViewManager.LayoutType.LAYOUT_TYPE_NAVIGATION,currentNavigationIcon: "navigation.png",navigationIcons: ["left.png","straight.png","straight.png","right.png"]}}}};}... ...
}

实况胶囊

实况胶囊是在设备熄屏和状态栏中展示的区别于卡片态的另一种实况形态,胶囊内需显示最精简、最重要的内容,保证用户一瞥即得重要信息。并且,胶囊形态各模板参数固定,与创建实况窗时的模板类型无关。

在同步创建实况窗胶囊时,需要在liveViewManager.LiveView结构体中携带胶囊所需的参数capsule,不同胶囊类型携带不同的参数。可创建的胶囊类型有:文本胶囊、计时器胶囊和进度胶囊。这里以文本胶囊为例,展示具体的示例代码。

import { liveViewManager } from '@kit.LiveViewKit';
import { Want, wantAgent } from '@kit.AbilityKit';export class LiveViewController {public async startLiveView(): Promise<liveViewManager.LiveViewResult> {// 校验实况窗开关是否打开if (!LiveViewController.isLiveViewEnabled()) {throw new Error("Live view is disabled.");}// 创建实况窗const defaultView = await LiveViewController.buildDefaultView();return await liveViewManager.startLiveView(defaultView);}private static async buildDefaultView(): Promise<liveViewManager.LiveView> {return {// 构造实况窗请求体id: 0, // 实况窗ID,开发者生成。event: "DELIVERY", // 实况窗的应用场景。DELIVERY:即时配送(外卖、生鲜)。liveViewData: {primary: {title: "餐品待支付",content: [{ text: "咖啡 ", textColor: "#FF000000" },{ text: "等2件商品", textColor: "#FF000000" }],keepTime: 15,clickAction: await LiveViewController.buildWantAgent(),layoutData: {layoutType: liveViewManager.LayoutType.LAYOUT_TYPE_PICKUP,title: "待支付金额",content: "25.5元",underlineColor: "#FF0A59F7",descPic: "coffee.png"}},// 实况胶囊相关参数capsule: {type: liveViewManager.CapsuleType.CAPSULE_TYPE_TEXT,status: 1,icon: "capsule_store.png",backgroundColor: "#ff0676e7",title: "待支付"}}};}... ...
}

实况窗计时器

实况窗计时器适用于排队、抢票等场景。开发者若需要使用实况窗计时器,则需在liveViewManager.LiveView结构体中的配置timer字段,并在当前支持的字段中使用占位符:${placeholder.timer}。

具体的示例代码如下:

import { liveViewManager } from '@kit.LiveViewKit';
import { Want, wantAgent } from '@kit.AbilityKit';export class LiveViewController {public async startLiveView(): Promise<liveViewManager.LiveViewResult> {// 校验实况窗开关是否打开if (!LiveViewController.isLiveViewEnabled()) {throw new Error("Live view is disabled.");}// 创建实况窗const defaultView = await LiveViewController.buildDefaultView();return await liveViewManager.startLiveView(defaultView);}private static async buildDefaultView(): Promise<liveViewManager.LiveView> {return {// 构造实况窗请求体id: 0, // 实况窗ID,开发者生成。event: "QUEUE", // 实况窗的应用场景。QUEUE:排队timer: {time: 620000,isCountdown: false,isPaused: false},liveViewData: {primary: {title: "大桌4人等位  32桌",content: [{ text: "已等待 " }, { text: "${placeholder.timer}", textColor:"#ff10c1f7" },{ text: " | 预计还需>30分钟" }], // 所有文本仅能设置为一种颜色,不设置textColor时,默认展示#FF000000keepTime: 15,clickAction: await LiveViewController.buildWantAgent(),layoutData: {layoutType: liveViewManager.LayoutType.LAYOUT_TYPE_PROGRESS,progress: 0,color: "#FFFF0000",backgroundColor: "#FF000000",indicatorType: liveViewManager.IndicatorType.INDICATOR_TYPE_OVERLAY,indicatorIcon: "indicator.png", // 进度条指示器图标,取值为
"/resources/rawfile"路径下的文件名lineType: liveViewManager.LineType.LINE_TYPE_DOTTED_LINE,nodeIcons: ["icon_1.png","icon_2.png"] // 进度条每个节点图标,取值为
"/resources/rawfile"路径下的文件名}}}};}... ...
}
3.本地更新和结束实况窗。

在本地创建完实况窗后,若应用业务状态发生变化,则需要调用liveViewManager的updateLiveView()更新实况窗,更新时对请求体中需要修改的对应参数进行修改。在该应用的服务进程结束时,需要调用stopLiveView()来结束实况窗。这里以即时配送场景的进度可视化模板为例,来说明更新和结束实况窗及实况胶囊的方法,具体示例代码如下:

import { liveViewManager } from '@kit.LiveViewKit';
import { Want, wantAgent } from '@kit.AbilityKit';export class LiveViewController {private static contentColor: string = '#FF000000';private static capsuleColor: string = '#FF308977';public async startLiveView(): Promise<liveViewManager.LiveViewResult> {// 校验实况窗开关是否打开if (!LiveViewController.isLiveViewEnabled()) {throw new Error("Live view is disabled.");}// 创建实况窗const defaultView = await LiveViewController.buildDefaultView();return await liveViewManager.startLiveView(defaultView);}public async updateLiveView(): Promise<liveViewManager.LiveViewResult> {// 校验实况窗开关是否打开if (!LiveViewController.isLiveViewEnabled()) {throw new Error("Live view is disabled.");}// 修改实况窗内容const defaultView = await LiveViewController.buildDefaultView();defaultView.liveViewData.primary.title = "预计23:49送达";defaultView.liveViewData.primary.content = [{ text: "等待商家接单,",textColor: LiveViewController.contentColor },{ text: "03:20未接单自动取消",textColor: LiveViewController.contentColor }];defaultView.liveViewData.primary.layoutData = {layoutType: liveViewManager.LayoutType.LAYOUT_TYPE_PROGRESS,progress: 0,lineType: 0,nodeIcons: [ // 进度条每个节点图标,取值为"/resources/rawfile"路径下的文件名'icon_store_white.png','icon_finish.png']};defaultView.liveViewData.capsule = {type: liveViewManager.CapsuleType.CAPSULE_TYPE_TEXT,status: 1,icon: 'capsule_store.png',backgroundColor: LiveViewController.capsuleColor,title: "待接单"};// 更新实况窗return await liveViewManager.updateLiveView(defaultView);}public async stopLiveView(): Promise<liveViewManager.LiveViewResult> {// 校验实况窗开关是否打开if (!LiveViewController.isLiveViewEnabled()) {throw new Error("Live view is disabled.");}// 修改实况窗内容const defaultView = await LiveViewController.buildDefaultView();defaultView.liveViewData.primary.title = '商品已送达';defaultView.liveViewData.primary.content = [{ text: '感谢您的认可,',textColor: LiveViewController.contentColor },{ text: '期待下一次光临',textColor: LiveViewController.contentColor }];defaultView.liveViewData.primary.layoutData = {layoutType: liveViewManager.LayoutType.LAYOUT_TYPE_PROGRESS,progress: 100,lineType: 0,nodeIcons: [ // 进度条每个节点图标,取值为"/resources/rawfile"路径下的文件名'icon_order.png','icon_finish.png']};defaultView.liveViewData.capsule = {type: liveViewManager.CapsuleType.CAPSULE_TYPE_TEXT,status: 1,icon: 'capsule_gps.png',backgroundColor: LiveViewController.capsuleColor,title: '已送达'};// 结束实况窗return await liveViewManager.stopLiveView(defaultView);}private static async buildDefaultView(): Promise<liveViewManager.LiveView> {return {// 构造实况窗请求体id: 0, // 实况窗ID,开发者生成。event: "DELIVERY", // 实况窗的应用场景。DELIVERY:即时配送(外卖、生鲜)liveViewData: {primary: {title: "餐品待支付",content: [{ text: "咖啡 ", textColor: "#FF000000" },{ text: "等2件商品", textColor: "#FF000000" }],keepTime: 15,clickAction: await LiveViewController.buildWantAgent(),layoutData: {layoutType: liveViewManager.LayoutType.LAYOUT_TYPE_PICKUP,title: "待支付金额",content: "25.5元",underlineColor: "#FF0A59F7",descPic: "coffee.png"}},// 实况胶囊相关参数capsule: {type: liveViewManager.CapsuleType.CAPSULE_TYPE_TEXT,status: 1,icon: "capsule_store.png",backgroundColor: "#FF308977",title: "待支付",content: "..."}}};}... ...
}

了解更多详情>>

获取实况窗服务开发指导文档

这篇关于深度解析HarmonyOS SDK实况窗服务源码,Get不同场景下的多种模板的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1118011

相关文章

网页解析 lxml 库--实战

lxml库使用流程 lxml 是 Python 的第三方解析库,完全使用 Python 语言编写,它对 XPath表达式提供了良好的支 持,因此能够了高效地解析 HTML/XML 文档。本节讲解如何通过 lxml 库解析 HTML 文档。 pip install lxml lxm| 库提供了一个 etree 模块,该模块专门用来解析 HTML/XML 文档,下面来介绍一下 lxml 库

HarmonyOS学习(七)——UI(五)常用布局总结

自适应布局 1.1、线性布局(LinearLayout) 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列,Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距,达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式,且在各类尺寸屏幕上表现一致,其中交叉轴为垂直时,取值为Vert

Hadoop企业开发案例调优场景

需求 (1)需求:从1G数据中,统计每个单词出现次数。服务器3台,每台配置4G内存,4核CPU,4线程。 (2)需求分析: 1G / 128m = 8个MapTask;1个ReduceTask;1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务(4    3    3) HDFS参数调优 (1)修改:hadoop-env.sh export HDFS_NAMENOD

2. c#从不同cs的文件调用函数

1.文件目录如下: 2. Program.cs文件的主函数如下 using System;using System.Collections.Generic;using System.Linq;using System.Threading.Tasks;using System.Windows.Forms;namespace datasAnalysis{internal static

poj3468(线段树成段更新模板题)

题意:包括两个操作:1、将[a.b]上的数字加上v;2、查询区间[a,b]上的和 下面的介绍是下解题思路: 首先介绍  lazy-tag思想:用一个变量记录每一个线段树节点的变化值,当这部分线段的一致性被破坏我们就将这个变化值传递给子区间,大大增加了线段树的效率。 比如现在需要对[a,b]区间值进行加c操作,那么就从根节点[1,n]开始调用update函数进行操作,如果刚好执行到一个子节点,

C++11第三弹:lambda表达式 | 新的类功能 | 模板的可变参数

🌈个人主页: 南桥几晴秋 🌈C++专栏: 南桥谈C++ 🌈C语言专栏: C语言学习系列 🌈Linux学习专栏: 南桥谈Linux 🌈数据结构学习专栏: 数据结构杂谈 🌈数据库学习专栏: 南桥谈MySQL 🌈Qt学习专栏: 南桥谈Qt 🌈菜鸡代码练习: 练习随想记录 🌈git学习: 南桥谈Git 🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈�

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来,一站式有声阅读平台听书系统 🌟&nbsp;开篇:遇见未来,从“智听”开始 在这个快节奏的时代,你是否渴望在忙碌的间隙,找到一片属于自己的宁静角落?是否梦想着能随时随地,沉浸在知识的海洋,或是故事的奇幻世界里?今天,就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统,它正悄悄改变着我们的阅读方式,让未来触手可及! 📚&nbsp;第一站:海量资源,应有尽有 走进“智听

【C++】_list常用方法解析及模拟实现

相信自己的力量,只要对自己始终保持信心,尽自己最大努力去完成任何事,就算事情最终结果是失败了,努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一:什么是list? •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二:list常用接口 •🌰1.默认成员函数 🔥构造函数(⭐) 🔥析构函数 •🌰2.list对象

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Python全栈,前后端开发,小程序开发,人工智能,js逆向,App逆向,网络系统安全,数据分析,Django,fastapi

poj 1258 Agri-Net(最小生成树模板代码)

感觉用这题来当模板更适合。 题意就是给你邻接矩阵求最小生成树啦。~ prim代码:效率很高。172k...0ms。 #include<stdio.h>#include<algorithm>using namespace std;const int MaxN = 101;const int INF = 0x3f3f3f3f;int g[MaxN][MaxN];int n