首页 > 其他分享 >【HarmonyOS】元服务卡片router实现跳转到指定页面

【HarmonyOS】元服务卡片router实现跳转到指定页面

时间:2023-09-19 17:00:32浏览次数:28  
标签:服务 卡片 HarmonyOS 事件 跳转 router 页面

​【关键字】

元服务卡片、router跳转不同页面

 

【写在前面】

本篇文章主要介绍开发元服务卡片时,如何实现从卡片中点击事件跳转到指定的应用内页面功能。此处以JS UI开发服务卡片为例,JS卡片支持组件设置action,包括router事件和message事件,其中router事件用于应用跳转,message事件用于卡片开发人员自定义点击事件,本篇文章介绍如何通过设置router事件实现跳转指定页面功能。

 

【开发步骤】

步骤1:在卡片的index.html页面中定义两个文本,点击“跳转index”实现跳转到index页面,点击“跳转sceond”实现跳转second页面,给两个文本绑定点击事件,如下图所示:

cke_4065.png​​​​

步骤2:在index.json设置routerEvent和routerEvent2事件,各字段说明如下:

1、action设置事件类型,固定“router”跳转事件;

2、want字段中存放跳转的页面信息,其中:

1)bundleName为应用包名;

2)abilityName为卡片提供方应用的跳转目标Ability名;

3)parameters中url设置跳转的页面路径;

cke_1529.png

这样就实现了卡片点击事件跳转不同页面效果。此处请注意,跳转的页面信息需放到want中才可生效。

 

【服务卡片开发相关文档】

(3.0)服务卡片开发指导(包含基于JS UI和Java UI开发卡片):https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ability-service-widget-overview-0000001062607955

(3.0)Java服务卡片JS UI组件:https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-service-widget-file-0000001153028529

(3.1/4.0)FA模型服务卡片开发指导:https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/widget-development-fa-0000001427902244-V3

(3.1/4.0)Stage模型服务卡片开发指导:https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/service-widget-overview-0000001536226057-V3

标签:服务,卡片,HarmonyOS,事件,跳转,router,页面
From: https://www.cnblogs.com/mayism123/p/17715142.html

相关文章

  • HarmonyOS 管理页面跳转及浏览记录导航
     历史记录导航使用者在前端页面点击网页中的链接时,Web组件默认会自动打开并加载目标网址。当前端页面替换为新的加载链接时,会自动记录已经访问的网页地址。可以通过forward()和backward()接口向前/向后浏览上一个/下一个历史记录。在下面的示例中,点击应用的按钮来触发前端页......
  • SSSRF-302跳转 Bypass
    302跳转Bypass题目描述:SSRF中有个很重要的一点是请求可能会跟随302跳转,尝试利用这个来绕过对IP的检测访问到位于127.0.0.1的flag.php吧!  这道题绕过的方式有很多,这里先讲讲302跳转,302跳转就是由一个URL跳转到另外一个URL当中去,就好比现实生活中的呼叫转移,在网页中比如一个网......
  • vue-router 编程式导航
    导航到不同的位置注意:在Vue实例中,你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。想要导航到不同的URL,可以使用 router.push 方法。这个方法会向history栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,会回到之前的URL。该方法的参数可以......
  • vue--day85--<router-link>```的replace属性
    1.作用:控制路由跳转时操作浏览器历史记录的模式2.浏览器的历史记录有两种写入方式:分别为```push```和```replace```,```push```是追加历史记录,```replace```是替换当前记录。路由跳转时候默认为```push```3.如何开启```replace```模式:```<router-linkreplace.......>News</r......
  • 鸿蒙元服务开发教程03:从底层原理开始讲透桌面卡片的router事件刷新机制
    相关文章:鸿蒙元服务开发教程:从底层原理开始讲透桌面卡片的call事件刷新机制鸿蒙元服务开发教程02:从底层原理开始讲透桌面卡片的message事件刷新机制首先铺垫两个基础知识:1.为什么桌面卡片需要使用特殊机制来刷新?主要有两个原因:第一是HarmonyOSApi9的桌面卡片出于降低系统能耗的目......
  • 关于jsp借助WebServlet注解跳转到对应的servlet,表示界面404,且注解在前端界面不被识别
    问题描述我是属于那种习惯了使用其他框架之后,且,好久没有写过javaweb了,就忘记了jsp/html前端界面通过WebServlet注解跳转到servlet的方法,就这么一个破问题!!!坑了我一下午!!问题解决起初我还以为是servlet-api的依赖没有导入进去,发现早就在pom.xml文件里面好好地躺着了;当然,从始至终......
  • 问卷调研,支持新增题目,修改题目,题目上移下移,新增选项,选项上移下移,题目跳转功能,支持预览
    <template><divclass="app-container"><el-cardshadow="never"><el-row:gutter="20"type="flex"justify="space-between"><el-col:span="12"style=&......
  • HarmonyOS应用开发Web组件基本属性应用和事件
    一、Web组件概述Web组件用于在应用程序中显示Web页面内容,为开发者提供页面加载、页面交互、页面调试等能力。● 页面加载:Web组件提供基础的前端页面加载的能力,包括加载网络页面、本地页面、Html格式文本数据。● 页面交互:Web组件提供丰富的页面交互的方式,包括:设置前端页面深色模......
  • HarmonyOS应用侧与前端页面数据通道建立
    一、 应用侧调用前端页面函数应用侧可以通过runJavaScript()方法调用前端页面的JavaScript相关函数。在下面的示例中,点击应用侧的“runJavaScript”按钮时,来触发前端页面的htmlTest()方法。● 前端页面代码。<!--index.html--><!DOCTYPEhtml><html><body><script>......
  • HarmonyOS/OpenHarmony应用开发-DevEco Studio新建项目的整体说明
    一、文件-新建-新建项目二、传统应用形态与IDE自带的模板可供选用与免安装的元服与IDE中自带模板的选择三、以元服务,远程模拟器为例说明IDE整体结构1区是工程目录结构,是最基本的配置与开发路径等的认知。2区是代码开发与修改区,是开发者主要的工作区域。3.是效果展示区,包括远程模拟......