HarmonyOS JS Project: Directory Structure and Internationalization File Rules

The article starts from a basic Hello World application built with JavaScript on HarmonyOS and then explains the overall directory layout and the role of config.json in the js folder.

It shows configuration screenshots for supported devices and route definitions, noting that each route entry corresponds one‑to‑one with the left‑hand navigation.

Development mainly occurs under the js directory; developers can double‑click an HTML file to preview it on the right side of the IDE.

Lifecycle hooks are introduced: onCreate runs when the application is created, and onDestroy runs when it is destroyed. At the page level, index.js provides an onInit() hook that is triggered when the page initializes.

Internationalization is handled by loading the zh-CN.json resource file inside onInit and assigning its value to a title variable, which can then be displayed in the HTML with {{ title }} or directly via {{ $t('strings.hello') }}.

File usage rules

Resources can be accessed via absolute paths (starting with /) or relative paths (starting with ./ or ../). The article recommends using relative paths for code files (e.g., ../common/utils.js) and absolute paths for resource files (e.g., /common/xxx.png). Common code and resources should be placed under a common folder.

In CSS, images are referenced with url(), such as url(/common/xxx.png). When two files reside in the same directory, either absolute or relative paths work; when they are in different directories, absolute paths are required because Webpack may change the file’s location during bundling.

To illustrate these rules, the article creates a datas folder under common and adds a students.js file containing an exported array of student objects:

export default [
    { name: "张三", age: "20" },
    { name: "李四", age: "22" },
    { name: "王五", age: "23" },
    { name: "赵六", age: "26" },
    { name: "公众号", age: "28" },
    { name: "霸道的程序猿", age: "30" }
];

The array is imported in index.js and bound to the page’s data model:

import students from "../../common/datas/students.js";
export default {
    data: {
        title: "",
        students
    },
    onInit() {
        this.title = this.$t('strings.world');
    }
};

The HTML uses a list component to render each student’s name and age:

<div class="container">
    <text class="title">{{ $t('strings.hello') }} {{ title }}</text>
    <list>
        <list-item-group>
            <list-item for="{{students}}">
                <text>{{$item.name}} - {{$item.age}}</text>
            </list-item>
        </list-item-group>
    </list>
</div>

Finally, the article shows how to modify the CSS class title to style the text, and screenshots confirm that the preview reflects the expected output.