鴻蒙開發目錄結構及檔案使用規則介紹

阿新 • • 發佈：2021-06-27

場景

鴻蒙基於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中通過

去獲取資原始檔中的內容。

檔案使用規則

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

引用程式碼檔案，需使用相對路徑，比如：../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>