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

介绍

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

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

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

0000000000011111111.20231123162458.56374277887047155204379708661912.png

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

整体交互效果

传值理论

基于LocalStorage
基于EventHub
基于router

准备

资料查找在：

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

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

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

代码实践

1.定制主入口页面

功能

页面曝光停留时长计算
增加进入二级页面入口

import systemDateTime from '@ohos.systemDateTime'
import router from '@ohos.router'@Entry
@Component
struct Index {@State message: string = '页面跳转'private showDuration: number = 0onPageShow() {this.showDuration = 0systemDateTime.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" //三级页面]
}

功能

展示主入口页面停留时间
添加通过UIAbility方式打开页面的入口
添加通过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: Objectprivate 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 = localStorageonCreate(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" //三级页面]
}

功能

展示基于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、前端等等开发人员，想要转入鸿蒙方向发展。可以直接领取这份资料辅助你的学习。下面是鸿蒙开发的学习路线图。