【HarmonyOS】服务卡片 API6 JSUI跳转不同页面

【引言】

“JS卡片支持为组件设置action,包括router事件和message事件,其中router事件用于应用跳。若设置router事件,则action属性值为"router";abilityName为卡片提供方应用的跳转目标Ability名;params中的值按需填写,其值在使用时通过intent.getStringParam("params")获取即可;”这一段是HarmonyOS 官网对JS卡片router事件相关的描述。上述代码可以实现跳转到Java Ability页面的能力。

但是如果我们的应用使用的API6 JSUI进行开发的,使用这个router进行跳转后希望跳转的是对应的Js Page该如何操作?如下图中,服务卡片上有两个按钮”detail“和”mine“,我们希望点击detail跳转到detail对应的page,同理点击mine跳转到mine对应的page。

cke_7401.png​​

【实现步骤】

对于这个需求我们可以借助一个单独的AceAbility来实现,以下是详细步骤:

第一步:

新建PageAbility继承AceAbility,在java目录下新建类型为Page的Ability如下:

在config.json中ability字段中对新增的PageAbility配置如下:

{
  "name": "com.example.routeram.PageAbility",
  "icon": "$media:icon",
  "description": "$string:pageability_description",
  "label": "$string:entry_PageAbility",
  "type": "page",
  "launchType": "standard"
}

第二步、在卡片的json文件中设置router事件,跳转到PageAbility中,这边对参数增加了一个type字段,后续就可以通过这个type字段判断是跳转到哪个js page中。

{
  "data": {
  },
  "actions": {
    "detailRouterEvent": {
      "action": "router",
      "bundleName": "com.example.routeram",
      "abilityName": "com.example.routeram.PageAbility",
      "params": {
        "type": "detail"
      }
    },
    "mineRouterEvent": {
      "action": "router",
      "bundleName": "com.example.routeram",
      "abilityName": "com.example.routeram.PageAbility",
      "params": {
        "type": "mine"
      }
    }
  }
}

第三步、在PageAbility的onStart方法中接收router 传过来的params(JSON格式),获取type字段进行跳转。

@Override
public void onStart(Intent intent) {
    IntentParams params = intent.getParams();
    if (params != null) {
        //获取routerEvent中的'params'
        String  data = (String) params.getParam("params");
        if(!data.isEmpty()){
            //通过ZSONObject获取对应的"type"的值
            ZSONObject zsonObject=ZSONObject.stringToZSON(data);
            String type= zsonObject.getString("type");
            setInstanceName("default");
            if(type.equals("detail")){
                //跳转不同页面
                setPageParams( "pages/detail/detail",null);
            }else if(type.equals("mine")){
                setPageParams( "pages/mine/mine",null);
            }
        }
        HiLog.info(TAG, "IntentParams: " + data);
    }
    super.onStart(intent);
}

【最后】

需要注意的是这边的setInstanceName对应的是Component Name一般我们把Js Page放在默认的default目录下,因此这边填写的是default;

setPageParams写的是page的路径,路径不正确会导致跳转异常。

 

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

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

相关文章

stm32的命令规则

stm32型号的说明:以STM32F103RBT6这个型号的芯片为例,该型号的组成为7个部分,其命名规则如下:

面试题-React(三):什么是JSX?它与常规JavaScript有什么不同?

在React的世界中,JSX是一项引人注目的技术,它允许开发者在JavaScript中嵌套类似HTML的标签,用于描述UI组件的结构。本篇博客将通过丰富的代码示例,深入探索JSX语法,解析其在React中的用法和优势。 一、JSX基础语法 在…

陕西广电 HG6341C FiberHome烽火 光猫获取超级密码 改桥接模式 提升网速

光猫默认的路由模式实测在100M宽带下只能跑到60M左右,只有改成桥接模式才能跑满,不损失性能。但是改桥接需要给运营商打电话,有的时候不想麻烦他们,这时获取超级密码进行更改就是一个不错的选择了 分析 之前写了一篇HGU B2 光猫的…

触摸屏与PLC之间 EtherNet/IP无线以太网通信

在实际系统中,同一个车间里分布多台PLC,用触摸屏集中控制。通常所有设备距离在几十米到上百米不等。在有通讯需求的时候,如果布线的话,工程量较大耽误工期,这种情况下比较适合采用无线通信方式。 本方案以MCGS触摸屏和…

IO流笔记

文件基础知识 创建文件 package org.example; import org.junit.Test;import java.io.File; import java.io.IOException;public class FileCreate{public static void main(String[] args) {}Test//方式1:new File(Strin pathname)public void create01(){File fil…

在线零售供应链管理:从0到100

全球57%的公司将其供应链视为竞争优势,然而只有6%的人表示完全了解它。无论您是首次在线卖家还是经验丰富的专业人士,驾驭管理高效且具有成本效益的零售供应链的复杂性都可能具有挑战性。一起来了解一下吧! 供应链管理是什么?它基…

Python网络爬虫入门到实战

💂 个人网站:【工具大全】【游戏大全】【神级源码资源网】🤟 前端学习课程:👉【28个案例趣学前端】【400个JS面试题】💅 寻找学习交流、摸鱼划水的小伙伴,请点击【摸鱼学习交流群】 网络爬虫(We…

Java并发编程第5讲——volatile关键字(万字详解)

volatile关键字大家并不陌生,尤其是在面试的时候,它被称为“轻量级的synchronized”。但是它并不容易完全被正确的理解,以至于很多程序员都不习惯去用它,处理并发问题的时候一律使用“万能”的sychronized来解决,然而如…

1.0的星火2.0必将燎原——图文声影PPT全测试

一、前言 大家好,勇哥又来分享AI模型了,前几天讯飞发布的星火大模型2.0迅速的进入了我们圈子里,为了有更多更好的模型分享给大家,分享星火大模型2.0是必须做的,我做一个传递着,希望大家也星火相传啊。 我…

ResizeObserver监听元素大小的变化

window.resize不适用于dom的监听。 ResizeObserver ResizeObserver 接口监视 Element 内容盒或边框盒或者 SVGElement 边界尺寸的变化。 方法 ResizeObserver.disconnect() 取消特定观察者目标上所有对 Element 的监听。 ResizeObserver.observe() 开始对指定 Element 的监…

解决Fastjson2 oom(Out Of Memory),支持大对象(LargeObject 1G)json操作

在使用Fastjson中的 JSON.toJSONString时,如果对象数据太大(>64M)会出现Out Of Memory,查看源码发现为JSONWriter中的判断代码 其中maxArraySize默认最大为64M,如果超过了就会抛出oom错误 如果fastjson过多的使用内存,也可能导致java堆内存溢出,所以这…

开源语音聊天软件Mumble

网友 大气 告诉我,Openblocks在国内还有个版本叫 码匠,更贴合国内软件开发的需求,如接入了国内常用的身份认证,接入了国内的数据库和云服务,也对小程序、企微 sdk 等场景做了适配。 在 https://majiang.co/docs/docke…

idea 本地版本控制 local history

idea 本地版本控制 local history 如何打开 1 自定义快捷键 settings->keymap->搜索框输入 show history -》Add Keyboard Shortcut -》设置为 CtrlAltL 2 右键文件-》local history -》show history 新建文件 版本1,creating class com.geekmice…这个是初…

Vue前端封装一个任务条的组件进行使用

任务条 样式 代码 父组件 <articleSteps :tabs"tabs" :tabs-active-name"tabsActiveName" /><div class"drawer__footer"><el-button v-if"tabsActiveName 1 || tabsActiveName 2" click"backClick">…

视频云存储/安防监控/视频汇聚EasyCVR平台新增设备经纬度选取

视频云存储/安防监控EasyCVR视频汇聚平台基于云边端智能协同&#xff0c;支持海量视频的轻量化接入与汇聚、转码与处理、全网智能分发、视频集中存储等。音视频流媒体视频平台EasyCVR拓展性强&#xff0c;视频能力丰富&#xff0c;具体可实现视频监控直播、视频轮播、视频录像、…

vue浏览器插件安装-各种问题

方法1&#xff1a;vue.js devtolls插件下载 https://blog.csdn.net/qq_55640378/article/details/131553642 下载地址&#xff1a; Tags vuejs/devtools GitHub npm install 或是 cnpm install 遇到的报错 设置淘宝镜像源&#xff08;推荐使用nrm&#xff0c;这一步是为…

带你了解—在外远程群晖NAS-群晖Drive挂载电脑磁盘同步备份【无需公网IP】

文章目录 前言1.群晖Synology Drive套件的安装1.1 安装Synology Drive套件1.2 设置Synology Drive套件1.3 局域网内电脑测试和使用 2.使用cpolar远程访问内网Synology Drive2.1 Cpolar云端设置2.2 Cpolar本地设置2.3 测试和使用 3. 结语 前言 群晖作为专业的数据存储中心&…

Swift 周报 第三十五期

文章目录 前言新闻和社区五天市值蒸发 2000 亿美元&#xff0c;苹果公司怎么了&#xff1f;在你的 App 中帮助顾客解决账单问题需要声明原因的 API 列表现已推出 提案通过的提案正在审查的提案 Swift论坛推荐博文话题讨论关于我们 前言 本期是 Swift 编辑组整理周报的第三十五…

通达信指标公式15:除权除息数据统计分析

#1.关于除权除息指标的介绍&#xff1a;本指标是小红牛原创指标之一&#xff0c;觉得有必要研究一下这个问题&#xff0c;所以就花时间整理一下这个指标相关内容&#xff0c;大家可以在本源码基础上&#xff0c;进一步优化自己的思路。本指标为通达信幅图指标&#xff0c;可以做…

树结构使用实例---实现数组和树结构的转换

文章目录 一、为什么要用树结构&#xff1f;二、使用步骤 1.引入相关json2.树结构的转换总结 一、为什么要用树结构&#xff1f; 本文将讲述一个实例&#xff0c;构造一棵树来实现数组和tree的转换&#xff0c;这在前端树结构中是经常遇到的 后端返回树结构方便管理&#xff…