【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的路径,路径不正确会导致跳转异常。

 

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue3生命周期

原理 vue3也提供了Composition API形式的生命周期钩子,与vue2.x中钩子对应关系如下: beforeCreate setup() created setup() beforeMountonBeforeMount mountedonMounted beforeUpdateonBeforeUpdate updat…

Git判断本地是否最新

场景需求 需要判断是否有新内容更新,确定有更新之后执行pull操作,然后pull成功之后再将新内容进行复制到其他地方 pgit log -1 --prettyformat:"%H" HEAD -- . "origin/HEAD" rgit rev-parse origin/HEAD if [[ $p $r ]];thenecho "Is La…

clickhouse-监控配置

一、概述 监控是运维的一大利器,要想运维好clickhouse,首先就要对其进行监控,clickhouse有几种监控数据的方式,一种是系统本身监控,一种是通过exporter来监控,下面分别描述一下 二、系统自带监控 我下面会对监控做一…

C++初阶语法——static类成员

前言:本文将介绍类和对象中的static类成员——静态成员函数,静态成员变量的使用方法和注意点。在某些场景下,静态成员很有意义。 目录 一.概念二.特性静态成员不存在对象中 三.静态成员变量在类外初始化四.静态成员函数 一.概念 声明为stati…

Python学习笔记_基础篇(五)_数据类型之字典

一.基本数据类型 整数:int 字符串:str(注:\t等于一个tab键) 布尔值: bool 列表:list 列表用[] 元祖:tuple 元祖用() 字典:dict 注:所有的数据类型都存在想对…

[ MySQL ] — 基础增删查改的使用

目录 表的增删查改 Create 单行数据 全列插入 多行数据 全列插入 多行数据 指定列插入 不存在插入存在则更新 替换 Retrieve SELECT 列 全列查询 指定列查询 查询字段为表达式 为查询结果指定别名 结果去重 WHERE 条件 结果排序 筛选结果分页 Update De…

el-table 多个表格切换多选框显示bug

今天写了个功能,点击左侧的树做判断,一级树节点显示系统页面,二级树节点显示数据库页面,三级树节点显示表页面。 数据库页面和表页面分别有2个el-table ,上面的没有多选框,下面的有多选框 现在出现bug,在…

fastapi发布web配置页面

fastapi发布web配置页面 FastAPI 是一个基于 Python 的快速 Web 开发框架,它提供了许多功能来简化 Web 开发过程。其中一个重要的功能是能够轻松地创建 API 文档页面。 在 FastAPI 中,可以使用 OpenAPI 和 Swagger 来创建 API 文档页面。下面是一个简单…

iMazing2.17.3免费版苹果传输电脑端文件数据工具

苹果手机在日常使用过程中可能会遇到iPhone内存不足的情况,遇到这种情况很多用户会选择删除照片来节省存储空间,大量删除照片可能会误删重要照片。另外iPhone可能会遇到自动重启、黑屏等故障。手机突然损坏,数据无法导出,此时备份…

el-table实现纯前端查询列表(不走后端接口)

2023.8.16今天我学习了如何使用前端进行数据的查询,有时候后端会直接返回全部的数据,这时候我们就需要用前端进行查找数据。 首先elementUI有自带el-table查询的组件: Element - The worlds most popular Vue UI framework 我们发现在这段代…

QGraphicsView 实例3地图浏览器

主要介绍Graphics View框架&#xff0c;实现地图的浏览、放大、缩小&#xff0c;以及显示各个位置的视图、场景和地图坐标 效果图: mapwidget.h #ifndef MAPWIDGET_H #define MAPWIDGET_H #include <QLabel> #include <QMouseEvent> #include <QGraphicsView&…

飞天使-k8s简单搭建

文章目录 k8s概念安装部署-第一版无密钥配置与hosts与关闭swap开启ipv4转发安装前启用脚本开启ip_vs安装指定版本docker 安装kubeadm kubectl kubelet,此部分为基础构建模版 k8s一主一worker节点部署k8s三个master部署,如果负载均衡keepalived 不可用&#xff0c;可以用单节点做…