HarmonyOS开发 - Ability往页面(Pages)中传递数据

       在程序中，页面之间传递数据或数据共享，可以实现页面间的平滑过渡，避免重复加载数据，进步应用的响应速度和流量度；另外，数据传递机制使得页面更容易被重用，可以通过传入不同参数，来适应不同的上下文内容，以及根据需要传递数据，实现按需加载 ，淘汰内存斲丧和进步应用的性能等。
        这篇将通过LocalStorage、EventHub、全局变量，以及Preferences用户首选项等功能，实现Ability向页面(Pages)中传递数据。
一、页面间数据传递

        页面间跳转，可以通过router.push方法跳转到目标页面，并携带参数。代码如下：

1.   Column() {
2.         Image($rawfile('u27.png'))
3.           .width("64vp")
4.           .height("64vp")
5.         Text("门店")
6.           .height("32vp")
7.           .textAlign(TextAlign.Center)
8.           .fontSize("16fp")
9.           .fontWeight(FontWeight.Bold)
10.   }.onClick(() => {
11.         console.log('testTag')
12.         router.pushUrl({
13.           url: "pages/Stores",
14.           params: {
15.                 flag: "test"
16.           }
17.         })
18.   })

复制代码

        进入被分享页面，通过router.getParams()，来获取点击事件中的params带入数据。代码如下：

1. @Entry
2. @Component
3. struct Stores {
4.   @State productList: Array<StoresType> = [
5.     { id: 1, name: '门店一', thumb: $rawfile('u62.png'), },
6.     { id: 2, name: '门店二', thumb: $rawfile('u76.png') }
7.   ]
9.   aboutToAppear(){
10.     const params = router.getParams()
11.     console.log('testTag', JSON.stringify(params))
12.   }
13.   
14.   // 略...
15. }

复制代码

        此时控制台输出结果中可以看到，被分享页面获取到了上级页面的params带入参数。如下图：

二、Ability数据传递

        在HarmonyOS中，从Ability向Page页面传递数据可以通过以下几种方式实现：
2.1、LocalStorage

        LocalStorage是页面级的UI状态存储，通过@Entry装饰器吸收的参数可以在页面内共享同一个LocalStorage实例。LocalStorage也可以在UIAbility实例内，在页面间共享状态，也可以通过GetShared接口，实现跨页面、UIAbility实例内共享。
        在一上篇中，已经和各人介绍了使用LocalStorage将数据传递到页面方法，所在：
HarmonyOS开发 - 餐饮APP中多门店多窗口打开实例增补-CSDN博客
        分享数据Ability代码如下：

1. import UIAbility from '@ohos.app.ability.UIAbility';
2. import hilog from '@ohos.hilog';
3. import window from '@ohos.window';
4. import Want from '@ohos.app.ability.Want';
6. export default class StoreAbility extends UIAbility {
7.   // 略...
9.   onWindowStageCreate(windowStage: window.WindowStage) {
10.     // Main window is created, set main page for this ability
11.     hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
12.     hilog.info(0x0000, 'testTag', 'storeName:' + this.launchWant.parameters.storeName);
13.     // 通过实例new LocalStorage实例将launchWant数据传递到页面中
14.     windowStage.loadContent('pages/Index', new LocalStorage(this.launchWant.parameters), (err, data) => {
15.       if (err.code) {
16.         hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
17.         return;
18.       }
19.       hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
20.     });
21.   }
23.   // 略...
24. }

复制代码

        被分享页面中吸收数据，代码如下：

1. @Entry
2. @Component
3. struct Index {
4.   @State keyword: string = ''
5.   @State StoreName: string = '-'
7.   aboutToAppear(){
8.     const localStorage = LocalStorage.GetShared()
9.     this.StoreName = localStorage.get('storeName') as string
10.     console.log('page store name:', this.StoreName)
11.   }
12.   // 略...
13. }

复制代码

        检察控制台输出结果，如下图：

2.2、EventHub

        EventHub提供了Ability组件（UIAbility和ExtensionAbility）的事件机制，以Ability组件为中心提供了订阅、取消订阅和触发事件的数据通信能力。

2.2.1 界说Constants常量 

        在ets/common目录，再创建Constants.ets文件，用于界说和存储开发中使用的常量只读数据。这里在Constants类中界说ABILITY_WANT_DATA常量，用于界说、触发eventHub的事件名。代码如下：

1. /**
2. * 常量类
3. */
4. export default class Constants {
5.   // 获取ability 中want数据
6.   static readonly ABILITY_WANT_DATA: string = 'getAbilityWantData'
7. }

复制代码

2.2.2 界说eventHub触发事件

        在Ability中onCreate()回调函数中，界说eventHub事件，当使用emit触发事件时，实验该监听事件的回调函数，并获取到onCreate()中的want数据。代码如下：

1. import UIAbility from '@ohos.app.ability.UIAbility';
2. import hilog from '@ohos.hilog';
3. import window from '@ohos.window';
4. import Want from '@ohos.app.ability.Want';
5. import Constants from '../common/Constants'
7. interface Data {
8.   launchWant: Want;
9. }
11. export default class StoreAbility extends UIAbility {
13.   onCreate(want) {
14.     hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
16.     this.context.eventHub.on(Constants.ABILITY_WANT_DATA,  (data: Data) => {
17.       hilog.info(0x0000, 'testTag', 'MainAbility' + JSON.stringify(data));
18.       data.launchWant = want;
19.     })
20.   }
21.   
22.   // 略...
23. }

复制代码

2.2.3 界说getContextWantData函数

        在ets/common目录中，创建util.ets工具包文件，并在内部界说获取数据的方法getContextWantData()，在页面文件实验时通过它获取eventHub事件中的数据。代码如下：

1. import Want from '@ohos.app.ability.Want'
2. import hilog from '@ohos.hilog';
3. import Constants from './Constants'
5. class EventData {
6.   launchWant: Want | null = null
7. }
8. let that = this;
10. export function getContextWantData(): Want {
11.   hilog.info(0x0000, 'testTag', 'Util start')
12.   let context = getContext(that);
13.   // 定义数据bus事件
14.   let data: EventData = new EventData();
15.   // 触发eventHub事件，请求数据
16.   context.eventHub.emit(Constants.ABILITY_WANT_DATA, data);
18.   hilog.info(0x0000, 'testTag', 'Util want ' + JSON.stringify(data.launchWant as Want));
19.   return data.launchWant as Want;
20. }

复制代码

2.2.4 页面获取数据

        页面中引入getContextWantData()函数，在struct外部门获取wantData数据，在aboutToAppear()回调函数中输出结果参数并查询获取的结果。

1. import Header from '../components/Header'
3. // 略...
5. import { getContextWantData } from '../common/utils'
6. const wantData = getContextWantData()
8. @Entry
9. @Component
10. struct Index {
11.   @State keyword: string = ''
12.   @State StoreName: string = '-'
14.   aboutToAppear(){
15.     const params = wantData.parameters
16.     this.StoreName = params('storeName')
18.     console.log('testTag want parameters', JSON.stringify(params))
19.   }
20.   
21.   // 略...
22. }  
23.   

复制代码

        使用此方法，同样可以实现数据共享和传递。并且，从下图中可以看出，各自实验的先后顺序。

如上图可知，程序中各自实验流程：

• Ability中的onCreate()回调函数先实验于页面，所以在触发onCreate()回调函数时，界说eventHub事件和回调函数，等待页面中触发emit事件获取数据。
  
• 当加载页面时，实验getContextWantData()函数，触发了emit事件得到了onCreate()中eventHub回调函数响应，并获取回调函数中的want数据，将其通过return返回输出到页面中。
  
• 在aboutToAppear()回调函数实验时，将获取到的want数据绑定到当前页面的状态变量StoreName上，使数据向下传递到Header组件中并在界面中显示结果（门店名称）。
  

2.3、使用全局变量

        可以将数据存储在globalThis对象上，然后在Page页面中直接访问这些数据。这个方法更为直接，且全局共享。
2.3.1 界说GlobalThis类

        首先在ets/common目录中创建globalThis.ets文件，代码如下：

2. import Want from '@ohos.app.ability.Want'
3. class GlobalThis {
4.   launchWant: Want
5. }
6. // 单例模式，全局共享
7. const globalData = new GlobalThis()
9. export default globalData

复制代码

2.3.2 Ability中绑定

        在Ability中引入globaData实例，并在onCreate()函数实验时，将回调函数中获取到的want数据绑定到globalData实例的launchWant变量上。代码如下：

1. import UIAbility from '@ohos.app.ability.UIAbility';
2. import hilog from '@ohos.hilog';
3. import window from '@ohos.window';
4. import Want from '@ohos.app.ability.Want';
5. import globalData from '../common/globalThis'
7. export default class StoreAbility extends UIAbility {
8.   onCreate(want) {
9.     hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
10.     // 获取数据，并绑定在全局变量上
11.     globalData.launchWant = want;
12.   }
13.   
14.   // 略...
15. }

复制代码

2.3.3 页面中获取

        在页面中同样是直接引入globalData实例，在aboutToAppear()回调函数实验时绑定门店名称信息，并在控制台输出结果。

1. import Header from '../components/Header'
3. // 略...
5. import globalData from '../common/globalThis'
7. @Entry
8. @Component
9. struct Index {
10.   @State keyword: string = ''
11.   @State StoreName: string = '-'
13.   aboutToAppear(){
14.     const params = globalData.launchWant.parameters
15.     this.StoreName = params('storeName')
16.        
17.     console.log('testTag globalData launchWant', JSON.stringify(globalData.launchWant.parameters))
18.   }

复制代码

        控制台输出结果如下图：

2.4、Preferences用户首选项

        通过Preferences用户首选项实现数据持久化，这在之前写过一篇文档中介绍了Preferences用户首选项功能，并使用它封装了一个LocalStorage本地持久化数据功能。
所在1：HarmonyOS开发 - 本地持久化之实现LocalStorage实例_localstorage需要界说吗-CSDN博客
所在2：HarmonyOS开发 - 本地持久化之实现LocalStorage支持多实例-CSDN博客

2.4.1  LocalStorageMulti本地持久化

        这里就直接贴代码了，拷到项目标ets/common目录、命令为localStorageMulti.ets，代码如下：

1. import common from '@ohos.app.ability.common'
2. import preferences from '@ohos.data.preferences'
4. const isJsonObject = (value: string) : boolean => {
5.   try {
6.     const parseStr = JSON.parse(value)
7.     return 'object' === typeof parseStr && null !== parseStr
8.   } catch (e) {
9.     console.log('testTag', e)
10.     return false
11.   }
12. }
14. // 定义存储值类型
15. type valueType = string | number | boolean
16. // 定义json对象存储类型
17. type dataType = { value: valueType | object, expire: number }
19. /**
20. * 定义LocalStorage类
21. */
22. export class MyLocalStorage {
23.   private preference: preferences.Preferences // 用户首选项实例对象
24.   // 定义多Preferences实例 存储变量
25.   private static multiPreferences: Map<string, MyLocalStorage> = new Map()
26.   // preferences加载成功回调函数
27.   public preferenceSuccess: Function = () => {}
29.   /**
30.    * 创建多实例
31.    * @param context
32.    */
33.   static multiInstance(context?: common.UIAbilityContext): MyLocalStorage {
34.     const name = context.abilityInfo.name
35.     // 如果存在该实例，则直接返回
36.     if(MyLocalStorage.multiPreferences.has(name)) {
37.       console.log('testTag context.abilityInfo.name update', name)
38.       return MyLocalStorage.multiPreferences.get(name)
39.     }
40.     // 如果不存在，则创建实例
41.     else {
42.       console.log('testTag context.abilityInfo.name create', name)
43.       const instance = new MyLocalStorage()     // 实例LocalStorage对象
44.       instance.initial(context)               // 初始化Preferences实例
45.       // 存储LocalStorage对象
46.       MyLocalStorage.multiPreferences.set(name, instance)
47.       // 返回实例对象
48.       return instance
49.     }
50.   }
52.   // 定义初始化函数
53.   initial(context: common.UIAbilityContext): void {
54.     // 这里将UIAbility中应用上下文的name作用为实例名称，即该项目的ApplicationAbility或ProductAbility
55.     preferences.getPreferences(context, context.abilityInfo.name).then(preference => {
56.       this.preference = preference
57.       if('function' === typeof this.preferenceSuccess) this.preferenceSuccess()
58.       console.log('testTag', 'success~')
59.     }).catch(e => {
60.       console.log('testTag error', e)
61.     })
62.   }
63.   /**
64.    * 定义增加函数
65.    * @param key
66.    * @param value
67.    * @param expire
68.    */
69.   put(key: string, value: valueType | object, expire?: Date): void {
70.     // 定义存储Json格式对象
71.     const data : dataType = {
72.       value,      // 存储内容
73.       expire : (expire ? expire.getTime() : -1)   // 如果失效时间存在，将其转换为时间戳，否则传入-1
74.     }
75.     let dataStr: string = '';
76.     try {
77.       dataStr = JSON.stringify(data)    // 当数据转换成功，将其存储
78.       console.log('testTag', dataStr)
79.     } catch (e) {
80.       console.log('testTag error', e)
81.       return
82.     }
83.     this.preference.put(key, dataStr).then(() => this.preference.flush()).catch(e => {
84.       console.log('testTag error', e)
85.     })
86.   }
88.   /**
89.    * 定义获取对应key数据
90.    * @param key
91.    */
92.   async getValue(key: string): Promise<valueType | object> {
93.     // 首页判断key值是否存在，不存在返回空
94.     if(!this.preference.has(key)) {
95.       return Promise.resolve(null)
96.     }
97.     let value = (await this.preference.get(key, '')) as valueType
98.     // 判断如果为字符串类型数据，并且为JSON对象格式数据，将其转换为对象
99.     if('string' === typeof value && isJsonObject(value)) {
100.       try {
101.         const data: dataType = JSON.parse(value)
102.         console.log('testTag', data.expire, Date.now(), data.expire < Date.now())
103.         // 如果当前存储内容无时效性，或者在时效期内，都直接返回
104.         if(data.expire === -1 || data.expire > Date.now()) {
105.           return Promise.resolve(data.value)
106.         }
107.         // 如果已失效，将其信息删除
108.         else {
109.           this.preference.delete(key)
110.         }
111.       } catch (e) {
112.         console.log('testTag error', e)
113.         return Promise.resolve(null)      // 如果转换出错，返回null
114.       }
115.     }
116.     // 通过Promise异步回调将结果返回(如果内容不为JSON格式对象，或者过了时效期，返回null)
117.     return Promise.resolve(null)
118.   }
120.   /**
121.    * 更新数据
122.    * @param key
123.    * @param value
124.    */
125.   async update(key: string, value: valueType){
126.     try {
127.       const preValue = await this.getValue(key)
128.       if(preValue != value) {
129.         this.put(key, value)
130.       }
131.     } catch (e) {
132.       console.log('testTag error', e)
133.     }
134.   }
135.   /**
136.    * 定义移除函数
137.    * @param key
138.    */
139.   remove(key: string): void {
140.     this.preference.delete(key).then(() => this.preference.flush()).catch(e => {
141.       console.log('testTag error', e)
142.     })
143.   }
144.   /**
145.    * 定义清除所有数据函数
146.    */
147.   clearAll(): void {
148.     this.preference.clear().then(() => this.preference.flush()).catch(e => {
149.       console.log('testTag error', e)
150.     })
151.   }
152. }
153. /**
154. * 实例LocalStorage
155. */
156. const myLocalStorage = new MyLocalStorage()
158. /**
159. * 导出localStorage单例对象
160. */
161. export default myLocalStorage as MyLocalStorage

复制代码

2.4.2 Ability中初始化并存储数据

        在onCreate()回调函数中，获取MyLocalStorage实例对象，并且等待myStore.preferenceSuccess()实验回调时，表示Preferences实例已加载完成，可以实验存取操作了。代码如下：

1. import UIAbility from '@ohos.app.ability.UIAbility';
2. import hilog from '@ohos.hilog';
3. import window from '@ohos.window';
4. import Want from '@ohos.app.ability.Want';
5. import { MyLocalStorage } from '../common/LocalStorageMulti'
7. export default class StoreAbility extends UIAbility {
8.   onCreate(want) {
9.     hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
10.     // 通过本地存储，存储Want数据
11.     const myStore=  MyLocalStorage.multiInstance(this.context)
12.     hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate' + JSON.stringify((want.parameters)));
13.     // 在Preferences首选项加载成功后执行
14.     myStore.preferenceSuccess = () => {
15.       myStore.put('want', want.parameters)
16.     }
17.   }
18.   
19.   // 略...
20. }

复制代码

2.4.3 页面中获取持久化数据

        在页面中通过MyLocalStorage对象完成want数据获取，首先是将MyLocalStorage实例本地化，方便后续使用，再通过异步完成数据获取工作，并且将结果输出到控制台上。代码如下：

1. import Header from '../components/Header'
3. // 略...
5. import { MyLocalStorage } from '../common/LocalStorageMulti'
6. import common from '@ohos.app.ability.common'
8. @Entry
9. @Component
10. struct Index {
11.   @State keyword: string = ''
12.   @State StoreName: string = '-'
13.   private myLocalStorage: MyLocalStorage
15.   async aboutToAppear(){
16.     this.myLocalStorage = MyLocalStorage.multiInstance(getContext(this) as common.UIAbilityContext)
17.     // 获取Ability中本地化存储的Want参数信息
18.     const wantData = await this.myLocalStorage.getValue('want')
19.     // 将storeName赋值给状态变量
20.         this.StoreName = wantData.storeName
21.     console.log('testTag myLocalStorage', JSON.stringify(wantData))
22.   }
23.   
24.   // 略...
25. }

复制代码

        控制台结果如下图：

        在HarmonyOS中，数据传递和共享的方式多种多样，每种方式都有实在用的场景和上风。选择符合的数据传递和共享方式，可以进步应用的性能、可维护性和用户体验。根据功能场景需求，选择一种较为符合的即可。


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。