鸿蒙OS开发实例：【手撸服务卡片】

介绍

服务卡片指导文档位于“开发/应用模型/Stage模型开发指导/Stage模型应用组件”路径下，说明其极其重要。

本篇文章将分享实现服务卡片的过程和代码

准备

  1. 请参照[官方指导]，创建一个Demo工程，选择Stage模型
鸿蒙OS开发更多内容↓点击HarmonyOS与OpenHarmony技术
鸿蒙技术文档开发知识更新库gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md在这。或+mau123789学习，是v喔

搜狗高速浏览器截图20240326151547.png

  1. 熟读HarmonyOS 官方指导 “[创建一个ArkTS卡片]”

实践总结

  1. 应用打包时，不能选择“Deploy Muti Hap Packages”方式， 否则服务卡片不会显示任何内容
  2. 官方指导中没有提示添加权限“ohos.permission.KEEP_BACKGROUND_RUNNING”，如果不添加，则无法使用call方式来刷新卡片数据
  3. 卡片首次创建时，卡片Id无法传入到卡片中，需通过延时机制，二次更新

效果

Screenshot_20231201173024131.png

卡片元素说明

  1. 卡片共有使用到了7个控件
  2. 5个Text， 1个Image,  1个Rect
  3. Text('call') :  可点击，实验call事件刷新卡片内容
  4. Text('router'): 可点击，实验router事件刷新卡片内容
  5. Text('message'): 可点击，实验message事件刷新卡片内容
  6. Rect(): 实验卡片动画效果

服务卡片教程

  1. 请完全按照“创建一个ArkTS卡片”

  2. 修改生成的卡片代码（WidgetCard.ets）

let storageCard = new LocalStorage()

@Entry(storageCard)
@Component
struct WidgetCard {
  /*
   * The mini title.
   */
  readonly MINI_TITLE: string = 'Title';

  /*
   * The item title.
   */
  @LocalStorageProp('ITEM_TITLE')ITEM_TITLE: string = '标题';

  /*
   * The item content.
   */
  @LocalStorageProp('ITEM_CONTENT') ITEM_CONTENT: string = '天气不错';

  /*
   * The action type.
   */
  readonly ACTION_TYPE: string = 'router';

  /*
   * The ability name.
  */
  readonly ABILITY_NAME: string = 'EntryAbility';

  /*
   * The message.
   */
  readonly MESSAGE: string = '来自服务卡片';

  /*
   * The mini display priority.
   */
  readonly MINI_DISPLAY_PRIORITY: number = 2;

  /*
   * The max line.
   */
  readonly MAX_LINES: number = 1;

  /*
   * The with percentage setting.
   */
  readonly FULL_WIDTH_PERCENT: string = '100%';

  /*
   * The height percentage setting.
   */
  readonly FULL_HEIGHT_PERCENT: string = '100%';

  /*
   * Image height percentage setting.
   */
  readonly IMAGE_HEIGHT_PERCENT: string = '64%';
  @State mini: boolean = false;

  @State rectWidth: string = '30%'

  @LocalStorageProp('formId') formId: string = '0';

  build() {
    Row() {
      Column() {
        if (this.mini) {
          Column() {
            Text(this.MINI_TITLE)
              .fontSize($r('app.float.mini_title_font_size'))
              .fontColor($r('app.color.mini_text_font_color'))
              .margin({
                left: $r('app.float.mini_title_margin'),
                bottom: $r('app.float.mini_title_margin')
              })
          }
          .width(this.FULL_WIDTH_PERCENT)
          .alignItems(HorizontalAlign.End)
          .backgroundImageSize(ImageSize.Cover)
          .backgroundImage($r("app.media.ic_widget"), ImageRepeat.NoRepeat)
          .displayPriority(this.MINI_DISPLAY_PRIORITY)
        }
        Stack(){
          Image($r("app.media.ic_widget"))
            .width(this.FULL_WIDTH_PERCENT)
            .height('100%')
            .objectFit(ImageFit.Cover)
            .borderRadius($r('app.float.image_border_radius'))
          Rect()
            .width(this.rectWidth)
            .height('100%')
            .fill('#60ff0000')
            .animation({
              duration: 3000,
              curve: Curve.Linear,
              playMode: PlayMode.Normal,
              iterations: -1,
              onFinish:()=>{
                  if(this.rectWidth == '30%'){
                    this.rectWidth = '50%'
                  } else {
                    this.rectWidth = '30%'
                  }
              }})
          Row(){
            Column({space: 20}){
              Text('call')
                .fontColor(Color.Red)
                .onClick(()=>{
                  console.log('formId: '+this.formId)
                  postCardAction(this, {
                    'action': 'call',
                    'abilityName': 'EntryAbility',
                    'params': {
                      'method': 'funA',
                      'formId': this.formId
                    }
                  });
                })

              Text('router')
                .onClick(()=>{
                  postCardAction(this, {
                    'action': 'router',
                    'abilityName': 'EntryAbility',
                    'params': {
                      'msgTest': 'messageEvent'
                    }
                  });
                })
            }

            Column(){
              Text('message')
                .fontColor(Color.Green)
                .onClick(()=>{
                  postCardAction(this, {
                    'action': 'message',
                    'params': {
                      'msgTest': 'messageEvent'
                    }
                  });
                })
            }

          }.height('100%')
        }
        .width(this.FULL_WIDTH_PERCENT)
        .height(this.IMAGE_HEIGHT_PERCENT)

        Blank()
        Text(this.ITEM_TITLE)
          .fontSize($r('app.float.normal_title_font_size'))
        Text(this.ITEM_CONTENT)
          .maxLines(this.MAX_LINES)
          .fontSize($r('app.float.normal_content_font_size'))
          .textOverflow({ overflow: TextOverflow.Ellipsis })
      }
      .width(this.FULL_WIDTH_PERCENT)
      .height(this.FULL_HEIGHT_PERCENT)
      .alignItems(HorizontalAlign.Start)
      .backgroundColor($r('app.color.start_window_background'))
    }
    .height(this.FULL_HEIGHT_PERCENT)
    .alignItems(VerticalAlign.Top)
    .padding($r('app.float.row_padding'))
    .onClick(() => {
      postCardAction(this, {
        "action": this.ACTION_TYPE,
        "abilityName": this.ABILITY_NAME,
        "params": {
          "message": this.MESSAGE
        }
      });
    })
  }
}
  1. 修改应用入口EntryAbility.ets
import window from '@ohos.window';
import UIAbility from '@ohos.app.ability.UIAbility';
import formBindingData from '@ohos.app.form.formBindingData';
import formProvider from '@ohos.app.form.formProvider';
import formInfo from '@ohos.app.form.formInfo';

export default class EntryAbility extends UIAbility {
  storage: LocalStorage

  onCreate(want, launchParam) {
    try{
      let params = JSON.parse(want.parameters.params);

      console.log('onCreate ' + params['message'])
      this.storage = new LocalStorage({'ext': params['message']})
    } catch (e){
      console.log(e)
    }

    try{
      // 监听call事件所需的方法
      this.callee.on('funA', FunACall);
    } catch (e){
      console.log(e)
    }

    if (want.parameters[formInfo.FormParam.IDENTITY_KEY] !== undefined) {
      let curFormId = want.parameters[formInfo.FormParam.IDENTITY_KEY];
      updateCardContent(curFormId, "EntryAbility", "router-welcome")
    }

  }

  onNewWant(want, launchParam) {
    try{
      let params = JSON.parse(want.parameters.params);
      console.log('onNewWant ' + params['message'])
      this.storage = new LocalStorage({'ext': params['message']})
    } catch (e){
       console.log(e)
    }

  }

  onWindowStageCreate(windowStage: window.WindowStage) {
    windowStage.loadContent('pages/Index', this.storage, (err, data) => {
     });
  }

  onDestroy(){
    console.log('onDestroy')
    // this.callee.off('funA')
  }

}

// 在收到call事件后会触发callee监听的方法
function FunACall(data) {
  // 获取call事件中传递的所有参数
  try{
    let params = JSON.parse(data.readString())
    if (params.formId !== undefined) {
      let curFormId = params.formId;
      updateCardContent(curFormId, "EntryAbility", "caller-welcome")
    }
  } catch (e){
    console.log(e)
  }

  return null;
}

function updateCardContent(formId, method, content){
  let formData = {
    'ITEM_TITLE': method, // 和卡片布局中对应
    'ITEM_CONTENT': content, // 和卡片布局中对应
  };
  let formInfo = formBindingData.createFormBindingData(formData)

  formProvider.updateForm(formId, formInfo).then((data) => {
    console.info('FormAbility updateForm success.' + JSON.stringify(data));
  }).catch((error) => {
    console.error('FormAbility updateForm failed: ' + JSON.stringify(error));
  })
}
修改应用入入口页面Index.ets
let storage = new LocalStorage()

@Entry(storage)
@Component
struct Page {
  @State message: string = 'Hello World'
  @LocalStorageProp('ext') extLocalStorageParms: string = '';

  aboutToAppear(){

    console.log(this.extLocalStorageParms)

    if(this.extLocalStorageParms){
      this.message = this.extLocalStorageParms
    }

  }

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }

}
  1. 修改应用入入口页面Index.ets
let storage = new LocalStorage()

@Entry(storage)
@Component
struct Page {
  @State message: string = 'Hello World'
  @LocalStorageProp('ext') extLocalStorageParms: string = '';

  aboutToAppear(){

    console.log(this.extLocalStorageParms)

    if(this.extLocalStorageParms){
      this.message = this.extLocalStorageParms
    }

  }

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }

}
  1. 修改EntryFormAbility.ets
import formInfo from '@ohos.app.form.formInfo';
import formBindingData from '@ohos.app.form.formBindingData';
import FormExtensionAbility from '@ohos.app.form.FormExtensionAbility';
import formProvider from '@ohos.app.form.formProvider';

export default class EntryFormAbility extends FormExtensionAbility {

  onAddForm(want) {
    // Called to return a FormBindingData object.
    let formId = want.parameters["ohos.extra.param.key.form_identity"];

    let formData: Record<string, string> = {
      'formId': formId
    };

    console.log('onAddForm '+formId)

    let data = formBindingData.createFormBindingData(formData);

    setTimeout(()=>{
      formProvider.updateForm(formId, data).then((data) => {
        console.info('FormAbility updateForm success.' + JSON.stringify(data));
      }).catch((error) => {
        console.error('FormAbility updateForm failed: ' + JSON.stringify(error));
      })
    }, 1500)

    return data
  }

  onCastToNormalForm(formId) {
    // Called when the form provider is notified that a temporary form is successfully
    // converted to a normal form.
    console.log('onCastToNormalForm')
  }

  onUpdateForm(formId) {
    // Called to notify the form provider to update a specified form.
    console.log('onUpdateForm')
  }

  onChangeFormVisibility(newStatus) {
    // Called when the form provider receives form events from the system.
    console.log('onChangeFormVisibility')
  }

  onFormEvent(formId, message) {
    // Called when a specified message event defined by the form provider is triggered.
    console.log(message)

    this.updateCardContent(formId)
  }

  onRemoveForm(formId) {
    // Called to notify the form provider that a specified form has been destroyed.
    console.log('onRemoveForm')
  }

  onAcquireFormState(want) {
    // Called to return a {@link FormState} object.
    return formInfo.FormState.READY;
  }

  updateCardContent(formId){
    let formData = {
      'ITEM_TITLE': 'EntryFormAbility', // 和卡片布局中对应
      'ITEM_CONTENT': 'welcome', // 和卡片布局中对应
    };
    let formInfo = formBindingData.createFormBindingData(formData)

    formProvider.updateForm(formId, formInfo).then((data) => {
      console.info('FormAbility updateForm success.' + JSON.stringify(data));
    }).catch((error) => {
      console.error('FormAbility updateForm failed: ' + JSON.stringify(error));
    })
  }
};
  1. 在module.json5中添加权限
"requestPermissions": [
      {
        "name":  "ohos.permission.KEEP_BACKGROUND_RUNNING",
        "usedScene": {
          "abilities": ["EntryAbility"],
          "when": "inuse"
        }
      }
    ]

 7. 最后一步，请确认你的打包方式没有选择“Deploy Multi Hap Packages”,  否则将无法看到服务卡片内容

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/496651.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

eNSP-GRE简单配置

eNSP-GRE简单配置

目录 IP配置 公网全网通 配置隧道 路由配置 检测 1、按照图示配置 |P 地址 IP配置 配置主机IP地址&#xff1a; PC1&#xff1a; PC2&#xff1a; R1&#xff1a; <Huawei>sys Enter system view, return user view with CtrlZ. [Huawei]sysname R1 [R1]int g 0…
阅读更多...
mysql--事务四大特性与隔离级别

mysql--事务四大特性与隔离级别

事务四大特性与隔离级别 mysql事务的概念事务的属性事务控制语句转账示例 并发事务引发的问题脏读脏读场景 不可重复读幻读幻读场景 事务的隔离级别读未提交读已提交可重复读&#xff08;MySQL默认&#xff09; 总结 mysql事务的概念 事务就是一组操作的集合&#xff0c;他是一…
阅读更多...
春秋云境CVE-2022-24663

春秋云境CVE-2022-24663

简介 远程代码执行漏洞&#xff0c;任何订阅者都可以利用该漏洞发送带有“短代码”参数设置为 PHP Everywhere 的请求&#xff0c;并在站点上执行任意 PHP 代码。P.S. 存在常见用户名低权限用户弱口令 正文 进入首页我们没看到任何有价值的东西&#xff0c;那么就只好去寻找…
阅读更多...
【LeetCode】升级打怪之路 Day 28：回溯算法 — 括号生成 删除无效的括号

【LeetCode】升级打怪之路 Day 28：回溯算法 — 括号生成 删除无效的括号

今日题目&#xff1a; 22. 括号生成301. 删除无效的括号 参考文章&#xff1a; 回溯算法&#xff1a;括号生成回溯算法&#xff1a;删除无效的括号 这是两道使用回溯算法来解决与括号相关的问题&#xff0c;具备一定的难度&#xff0c;需要学习理解。 通过第一道题“括号生成”…
阅读更多...
Vivado使用（2）——综合运行与OOC

Vivado使用（2）——综合运行与OOC

目录 一、综合运行 二、OOC 2.1 如何设置 OOC 模块 2.2 存根文件和黑盒属性 2.3 使用限制 2.4 另一种设置方法 一、综合运行 一个“运行&#xff08;run&#xff09;”是指定义和配置设计在综合过程中的各方面&#xff0c;包括&#xff1a;使用到约束&#xff0c;针对的…
阅读更多...
Java常见限流用法介绍和实现

Java常见限流用法介绍和实现

目录 一、现象 二、工具 ​​​​​​1、AtomicInteger,AtomicLong 原子类操作 ​​​​​​2、RedisLua ​​​​​​3、Google Guava的RateLimiter 1&#xff09; 使用 2&#xff09; Demo 3&#xff09; 优化demo 4、阿里开源的Sentinel 三、算法 1、计数限流 &…
阅读更多...
Java实现猜数字游戏：编程入门之旅

Java实现猜数字游戏：编程入门之旅

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …
阅读更多...
HDFS的Shell操作及客户端配置方法

HDFS的Shell操作及客户端配置方法

HDFS进程启停命令 Hadoop HDFS组件内置了HDFS集群的一键启停脚本。 $HADOOP_HOME/sbin/start-dfs.sh&#xff0c;一键启动HDFS集群$HADOOP_HOME/sbin/stop-dfs.sh&#xff0c;一键关闭HDFS集群 执行原理&#xff1a; 在执行此脚本的机器上&#xff0c;启动&#xff08;关闭&…
阅读更多...
二叉树|538.把二叉搜索树换为累加树

二叉树|538.把二叉搜索树换为累加树

力扣题目链接 class Solution { private:int pre 0; // 记录前一个节点的数值void traversal(TreeNode* cur) { // 右中左遍历if (cur NULL) return;traversal(cur->right);cur->val pre;pre cur->val;traversal(cur->left);} public:TreeNode* convertBST(Tre…
阅读更多...
阎淑萍：老母猪戴口罩还挺重视这张老脸啊，赵本山：我也相当副科级呀！

阎淑萍：老母猪戴口罩还挺重视这张老脸啊，赵本山：我也相当副科级呀！

阎淑萍&#xff1a;老母猪戴口罩还挺重视这张老脸啊&#xff0c;赵本山&#xff1a;我也相当副科级呀&#xff01; ——小品《老拜年》&#xff08;上&#xff09;的台词 《老拜年》 是赵本山、阎淑萍、王中青、苏杰在《1993年中央电视台春节联欢晚会》上表演的小品&#xff0…
阅读更多...
web全栈架构师第16期教程

web全栈架构师第16期教程

教程介绍 互联网时代已进入后半场&#xff0c;行业环境发生了显著变化。互联网人&#xff0c;尤其是技术人员&#xff0c;如何在加速更迭的技术浪潮中持续充电&#xff0c;提升自身价值&#xff0c;是当下必须面对的挑战。课程涉及了现下前端实际开发时所需要的各块内容&#…
阅读更多...
发现数据异常波动怎么办？别慌，指标监控和归因分析来帮你

发现数据异常波动怎么办？别慌，指标监控和归因分析来帮你

企业搭建完善、全面的指标体系是企业用数据指导业务经营决策的第一步。但是做完指标之后&#xff0c;对指标的监控&#xff0c;经常被大家忽视。当指标发生了异常波动&#xff08;上升或下降&#xff09;&#xff0c;需要企业能够及时发现&#xff0c;并快速找到背后真实的原因…
阅读更多...
Xcode删除原本的Git，再添加新的git

Xcode删除原本的Git，再添加新的git

本文参考&#xff1a;Xcode怎么删除原本git,在重新设置新的git地址_ios xcode 删除原本git-CSDN博客 开发中会有一个问题。Xcode项目A 提交到Git服务器server1&#xff0c;此时项目A内部已经存在一个Git文件&#xff0c;与server1相关联。 此时你想将项目A提交到 另一个Git…
阅读更多...
算法打卡day30|贪心算法篇04|Leetcode 860.柠檬水找零、406.根据身高重建队列、452. 用最少数量的箭引爆气球

算法打卡day30|贪心算法篇04|Leetcode 860.柠檬水找零、406.根据身高重建队列、452. 用最少数量的箭引爆气球

算法题 Leetcode 860.柠檬水找零 题目链接:860.柠檬水找零 大佬视频讲解&#xff1a;柠檬水找零视频讲解 个人思路 5元最通用&#xff0c;然后是10元&#xff0c;所以如果是对于20元找零直接先找10元&#xff0c;也涉及到贪心的思想&#xff0c;可以用贪心算法。 解法 贪心法…
阅读更多...
加密流量分类torch实践5：TrafficClassificationPandemonium项目更新3

加密流量分类torch实践5：TrafficClassificationPandemonium项目更新3

加密流量分类torch实践5&#xff1a;TrafficClassificationPandemonium项目更新3 更新日志 代码已经推送开源至露露云的github&#xff0c;如果能帮助你&#xff0c;就给鼠鼠点一个star吧&#xff01;&#xff01;&#xff01; 我的CSDN博客 我的Github Page博客 3/23日更新…
阅读更多...
打造核心竞争力：高效Web系统数据中台的设计与实践_光点科技

打造核心竞争力：高效Web系统数据中台的设计与实践_光点科技

在数字化的浪潮中&#xff0c;数据已经成为企业赖以生存和发展的核心资源。一个高效的Web系统数据中台&#xff0c;能够赋予企业在激烈的市场竞争中立于不败之地的能力。本文将深入探讨如何设计和实施一个能够提升企业数据管理水平和支持业务决策的高效数据中台架构。 数据中台…
阅读更多...
基于Python实现多功能翻译助手（下）

基于Python实现多功能翻译助手（下）

为了将上述步骤中的功能增强与扩展具体化为代码&#xff0c;我们将实现翻译历史记录功能、翻译选项配置以及UI的改进。 翻译历史记录功能 import json # 假设有一个用于存储历史记录的json文件 HISTORY_FILE translation_history.json # 初始化历史记录列表 translati…
阅读更多...
数组---

数组---

1、数组的定义 Java中&#xff0c;数组存储固定大小的同类型元素。 数组是多个相同类型数据按一定顺序排列的集合&#xff0c;并使用一个名字命名&#xff0c;通过编号的方式对这些数据进行统一的管理。 数组的特点&#xff1a; 数组本身是引用数据类型&#xff0c;但数组中的…
阅读更多...
Spring使用（一）注解

Spring使用（一）注解

Spring使用 资源 Spring 框架内部使用 Resource 接口作为所有资源的抽象和访问接口&#xff0c;在上一篇文章的示例代码中的配置文件是通过ClassPathResource 进行封装的&#xff0c;ClassPathResource 是 Resource 的一个特定类型的实现&#xff0c;代表的是位于 classpath …
阅读更多...
vue3+Pinia的使用 - 封装

vue3+Pinia的使用 - 封装

目录&#xff1a; persist.ts 可存储到本地 import { PersistedStateOptions } from "pinia-plugin-persistedstate";/*** description pinia 持久化参数配置* param {String} key 存储到持久化的 name* param {Array} paths 需要持久化的 state name* return per…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站