【HarmonyOS】服务卡片 API6 JSUI跳转不同页面并携带参数

 【关键字】

服务卡片、卡片跳转不同页面、卡片跳转页面携带参数

【写在前面】

          本篇文章主要介绍开发服务卡片时,如何实现卡片点击跳转不同页面,并携带动态参数到js页面。在此篇文章“服务卡片 API6 JSUI跳转不同页面”中说明了如果跳转不同页面,这里在此基础上介绍跳转js页面时,如何携带参数到js页面中。

【开发步骤】

第一步:参考下方新建PageAbility继承AceAbility,在java目录下新建类型为Page的Ability如下:

cke_17713.png

cke_840.png

在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中;并定义title字段,将值设置为data中定义的动态参数,可以将其传到js page中。

{"data": {"detailTitle": "i am detail title","mineTitle": "i am mine title"},"actions": {"detailRouterEvent": {"action": "router","bundleName": "com.example.routeram","abilityName": "com.example.routeram.PageAbility","params": {"type": "detail","title": "{{detailType}}"}},"mineRouterEvent": {"action": "router","bundleName": "com.example.routeram","abilityName": "com.example.routeram.PageAbility","params": {"type": "mine","title": "{{mineTitle}}"}}}
}

同时,在index.json同级目录index.html文件中绑定mineRouterEvent和detailRouterEvent事件,如下所示:

<text class="title" onclick="detailRouterEvent">跳转detail</text>
<text class="title" onclick="mineRouterEvent">跳转mine</text>

第三步:在PageAbility的onStart方法中接收router 传过来的params(JSON格式),获取type字段进行跳转;获取title字段通过setPageParams方法传入到js page中。

    @Overridepublic 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");// 通过ZSONObject获取对应的"title"的值,并构造intentParams便于传入到js page中String title = zsonObject.getString("title");IntentParams intentParams = new IntentParams();intentParams.setParam("title", title);// setInstanceName对应的是Component Name一般我们把Js Page放在默认的default目录下,因此这边填写的是default;setInstanceName("default");// 跳转不同页面if (type.equals("detail")) {// 不需要传入参数写法:setPageParams("pages/detail/detail", null);// 可直接将卡片index.json中定义的参数直接透传到js page中:setPageParams("pages/detail/detail", params);// 此处将上面重新定义的intentParams传入js page中setPageParams("pages/detail/detail", intentParams);} else if (type.equals("mine")) {setPageParams("pages/mine/mine", intentParams);}}HiLog.info(TAG, "IntentParams: " + data);}super.onStart(intent);}

第四步:在detail.js和mine.js的data中定义相同名称的变量,此处定义title,即可接受到pageAbility中传入的title数据。

    data: {title: "",},onInit() {// 打印获取的title,并在index.html显示title值console.info("title is " + this.title)}

【最终效果】

a23480afde2d906dba767176e711aac9_442x927.gif%40900-0-90-f%20(1).gif

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

(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

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

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

相关文章

【机器学习】几种常用的机器学习调参方法

在机器学习中&#xff0c;模型的性能往往受到模型的超参数、数据的质量、特征选择等因素影响。其中&#xff0c;模型的超参数调整是模型优化中最重要的环节之一。超参数&#xff08;Hyperparameters&#xff09;在机器学习算法中需要人为设定&#xff0c;它们不能直接从训练数据…

【计算系统】5分钟了解超算,高性能计算,并行计算,分布式计算,网格计算,集群计算以及云计算的区别

5分钟了解超算&#xff0c;高性能计算&#xff0c;并行计算&#xff0c;分布式计算&#xff0c;网格计算&#xff0c;集群计算以及云计算的区别 1. 超算2. 高性能计算3. 并行计算4. 分布式计算5. 网格计算6. 集群计算7. 云计算小结相关资料 1. 超算 超级计算机&#xff08;Sup…

基于springboot实现原创歌曲分享平台系统项目【项目源码+论文说明】

基于springboot实现原创歌曲分享平台系统演示 摘要 随着信息技术和网络技术的飞速发展&#xff0c;人类已进入全新信息化时代&#xff0c;传统管理技术已无法高效&#xff0c;便捷地管理信息。为了迎合时代需求&#xff0c;优化管理效率&#xff0c;各种各样的管理平台应运而生…

ChatGPT对未来发展的影响?一般什么时候用到GPT

ChatGPT以其强大的自然语言处理能力对未来的发展具有重要影响。以下是ChatGPT的潜在影响和一般使用情况&#xff1a; 改善自然语言理解和生成&#xff1a;ChatGPT和类似的模型可以改善机器对人类语言的理解和生成。这将有助于改进各种应用领域&#xff0c;包括智能助手、聊天机…

SaaS 出海,如何搭建国际化服务体系?(三)

防噎指南&#xff1a;这可能是你看到的干货含量最高的 SaaS 出海经验分享&#xff0c;请准备好水杯&#xff0c;放肆食用&#xff08;XD。 当越来越多中国 SaaS 企业选择开启「国际化」副本&#xff0c;出海便俨然成为国内 SaaS 的新角斗场。 LigaAI 观察到&#xff0c;出海浪…

UE5 日记(人物连招:蒙太奇动画通知(含视频链接))

教程https://www.youtube.com/watch?vsWpENaVGj2M&listPLiSlOaRBfgkcPAhYpGps16PT_9f28amXi&index10&ppiAQB 相关蓝图 连招逻辑 动画通知类 逻辑分析 1.用户输入 已搭载战斗系统模块,可以收到输入指令 2.连击 第一次攻击&#xff1a; 第一次攻击&#xff0c;…

Flask Shell 操作 SQLite

一、前言 这段时间在玩Flask Web&#xff0c;发现用Flask Shell去操作SQLite还是比较方便的。今天简单地介绍一下。 二、SQLite SQLite是一种嵌入式数据库&#xff0c;它的数据库就是一个文件&#xff0c;处理速度快&#xff0c;经常被集成在各种应用程序中&#xff0c;在IO…

el-tabs 默认选中第一个

1. 实际开发中el-tabs 都会设置第一个为默认值 ,这样会好看一点, 而渲染的数据经常是通过后端返回的数据 , v-model 无法写死默认值 解决办法 , 通过计算机属性 ,在data 定义一个 selectedTab watch: {defaultTab(newVal) {this.selectedTab newVal; // 设置第一个标签页…

超低价:阿里云双11服务器优惠价格表_87元一年起

2023阿里云双十一优惠活动已经开启了&#xff0c;轻量2核2G服务器3M带宽优惠价87元一年、2核4G4M带宽优惠价165元一年&#xff0c;云服务器ECS经济型e实例2核2G3M固定带宽优惠价格99元一年&#xff0c;还有2核4G、2核8G、4核8G、4核16G、8核32G等配置报价&#xff0c;云服务器e…

【面试经典150 | 链表】随机链表的复制

文章目录 Tag题目来源题目解读解题思路方法一&#xff1a;哈希表递归方法二&#xff1a;哈希表方法三&#xff1a;迭代拆分节点 写在最后 Tag 【递归】【迭代】【链表】 题目来源 138. 随机链表的复制 题目解读 对一个带有随机指向的链表进行深拷贝操作。 解题思路 本题一共…

【Linux】配置JDKTomcat开发环境及MySQL安装和后端项目部署

目录 一. JDK及tomcat安装 二&#xff0c;安装Tomcat 三&#xff0c;MySQL安装 四、后端部署 前言&#xff1a; 今天我们就来在Linux上安装JDK及tomcat&#xff0c;MySQL&#xff0c;希望你可以通过这一博客&#xff0c;找到你的答案&#xff01;&#xff01;&#xff01; …

基于Apache SeaTunnel 的数据精确一致性技术实践

引言 在分布式系统中&#xff0c;保障数据一致性是至关重要的任务之一。数据一致性是指分布式系统中的各个节点在进行数据更新时能够保持数据的准确性和完整性。然而&#xff0c;由于网络延迟、节点故障等原因&#xff0c;分布式系统中的数据一致性问题变得复杂而具有挑战性。…