[HarmonyOS] How to implement data transfer and use of global variables in the page for lightweight smart wearable applications

【Key words】

Lightweight smart wear, LiteWearable, data transfer, global variables

 

【Problem Description】

Develop a lightweight smart wearable LiteWearable application, define global variables in app.js, and get an error TypeError: Cannot read property '$def' of undefined when getting it through this.$app.$def.xxx on the page

 

【problem analysis】

It has been confirmed that LiteWearable does not support $def for now, as long as it is a lightweight device type application development, it does not support $def, so it is not possible to define and obtain global variables in app.js like other device types such as mobile phones

 

【Problem solving and sample code】

Method 1: If you need to obtain global variables on multiple pages, you can store the variables in data or files. The reference documents are as follows:

https://developer.harmonyos.com/cn/docs/documentation/doc-references/lite-wearable-data-storage-0000001222269657

Method 2: If you only need to transfer data in a few pages, you can pass the parameters to the target page through router.replace when the page is redirected. The development of lightweight smart wearable applications is different from other types of devices. The router.getParams method cannot be used to obtain parameters. For the method of passing and obtaining parameters, refer to the following steps

Take the index page to jump to the chartPage page and load the chart component as an example:

Step 1: The index page binds the click event goToChart method to the component, jumps to the chartPage page, and passes the required parameters in the chart component to it

Step 2: Define variables with the same name in the chartPage.js file: xAxisMin, xAxisMax, yAxisMin, yAxisMax, define the initial value, define the variable with the same name as the page parameter, and automatically assign the value of the incoming parameter to the parameter defined in the chartPage;

Define the parameter lineOps displayed by the chart component, which can be defined as the initial value

chartPage.html

Step 3: Directly use the xAxisMin, xAxisMax, yAxisMin, and yAxisMax variables in the onInit method in chartPage.js, reassign lineOps, and refresh the chart, so that the index page is transferred to the chartPage and the chart data is refreshed.

 

【Related documents】

• Lightweight smart wearable page routing:

  https://developer.harmonyos.com/cn/docs/documentation/doc-references/lite-wearable-basic-features-routes-0000001176591442

• Lightweight smart wearable data storage and file storage:

  https://developer.harmonyos.com/cn/docs/documentation/doc-references/lite-wearable-data-storage-0000001222269657

• Lightweight smart wearable chart components:

  https://developer.harmonyos.com/cn/docs/documentation/doc-references/lite-wearable-basic-chart-0000001222269637

 

 

 For more comprehensive technical articles, please visit https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh 

{{o.name}}

{{m.name}}