鸿蒙OS开发实例:【页面传值跳转】

介绍

本篇主要介绍如何在HarmonyOS中,在页面跳转之间如何传值

HarmonyOS 的页面指的是带有@Entry装饰器的文件,其不能独自存在,必须依赖UIAbility这样的组件容器

如下是官方关于State模型开发模式下的应用包结构示意图,Page就是带有@Entry装饰器的文件

0000000000011111111.20231123162458.56374277887047155204379708661912.png

那么在页面跳转时,在代码层面最长路径其实是有两步 1,打开UIAbility 2. 打开Page

整体交互效果

传值理论

  1. 基于LocalStorage
  2. 基于EventHub
  3. 基于router

准备

资料查找在:

鸿蒙OS开发更多内容↓点击HarmonyOS与OpenHarmony技术
鸿蒙技术文档开发知识更新库gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md在这。或+mau123789学习,是v喔

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

我们熟读玩文档后,开始创建一个Demo工程,选择Stage模型

代码实践

1.定制主入口页面

功能

  1. 页面曝光停留时长计算
  2. 增加进入二级页面入口
import systemDateTime from '@ohos.systemDateTime'
import router from '@ohos.router'

@Entry
@Component
struct Index {
  @State message: string = '页面跳转'

  private showDuration: number = 0

  onPageShow() {

    this.showDuration = 0
    systemDateTime.getCurrentTime(false, (error, data) => {
      if(!error){
        this.showDuration = data
      }
    })

  }

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(()=>{
            systemDateTime.getCurrentTime(false, (error, data) => {
              router.pushUrl({ url: 'pages/OpenPage', params: {
                "from": "pages/Home.ets",
                "data": {
                  "duration":(data - this.showDuration)
                }
              } })
                .then(() => {
                  console.info('Succeeded in jumping to the second page.')
                }).catch((error) => {
                console.log(error)
              })
            })
          })
      }
      .width('100%')
    }
    .height('100%')
  }

}

2.添加二级页面

注意

OpenPage.ets需要在main_pages.json中的注册

{
  "src": [
    "pages/Index" //主入口页面
    ,"pages/OpenPage" //二级页面
    ,"pages/Test" //三级页面
    ,"pages/LocalStorageAbilityPage" //三级页面
  ]
}

功能

  1. 展示主入口页面停留时间
  2. 添加通过UIAbility方式打开页面的入口
  3. 添加通过router.pushUrl方式打开页面的入口
/**
 * 路由 3.1/4.0 文档
 * https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/js-apis-router-0000001478061893-V3#ZH-CN_TOPIC_0000001523808578__routerpushurl9
 *
 */
import router from '@ohos.router';
import common from '@ohos.app.ability.common';


@Entry
@Component
struct OpenPageIndex{
  @State extParams: string = ''
  private expParamsO: Object
  private context = getContext(this) as common.UIAbilityContext;

  aboutToAppear(){
    this.expParamsO = router.getParams();
    this.extParams = JSON.stringify(this.expParamsO, null, '\t');
  }

  build(){
    Column(){

      List(){
            ListItemGroup() {
              ListItem() {
                Text(this.extParams)
                  .width('96%')
                  .fontSize(18)
                  .fontColor(Color.Green)
                  .backgroundColor(Color.White)
              }.width('100%')
              .align(Alignment.Start)
              .backgroundColor(0xFFFFFF)
              .borderRadius('16vp')
              .padding('12vp')

            }.divider({
              strokeWidth: 1,
              startMargin: 0,
              endMargin: 0,
              color: '#ffe5e5e5'
            })

        ListItemGroup() {

          ListItem() {
            Text('启动UIAbility页面')
              .width('96%')
              .fontSize(18)
              .fontColor(Color.Black)
              .backgroundColor(Color.White)
          }.width('100%')
          .height(50)
          .align(Alignment.Start)
          .backgroundColor(0xFFFFFF)
          .padding({ left: 10 })
          .onClick(() => {
            this.startAbilityTest('LocalStorageAbility')
          })

          ListItem() {
            Text('启动@Entry页面')
              .width('96%')
              .fontSize(18)
              .fontColor(Color.Black)
              .backgroundColor(Color.White)
          }.width('100%')
          .height(50)
          .align(Alignment.Start)
          .backgroundColor(0xFFFFFF)
          .padding({ left: 10 })
          .onClick(() => {
            router.pushUrl({ url: 'pages/Test', params: {
              "from": "pages/OpenPage.ets"
            } })
              .then(() => {
                console.info('Succeeded in jumping to the second page.')
              }).catch((error) => {
              console.log(error)
            })
          })

        }.divider({
          strokeWidth: 1,
          startMargin: 0,
          endMargin: 0,
          color: '#ffe5e5e5'
        })

      }.width('100%').height('90%')
      .divider({
        strokeWidth: px2vp(20),
        startMargin: 0,
        endMargin: 0,
        color: '#ffe5e5e5'
      })

    }.width('100%').height('100%')
    .padding({ top: px2vp(111) , left: '12vp', right: '12vp'})
    .backgroundColor('#ffe5e5e5')
  }

  async startAbilityTest(name: string) {
    try {
      let want = {
        deviceId: '', // deviceId为空表示本设备
        bundleName: 'com.harvey.testharmony',
        abilityName: name,
        parameters:{
            from: 'OpenPage.ets',
            data: {
              hello: 'word',
              who: 'please'
            }
        }
      };
      let context = getContext(this) as common.UIAbilityContext;
      await context.startAbility(want);
      console.info(`explicit start ability succeed`);
    } catch (error) {
      console.info(`explicit start ability failed with ${error.code}`);
    }

  }

}

3. 添加三级页面

注意

先要添加注册一个新的容器,这里命名为:LocalStorageAbility.ets 容器需要在module.json5中声明

  {
    "name": "LocalStorageAbility",
    "srcEntry": "./ets/entryability/LocalStorageAbility.ets",
    "description": "$string:EntryAbility_desc",
    "icon": "$media:icon",
    "label": "$string:EntryAbility_label",
    "startWindowIcon": "$media:icon",
    "startWindowBackground": "$color:start_window_background"
  }
import window from '@ohos.window';
import UIAbility from '@ohos.app.ability.UIAbility';


let para:Record<string,string> = { 'PropA': JSON.stringify({ 'from': 'LocalStorageAbility'}) };
let localStorage: LocalStorage = new LocalStorage(para);

export default class LocalStorageAbility extends UIAbility {

  storage: LocalStorage = localStorage

  onCreate(want, launchParam) {

  }

  onWindowStageCreate(windowStage: window.WindowStage) {
    super.onWindowStageCreate(windowStage)

    windowStage.loadContent('pages/LocalStorageAbilityPage', this.storage, (err, data) => {
      if (err.code) {
               return;
      }

      setTimeout(()=>{
        let eventhub = this.context.eventHub;
        console.log(para['PropA'])
        eventhub.emit('parameters', para['PropA']);
      }, 0)

    });
  }

}

Test.ets和LocalStorageAbilityPage.ets需要在main_pages.json中的注册

{
  "src": [
    "pages/Index" //主入口页面
    ,"pages/OpenPage" //二级页面
    ,"pages/Test" //三级页面
    ,"pages/LocalStorageAbilityPage" //三级页面
  ]
}

功能

  1. 展示基于LocalStorage,EventHub,router 三种传值方式的数据

    LocalStorageAbilityPage.ets 文件

import router from '@ohos.router';
import common from '@ohos.app.ability.common';

// 通过GetShared接口获取stage共享的LocalStorage实例
let storage = LocalStorage.GetShared()

@Entry(storage)
@Component
struct LocalStorageAbilityPageIndex {
  @State message: string = ''
  // can access LocalStorage instance using
  // @LocalStorageLink/Prop decorated variables
  @LocalStorageLink('PropA') extLocalStorageParms: string = '';

  context = getContext(this) as common.UIAbilityContext;

  aboutToAppear(){
    this.eventHubFunc()
  }

  build() {
    Row() {
      Column({space: 50}) {

        Column({space: 10}){
          Text('LocalStorage传值内容')
          Text(JSON.stringify(JSON.parse(this.extLocalStorageParms), null, '\t'))
            .fontSize(18)
            .fontColor(Color.Green)
            .backgroundColor(Color.White)
            .width('100%')
            .padding('12vp')
            .borderRadius('16vp')
        }

        Column({space: 10}){
          Text('eventHub传值内容')
          Text(this.message)
            .fontSize(18)
            .fontColor(Color.Green)
            .backgroundColor(Color.White)
            .width('100%')
            .padding('12vp')
            .borderRadius('16vp')
        }

      }.width('100%').height('100%')
      .padding({ top: px2vp(111) , left: '12vp', right: '12vp'})
      .backgroundColor('#ffe5e5e5')
    }
    .height('100%')

  }

  eventHubFunc() {
    this.context.eventHub.on('parameters', (...data) => {
        this.message = JSON.stringify(JSON.parse(data[0]), null, '\t')
    });
  }

}

最后呢,很多开发朋友不知道需要学习那些鸿蒙技术?鸿蒙开发岗位需要掌握那些核心技术点?为此鸿蒙的开发学习必须要系统性的进行。

而网上有关鸿蒙的开发资料非常的少,假如你想学好鸿蒙的应用开发与系统底层开发。你可以参考这份资料,少走很多弯路,节省没必要的麻烦。由两位前阿里高级研发工程师联合打造《鸿蒙NEXT星河版OpenHarmony开发文档》里面内容包含了(ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等)鸿蒙(Harmony NEXT)技术知识点

如果你是一名Android、Java、前端等等开发人员,想要转入鸿蒙方向发展。可以直接领取这份资料辅助你的学习。下面是鸿蒙开发的学习路线图。

高清完整版请点击→《鸿蒙NEXT星河版开发学习文档》

针对鸿蒙成长路线打造的鸿蒙学习文档。话不多说,我们直接看详细资料鸿蒙(OpenHarmony )学习手册(共计1236页)与鸿蒙(OpenHarmony )开发入门教学视频,帮助大家在技术的道路上更进一步。

《鸿蒙 (OpenHarmony)开发学习视频》

图片

《鸿蒙生态应用开发V2.0白皮书》

图片

《鸿蒙 (OpenHarmony)开发基础到实战手册》

获取这份鸿蒙星河版学习资料,请点击→《鸿蒙NEXT星河版开发学习文档》

OpenHarmony北向、南向开发环境搭建

图片

《鸿蒙开发基础》

  1. ArkTS语言

  2. 安装DevEco Studio

  3. 运用你的第一个ArkTS应用

  4. ArkUI声明式UI开发

  5. .……

图片

《鸿蒙开发进阶》

  1. Stage模型入门

  2. 网络管理

  3. 数据管理

  4. 电话服务

  5. 分布式应用开发

  6. 通知与窗口管理

  7. 多媒体技术

  8. 安全技能

  9. 任务管理

  10. WebGL

  11. 国际化开发

  12. 应用测试

  13. DFX面向未来设计

  14. 鸿蒙系统移植和裁剪定制

  15. ……

图片

《鸿蒙开发实战》

  1. ArkTS实践

  2. UIAbility应用

  3. 网络案例

  4. ……

图片

 获取这份鸿蒙星河版学习资料,请点击→《鸿蒙NEXT星河版开发学习文档》

总结

鸿蒙—作为国家主力推送的国产操作系统。部分的高校已经取消了安卓课程,从而开设鸿蒙课程;企业纷纷跟进启动了鸿蒙研发

并且鸿蒙是完全具备无与伦比的机遇和潜力的;预计到年底将有 5,000 款的应用完成原生鸿蒙开发,未来将会支持 50 万款的应用那么这么多的应用需要开发,也就意味着需要有更多的鸿蒙人才。鸿蒙开发工程师也将会迎来爆发式的增长,学习鸿蒙势在必行!

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

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

相关文章

算法---动态规划练习-8(打家劫舍2)

打家劫舍2 1. 题目解析2. 讲解算法原理3. 编写代码 1. 题目解析 题目地址&#xff1a;点这里 2. 讲解算法原理 首先&#xff0c;给定一个非负整数数组 nums&#xff0c;其中 nums[i] 表示第 i 家的财物价值。 定义两个辅助数组 f 和 g&#xff0c;长度都为 n&#xff08;n 是…

C++模板类和模板函数

模板类 #include<bits/stdc.h> using namespace std; template<typename T> class People{public:People(T name):name_(name){}protected:T name_; }; class A:public People<string>{public:A(string name): People(name){}void print(){std::cout<<…

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

介绍 服务卡片指导文档位于“开发/应用模型/Stage模型开发指导/Stage模型应用组件”路径下&#xff0c;说明其极其重要。 本篇文章将分享实现服务卡片的过程和代码 准备 请参照[官方指导]&#xff0c;创建一个Demo工程&#xff0c;选择Stage模型 鸿蒙OS开发更多内容↓点击…

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事务的概念事务的属性事务控制语句转账示例 并发事务引发的问题脏读脏读场景 不可重复读幻读幻读场景 事务的隔离级别读未提交读已提交可重复读&#xff08;MySQL默认&#xff09; 总结 mysql事务的概念 事务就是一组操作的集合&#xff0c;他是一…

春秋云境CVE-2022-24663

简介 远程代码执行漏洞&#xff0c;任何订阅者都可以利用该漏洞发送带有“短代码”参数设置为 PHP Everywhere 的请求&#xff0c;并在站点上执行任意 PHP 代码。P.S. 存在常见用户名低权限用户弱口令 正文 进入首页我们没看到任何有价值的东西&#xff0c;那么就只好去寻找…

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

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

Vivado使用(2)——综合运行与OOC

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

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

目录 一、现象 二、工具 ​​​​​​1、AtomicInteger,AtomicLong 原子类操作 ​​​​​​2、RedisLua ​​​​​​3、Google Guava的RateLimiter 1&#xff09; 使用 2&#xff09; Demo 3&#xff09; 优化demo 4、阿里开源的Sentinel 三、算法 1、计数限流 &…

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

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

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.把二叉搜索树换为累加树

力扣题目链接 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期教程

教程介绍 互联网时代已进入后半场&#xff0c;行业环境发生了显著变化。互联网人&#xff0c;尤其是技术人员&#xff0c;如何在加速更迭的技术浪潮中持续充电&#xff0c;提升自身价值&#xff0c;是当下必须面对的挑战。课程涉及了现下前端实际开发时所需要的各块内容&#…

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

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

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. 用最少数量的箭引爆气球

算法题 Leetcode 860.柠檬水找零 题目链接:860.柠檬水找零 大佬视频讲解&#xff1a;柠檬水找零视频讲解 个人思路 5元最通用&#xff0c;然后是10元&#xff0c;所以如果是对于20元找零直接先找10元&#xff0c;也涉及到贪心的思想&#xff0c;可以用贪心算法。 解法 贪心法…

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

加密流量分类torch实践5&#xff1a;TrafficClassificationPandemonium项目更新3 更新日志 代码已经推送开源至露露云的github&#xff0c;如果能帮助你&#xff0c;就给鼠鼠点一个star吧&#xff01;&#xff01;&#xff01; 我的CSDN博客 我的Github Page博客 3/23日更新…

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

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

基于Python实现多功能翻译助手(下)

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