#HarmonyOS征文#鸿蒙卡片-物联网DTU污水液位计卡片 - HarmonyOS技术社区 - 电子技术论坛

2021-06-26 08:59:30

HarmonyOS 物联网

1.效果视频：假如中国空间站用上了鸿蒙系统

2.效果视频：哔哩哔哩弹幕姬鸿蒙版

视频里面是液位计卡片的翻版(改改字)
gitee地址：因为应用准备上架暂不提供源码

目录
1.前言&项目背景
2.服务卡片的UI设计
  2.1尺寸选择
  2.2内容构成
  2.3污水液位计卡片原型设计
3.基本概念
  3.1卡片使用方
  3.2卡片管理服务
  3.3卡片提供方
4.运作机制
  4.1卡片管理服务包含以下模块
  4.2卡片提供方包含以下模块
5.服务卡片开发环境搭建和基本页面开发
  5.1开发环境
  5.2新建HarmonyOS手机项目
  5.3卡片基础配置
  5.4卡片基础界面编写代码
6.服务卡片基本开发教程
  6.1增加点击跳转查看详情页面
  6.2增加简单的长按编辑页面
  6.3数据手动刷新
7.服务卡片进阶开发教程
  7.1数据定时刷新
  7.2编辑页面开发&编辑更新卡片逻辑开发
  7.3自定义刷新策略
8.小卡片和硬件HI3861交互
9.分布式卡片开发
10.哔哩哔哩弹幕姬鸿蒙版

1. 前言&项目背景
鸿蒙在手机beta3中新增了桌面卡片，我也是在第一时间体验了一下新浪新闻鸿蒙版的新闻小卡片，我觉得非常有意思，并且我觉得可以用在物联网项目的污水液位计的液位展示中，可以实现碰一碰获取液位计数据展示在小卡片中。
HarmonyOS推出的服务卡片，是FA（Feature Ability）的界面展现形式，将FA的重要信息或者操作前置到卡片上，以达到服务直达的目的。
系统自带卡片实际界面如下图所示：

2. 服务卡片的UI设计
2.1尺寸选择
鸿蒙的服务卡片尺寸分别为：微（1×2）、小（ 2×2 ）、中（ 2×4 ）、大(4×4)4种尺寸。

服务卡片示例-From：作者：zengsi，华为软件开发工程师
污水液位计卡片展示数据比较少，所以我选了2×2的小卡片，和2×4的小卡片。2*2的小卡片主要是展示的是单个液位计的数据，而2×4的小卡片展示的是多个液位计的数据的总体展示
2.2 内容构成
服务卡片由多种设计元素组合而成，以下7种常见信息元素可以作为内容选择：
图标、数据、文本、按钮、图片、宫格、列表
污水液位计卡片我觉得主要展示的是当前的液位和液位计的历史曲线，所以我这个污水液位计卡片由数据、文本、曲线图、列表和按钮组成。
2.3 污水液位计卡片原型设计
采用水平垂直居中的布局，因为重要的数据是当前液位，所以当前液位采用18px的黑色字体，点击查看详情用是#53A7F3颜色的15px字，曲线使用#53A7F3颜色更显科技感

3. 基本概念
3.1 卡片使用方

显示卡片内容的宿主应用，控制卡片在宿主中展示的位置。

3.2 卡片管理服务

用于管理系统中所添加卡片的常驻代理服务，包括卡片对象的管理与使用，以及卡片周期性刷新等。

3.3 卡片提供方

提供卡片显示内容的HarmonyOS应用或原子化服务，控制卡片的显示内容、控件布局以及控件点击事件。

来自：https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ability-service-widget-overview-0000001062607955
4. 运作机制

卡片管理服务包含以下模块：

周期性刷新：在卡片添加后，根据卡片的刷新策略启动定时任务周期性触发卡片的刷新。
卡片缓存管理：在卡片添加到卡片管理服务后，对卡片的视图信息进行缓存，以便下次获取卡片时可以直接返回缓存数据，降低时延。
卡片生命周期管理：对于卡片切换到后台或者被遮挡时，暂停卡片的刷新；以及卡片的升级/卸载场景下对卡片数据的更新和清理。
卡片使用方对象管理：对卡片使用方的RPC对象进行管理，用于使用方请求进行校验以及对卡片更新后的回调处理。
通信适配层：负责与卡片使用方和提供方进行RPC通信。

卡片提供方包含以下模块：

卡片服务：由卡片提供方开发者实现，开发者实现onCreateForm、onUpdateForm和onDeleteForm处理创建卡片、更新卡片以及删除卡片等请求，提供相应的卡片服务。
卡片提供方实例管理模块：由卡片提供方开发者实现，负责对卡片管理服务分配的卡片实例进行持久化管理。
通信适配层：由HarmonyOS SDK提供，负责与卡片管理服务通信，用于将卡片的更新数据主动推送到卡片管理服务。

来自：https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ability-service-widget-overview-0000001062607955

5. 服务卡片开发环境搭建和基本页面开发
5.1 开发环境
1.一台升级了鸿蒙2.0的手机/登录华为开发者账号使用远程模拟器
2.下载安装DevEco Studio 2.1 Release
DevEco下载安装教程：https://developer.harmonyos.com/cn/docs/documentation/doc-guides/installation_process-0000001071425528
因为本文的重点是卡片，deveco安装教程和真机调试请看下面我的教程
https://blog.csdn.net/qq_33259323/article/details/112405157
5.2 新建HarmonyOS手机项目API选择5，show in service senter打勾

5.3 卡片基础配置
然后打开配置文件src/main/config.json，配置你所需要的卡片样式，详细配置请看
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/basic-config-file-elements-0000000000034463#ZH-CN_TOPIC_0000001064016070__table8276925145611

我这边选择的是2*2的小卡片，其他的都是默认所以只需要改一下名字和描述，注意文件夹名字要和name对应，如果不对应就是白卡片

5.4 卡片基础界面编写代码
编写hml，通过{{}}绑定index.json里面的数据

<div class="container">
<div class="title">
<text class="text_title">1#液位计: </text>
<text class="text_title">{{temperature}}</text>
<text class="text_title"> m</text>
</div>
<stack class="chart_region">
<chart class="chart_data" type="line" options="{{lineOps}}" datasets="{{lineData}}"></chart>
</stack>
<text class="text_nav">点击查看详情</text>
</div>

复制代码

编写CSS

.container {
flex-direction: column;
justify-content: center;
align-items: center;
}
.title{
width: 100%;
height: 30px;
justify-content: center;
}
.text_title {
font-size: 15px;
}
.chart_region{
height: 90px;
}
.chart_data{
}
.text_nav {
font-size: 15px;
color: #53A7F3;
}

复制代码

编写JSON

{
"data": {
"level": "12",
"lineData": [
{
"strokeColor": "#7fccde",
"fillColor": "#7fccde",
"data": [0,10,20,12,13,10,40,10,5,9,14,18,20,30,10,20,10,17],
"gradient": true
}
],
"lineOps": {
"xAxis": {
"min": 0,
"max": 15,
"display": false
},
"yAxis": {
"min": 0,
"max": 24,
"display": false
},
"series": {
"lineStyle": {
"width": "1px",
"smooth": true
},
"headPoint": {
"shape": "circle",
"size": 10,
"strokeWidth": 3,
"fillColor": "#ffffff",
"strokeColor": "#7fccde",
"display": true
}
}
}
}
}

复制代码

可以先使用预览器看一下界面，或者直接运行
双击打开index.hml，然后点击右侧的预览器

6. 服务卡片基本开发教程
6.1 增加点击跳转查看详情页面
1.在hml增加点击事件
<text class="text_nav">点击查看详情</text>

2.创建需要跳转的Ability(CardFormAbility)

3.编写index.json文件
其中 routerEvent 就是在hml中的onclick属性值，action为router，abilityName为需要跳转到的ability名字

4.编写跳转测试页面

package com.example.phone.ability;
import ohos.ace.ability.AceAbility;
import ohos.aafwk.content.Intent;
public class CardFormAbility extends AceAbility {
@Override
public void onStart(Intent intent) {
setInstanceName("CardForm");
super.onStart(intent);
}
@Override
public void onStop() {
super.onStop();
}
}

复制代码

6.2 增加简单的长按编辑页面
1.创建卡片编辑Ability(LevelCardConfigAbility)
点击File>New>Ability>Page Ability(JS)

在LevelCardConfigAbility.onstart中添加setInstanceName("LevelCardConfig");

package com.example.phone.ability;
import ohos.ace.ability.AceAbility;
import ohos.aafwk.content.Intent;
public class LevelCardConfigAbility extends AceAbility {
@Override
public void onStart(Intent intent) {
setInstanceName("LevelCardConfig");
super.onStart(intent);
}
@Override
public void onStop() {
super.onStop();
}
}

复制代码

在hml中添加示例代码

2.在配置文件中增加属性：formConfigAbility
"formConfigAbility": "ability://com.example.phone.ability.LevelCardConfigAbility"

污水液位计卡片编辑页面详细开发请看：6.9
6.3 数据手动刷新1. 在卡片编辑小卡片添加手动刷新事件
index.hml

index.json

2. 创建CardFormAbility(如果之前已经创建过了就不用创建了)
在src/main/config.json中，如果你的小卡片是卸载MainAbility里面的，就不需要创建这个CardFormAbility，我是为了方便分开来，把卡片配置写在CardFormAbility中

因为是演示代码，所以请求后台服务器获得数据的代码放在onTriggerFormEvent中

package com.example.phone.ability;
import ohos.aafwk.ability.FormBindingData;
import ohos.aafwk.ability.FormException;
import ohos.ace.ability.AceAbility;
import ohos.aafwk.content.Intent;
import ohos.hiviewdfx.HiLogLabel;
import ohos.utils.zson.ZSONObject;
public class CardFormAbility extends AceAbility {
private static final HiLogLabel LABEL_LOG = new HiLogLabel(3, 0xD001100, "CardFormAbility");
@Override
public void onStart(Intent intent) {
setInstanceName("CardForm");
super.onStart(intent);
}
@Override
public void onStop() {
super.onStop();
}
@Override
protected void onTriggerFormEvent(long formId, String message) {
// 解析收到的数据
ZSONObject messageJSON = ZSONObject.stringToZSON(message);
if(messageJSON.get("message").equals("updata")){ // 更新数据
ZSONObject zsonObject = new ZSONObject();
// 请求后台服务器获得数据
zsonObject.put("level", "100");
FormBindingData formBindingData = new FormBindingData(zsonObject);
try {
// 更新数据
if (!updateForm(formId, formBindingData)) {
}
} catch (FormException e) {
e.printStackTrace();
}
}
super.onTriggerFormEvent(formId, message);
}
}

复制代码

这样点击index.hml中的标题，就可以更新数据了

7. 服务卡片进阶开发教程
7.1 数据定时刷新
7.1.1 使用鸿蒙自带的定时刷新
1. 数据定时刷新需要在src/main/config.json配置文件中配置，是否开启定时刷新和定时刷新的时间，在6.3中有介绍
"updateEnabled": true,"updateDuration": 1

2. 编写CardFormAbility，重写onUpdateForm方法

@Override
protected void onUpdateForm(long formId) {
super.onUpdateForm(formId);
ZSONObject zsonObject = new ZSONObject();
zsonObject.put("level", "1.123");
FormBindingData formBindingData = new FormBindingData(zsonObject);
// 调用updateForm接口去更新对应的卡片，仅更新入参中携带的数据信息，其他信息保持不变
try {
if (!updateForm(formId, formBindingData)) {
// err process
}
} catch (FormException e) {
e.printStackTrace();
}
}

复制代码

7.1.2 自定义刷新策略
请看7.3
7.2 编辑页面开发&编辑更新卡片逻辑开发
1.页面开发
index.hml

<div class="container">
<text class="title">
选择液位计
</text>
<list class="todo-wraper">
<list-item for="{{todolist}}" class="todo-item" @click="choose({{$item.id}}})">
<text class="todo-title">{{$item.title}}</text>
</list-item>
</list>
</div>

复制代码

index.css

.container {
flex-direction: column;
justify-content: center;
align-items: center;
}
.title {
font-size: 40px;
color: #000000;
opacity: 0.9;
}
.todo-wraper {
width: 454px;
height: 300px;
margin-top: 20px;
}
.todo-item {
width: 454px;
height: 80px;
flex-direction: column;
}
.todo-title {
width: 454px;
height: 40px;
text-align: center;
}

复制代码

index.js

import prompt from '@system.prompt';
const ABILITY_TYPE_EXTERNAL = 0;
const ACTION_SYNC = 0;
const CHOOSE_LEVEL = 1001;
// 给CardServiceAbility发送选择的ID
export const CardFormAbility = {
choose: async function(id){
var action = {};
action.bundleName = 'com.example.phone';
action.abilityName = 'com.example.phone.ability.CardServiceAbility';
action.messageCode = CHOOSE_LEVEL;
action.data = id;
action.abilityType = ABILITY_TYPE_EXTERNAL;
action.syncOption = ACTION_SYNC;
var result = await FeatureAbility.callAbility(action);
var ret = JSON.parse(result);
if (ret.code == 0) {
} else {
}
}
}
export default {
data: {
title: "",
todolist: [{
title: '1#液位计',
id: 1
}, {
title: '2#液位计',
id: 2
},{
title: '3#液位计',
id: 3
}],
},
onInit() {
this.title = this.$t('strings.world');
},
choose(id) {
CardFormAbility.choose(id);
}
}

复制代码

2.编写LevelCardConfigAbility来保存卡片ID

package com.example.phone.ability;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.IntentParams;
import ohos.ace.ability.AceAbility;
import ohos.aafwk.content.Intent;
public class LevelCardConfigAbility extends AceAbility {
public static Long cardId;
@Override
public void onStart(Intent intent) {
setInstanceName("LevelCard");
// 获取卡片ID并进行保存
IntentParams params = intent.getParams();
cardId = (long) params.getParam(AbilitySlice.PARAM_FORM_IDENTITY_KEY);
super.onStart(intent);
}
@Override
public void onStop() {
super.onStop();
}
}

复制代码

3.创建CardServiceAbility来获取配置页面的配置信息并且更新卡片

package com.example.phone.ability;
import ohos.aafwk.ability.Ability;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.ability.FormBindingData;
import ohos.aafwk.ability.FormException;
import ohos.aafwk.content.Intent;
import ohos.aafwk.content.IntentParams;
import ohos.app.Context;
import ohos.rpc.*;
import ohos.hiviewdfx.HiLog;
import ohos.hiviewdfx.HiLogLabel;
import ohos.utils.zson.ZSONObject;
public class CardServiceAbility extends Ability {
private static final HiLogLabel LABEL_LOG = new HiLogLabel(3, 0xD001100, "Demo");
private CardServiceAbility.CardServiceRemote cardServiceRemote;
private static final int CHOOSE_LEVEL = 1001;
@Override
public void onStart(Intent intent) {
HiLog.error(LABEL_LOG, "CardServiceAbility::onStart");
cardServiceRemote = new CardServiceRemote();
super.onStart(intent);
}
@Override
protected IRemoteObject onConnect(Intent intent) {
super.onConnect(intent);
return cardServiceRemote.asObject();
}
@Override
public void onDisconnect(Intent intent) {
}
class CardServiceRemote extends RemoteObject implements IRemoteBroker {
public CardServiceRemote() {
super("CardServiceRemote");
}
@Override
public boolean onRemoteRequest(int code, MessageParcel data, MessageParcel reply, MessageOption option) throws RemoteException {
switch (code) {
case CHOOSE_LEVEL:{
String zsonStr = data.readString();
ZSONObject zsonObject = new ZSONObject();
zsonObject.put("name", zsonStr+"#液位计：");
FormBindingData formBindingData = new FormBindingData(zsonObject);
try {
if (!updateForm(LevelCardConfigAbility.cardId, formBindingData)) {
// err process
}
} catch (FormException e) {
e.printStackTrace();
}
break;
}
default: {
reply.writeString("service not defined");
return false;
}
}
return true;
}
@Override
public IRemoteObject asObject() {
return this;
}
}
}

复制代码

效果：

编辑页面详情

7.3 自定义刷新策略
7.3.1 关系型数据库加入包
1.1 在对应的entry的build.gradle中添加包

dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])
testCompile 'junit:junit:4.12'
compile files(ORM_ANNOTATIONS_JAVA, ORM_ANNOTATIONS_PROCESSOR_JAVA, JAVAPOET_JAVA)
annotationProcessor files(ORM_ANNOTATIONS_JAVA, ORM_ANNOTATIONS_PROCESSOR_JAVA, JAVAPOET_JAVA)
}

复制代码

1.2 在gradle.properties中添加gradle全局变量

JAVAPOET_JAVA=C:/Users/XX/AppData/Local/Huawei/Sdk/java/2.1.1.21/build-tools/lib/javapoet_java.jar
ORM_ANNOTATIONS_PROCESSOR_JAVA=C:/Users/XX/AppData/Local/Huawei/Sdk/java/2.1.1.21/build-tools/lib/orm_annotations_processor_java.jar
ORM_ANNOTATIONS_JAVA=C:/Users/XX/AppData/Local/Huawei/Sdk/java/2.1.1.21/build-tools/lib/orm_annotations_java.jar

复制代码

1.3 重新构建
7.3.2 创建数据库类和表类
1.数据库类
例如，定义了一个数据库类LevelStore.java，数据库包含了“Level”表，版本号为“1”。数据库类的getVersion方法和getHelper方法不需要实现，直接将数据库类设为虚类即可。

package com.example.phone.store;
import com.example.phone.store.from.Level;
import ohos.data.orm.OrmDatabase;
import ohos.data.orm.annotation.Database;
@Database(entities = {Level.class}, version = 1)
public abstract class LevelStore extends OrmDatabase {
}

复制代码

2.创建表类

package com.example.phone.store.from;
import ohos.data.orm.OrmObject;
import ohos.data.orm.annotation.Entity;
import ohos.data.orm.annotation.PrimaryKey;
@Entity(tableName = "level")
public class Level extends OrmObject {
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public String getName() {
return name;
}
public Level() {
}
public Level(Long id, String name) {
this.id = id;
this.name = name;
}
@Override
public String toString() {
return "LevelCard{" +
"id=" + id +
", name='" + name + ''' +
'}';
}
public void setName(String name) {
this.name = name;
}
@PrimaryKey(autoGenerate = true)
private Long id;
private String name;
}

复制代码

7.3.3 卡片数据将存在数据库并定时刷新

private static OrmContext ormContext = null;
private DatabaseHelper helper = new DatabaseHelper(this);
@Override
protected ProviderFormInfo onCreateForm(Intent intent) {
IntentParams params = intent.getParams();
if (params == null) {
return null;
}
// 卡片ID
Long formId = (long) params.getParam(AbilitySlice.PARAM_FORM_IDENTITY_KEY);
// 卡片名称
String formName = (String) params.getParam(AbilitySlice.PARAM_FORM_NAME_KEY);
// 卡片规格信息
int specificationId = (int) params.getParam(AbilitySlice.PARAM_FORM_DIMENSION_KEY);
System.out.println( "创建卡片: " + formId + " " + formName + " " + specificationId);
if(ormContext == null){
createDataBase(getContext());
}
// 存储数据
Level newLevel = new Level(formId, formName);
boolean isSuccessed = ormContext.insert(newLevel);
isSuccessed = ormContext.flush();
}
public void createDataBase(Context context){
// 创建数据库
ormContext = helper.getOrmContext("LevelStore", "LevelStore.db", LevelStore.class);
// 启动定时刷新程序
startTimer();
}
private void startTimer(){
Timer timer = new Timer();
timer.schedule(new TimerTask() {
@Override
public void run() {
// 查询数据库获取数据
OrmPredicates query = ormContext.where(Level.class);
List<Level> levelCard = ormContext.query(query);
ZSONObject zsonObject = new ZSONObject();
try {
for (Level l:levelCard){
Long formId = l.getId();
// 设置数据
double randomLevel = Math.random()*10;
DecimalFormat randomLevelDf = new DecimalFormat( "0.00");
zsonObject.put("level", randomLevelDf.format(randomLevel));
FormBindingData formBindingData = new FormBindingData(zsonObject);
if (!updateForm(formId, formBindingData)) {
deleteLevelCard(formId);
}
}
} catch (FormException e) {
e.printStackTrace();
}
}
},5,700L);
}

复制代码

效果展示，演示视频：

8.小卡片和硬件HI3861交互 通过创建两个线程来处理接收和发送的数据

System.out.println("连接设备");
if(socket == null) {
TaskDispatcher globalTaskDispatcher = null;
globalTaskDispatcher = context.getGlobalTaskDispatcher(TaskPriority.DEFAULT);
try {
socket = new Socket("192.168.1.1", 30001);
os = socket.getOutputStream();
socket.setSoTimeout(3000);
} catch (IOException e) {
e.printStackTrace();
System.out.println("服务器连接失败");
ZSONObject zsonObjectData = new ZSONObject();
zsonObjectData.put("code",1);
zsonObjectData.put("msg","服务器连接失败");
reply.writeString(zsonObjectData.toString());
break;
}
// 接收线程
Revocable revocable = globalTaskDispatcher.asyncDispatch(new Runnable() {
@Override
public void run() {
System.out.println("发送线程启动");
while(true){
if(sendFlag == 1){
System.out.println("发送数据...");
PrintWriter pw = new PrintWriter(os);
pw.write(sendMsg);
pw.flush();
sendFlag = 0;
}
}
}
});
// 发送线程
Revocable revocable2 = globalTaskDispatcher.asyncDispatch(new Runnable() {
@Override
public void run() {
System.out.println("发送线程启动");
InputStream in = null;
try {
in = socket.getInputStream();
} catch (IOException e) {
e.printStackTrace();
}
while(true){
int len;
byte[] bytes = new byte[1024];
try {
while ((len = in.read(bytes)) != -1) { //此函数是阻塞的
getMsg = new String(bytes,0,len, StandardCharsets.UTF_8);
getFlag = 1;
}
}catch (IOException e){
System.out.println(e.toString());
}
System.out.println("Connection interruption");
}
}
});
}

复制代码

// 发送数据
ZSONObject zdata = new ZSONObject();
zdata.put("code",1);
sendMsg = zdata.toString();
sendFlag = 1;
//接收数据
while(true){
if(getFlag == 1){
String backData = getMsg;
ZSONObject zsonObjectData = new ZSONObject();
zsonObjectData.put("code",0);
zsonObjectData.put("adData",backData);
reply.writeString(zsonObjectData.toString());
getFlag = 0;
break;
}
}

复制代码

在CardServiceAbility中读取接收到的getMsg变量在调用updateForm函数
9.分布式卡片开发

10.哔哩哔哩弹幕姬鸿蒙版

我这里只提供思路,和逻辑，教程上面都有我就别写了
1.创建卡片数据库和卡片表
2.创建JS卡片和卡片的Ability
3.创建弹幕卡片编辑页面FA
4.创建弹幕卡片编辑PA
5.编写JS卡片

6.编写卡片编辑页面

7.配置小卡片，把编辑页面的ability加入卡片配置，修改卡片的名字等等
8.处理卡片创建
卡片创建时把ID存在卡片数据库
9.编写卡片编辑逻辑
JS获取input输入mid，点击搜索请求，获取主播信息数据，把请求返回数据设置到页面上去
https://api.bilibili.com/x/space/acc/info?mid=123456

{
"code": 0,
"message": "0",
"ttl": 1,
"data": {
"mid": 123456,
"name": "哦哈哟",
"sex": "男",
"face": "http://i0.hdslb.com/bfs/face/2fa84e04217f91399fb93d7eb2716a5eee55ec78.jpg",
"sign": "不卖老板我不卖",
"rank": 10000,
"level": 5,
"jointime": 0,
"moral": 0,
"silence": 0,
"birthday": "01-01",
"coins": 0,
"fans_badge": false,
"official": {
"role": 0,
"title": "",
"desc": "",
"type": -1
},
"vip": {
"type": 2,
"status": 1,
"due_date": 2044454400000,
"vip_pay_type": 0,
"theme_type": 0,
"label": {
"path": "http://i0.hdslb.com/bfs/vip/label_annual.png",
"text": "十年大会员",
"label_theme": "ten_annual_vip",
"text_color": "#FFFFFF",
"bg_style": 1,
"bg_color": "#FB7299",
"border_color": ""
},
"avatar_subscript": 1,
"nickname_color": "#FB7299",
"role": 7,
"avatar_subscript_url": "http://i0.hdslb.com/bfs/vip/icon_Certification_big_member_22_3x.png"
},
"pendant": {
"pid": 462,
"name": "地中海",
"image": "http://i0.hdslb.com/bfs/face/c8735da69314d54144a0b1fde5d69676ce72d7b6.png",
"expire": 0,
"image_enhance": "http://i0.hdslb.com/bfs/face/c8735da69314d54144a0b1fde5d69676ce72d7b6.png",
"image_enhance_frame": ""
},
"nameplate": {
"nid": 88,
"name": "十年大会员",
"image": "http://i1.hdslb.com/bfs/face/5b04cc2fb1c479874cac145eb7ac7098a1e081d9.png",
"image_small": "http://i2.hdslb.com/bfs/face/b44b390de6b68a9ac7087b3bef07ad90a46101c4.png",
"level": "稀有勋章",
"condition": "累计开通大会员总时长u003e=10年即可获得"
},
"user_honour_info": {
"mid": 0,
"colour": null,
"tags": null
},
"is_followed": false,
"top_photo": "http://i2.hdslb.com/bfs/space/cb1c3ef50e22b6096fde67febe863494caefebad.png",
"theme": {},
"sys_notice": {},
"live_room": {
"roomStatus": 1,
"liveStatus": 0,
"url": "https://live.bilibili.com/5052841",
"title": "",
"cover": "",
"online": 0,
"roomid": 5052841,
"roundStatus": 0,
"broadcast_type": 0
}
}
}

复制代码

点击确认调用弹幕卡片编辑PA，把请求返回数据整理后发给PA，在PA中把主播信息数据存到对应卡片的数据库中
10.定时更新逻辑
从数据库中读取卡片列表设置数据，在项目中添加okhttp包
implementation 'com.squareup.okhttp3:okhttp:4.4.0'在定时更新逻辑中请求获取直播间弹幕，其中roomid是从编辑页面获取到的主播信息数据中拿到的
https://api.live.bilibili.com/xlive/web-room/v1/dM/gethistory?roomid=23208586

{
"code": 0,
"data": {
"admin": [{
"text": "白白",
"uid": 454613875,
"nickname": "昆士兰村民",
"uname_color": "#00D1F1",
"timeline": "2021-06-27 20:10:51",
"isadmin": 1,
"vip": 0,
"svip": 0,
"medal": [22, "鬼来了", "2999狼外婆", 23208586, 1725515, "", 0, 6809855, 1725515, 5414290, 3, 1, 71598153],
"title": ["", ""],
"user_level": [2, 0, 9868950, "u003e50000"],
"rank": 10000,
"teamid": 0,
"rnd": "537003298",
"user_title": "",
"guard_level": 3,
"bubble": 5,
"bubble_color": "#1453BAFF,#4C2263A2,#3353BAFF",
"check_info": {
"ts": 1624795851,
"ct": "1BF7F361"
},
"lpl": 0
}]
},
"message": "",
"msg": ""
}

复制代码

回帖高级模式

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容图片侵权或者其他问题，请联系本站作侵删。侵权投诉

[文章]#HarmonyOS征文#鸿蒙卡片-物联网DTU污水液位计卡片

回帖高级模式