鴻蒙開發目錄結構及文件使用規則介紹

場景

鴻蒙基於JS搭建HelloWorld並修改國際化文件：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/118274050

在上面基於JS搭建起來Hello World之后，對於應用開發目錄及文件使用規則都有哪些。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

配置文件總覽

 

 

前端開發，核心是在js目錄下，還有一個就是config.json

配置支持哪些設備

 

 

還有就是配置路由的地方

 

 

這里的路由配置跟左邊是一一對應的關系。

開發的話最多也是在js下這個地方進行，比如可以雙擊打開html文件，在右側預覽中就能進行預覽

 

 

app.js中代表了整個應用的生命周期

 

 

onCreate:應用創建的時候觸發的生命周期鈎子函數。

onDestroy:銷毀應用的時候觸發的生命周期鈎子函數。

index.js是頁面級別的，其中的onInit()是頁面初始化時候觸發的生命周期鈎子函數

 

 

在onInit中獲取國際化資源文件zh-CN.json中的內容並賦值給title變量。

然后再html中直接通過{{ title }}顯示內容。或者直接在html中通過

{{ $t('strings.hello') }}

去獲取資源文件中的內容。

文件使用規則

應用資源可通過絕對路徑或相對路徑的方式進行訪問，
本開發框架中絕對路徑以 "/" 開頭，相對路徑以 "./" 或 "../" ，具體訪問規則如下：

引用代碼文件，需使用相對路徑，比如：../common/utils.js。

引用資源文件，推薦使用絕對路徑。比如：/common/xxx.png。

公共代碼文件和資源文件推薦放在 common 下，通過以上兩條規則進行訪問。

CSS 樣式文件中通過 url() 函數創建 數據類型，如：url(/common/xxx.png)。

如果代碼文件A和文件B位於同一目錄，則代碼文件B引用資源文件時可使用相對路徑，也可使用絕對路徑。

如果代碼文件A和文件B位於不同目錄，則代碼文件B引用資源文件時必須使用絕對路徑。因為Webpack打包時，代碼文件B的目錄會發生變化。

下面以list顯示對象數據為例。

首先在common下新建datas目錄，在此目錄下新建student.js對象數據文件

export default [
    {
        name:"張三",
        age:"20"
    },
    {
        name:"李四",
        age:"22"
    },
    {
        name:"王五",
        age:"23"
    },
    {
        name:"趙六",
        age:"26"
    },
    {
        name:"公眾號",
        age:"28"
    },
    {
        name:"霸道的程序猿",
        age:"30"
    }
]

 

 

然后再index.js中引入

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

在html中使用list標簽進行列表顯示

<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>

還可以在css文件中修改class為titile的屬性

 

 

然后就可以再預覽中看到效果