場景

鴻蒙基于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的屬性

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

總結

以上是生活随笔為你收集整理的鸿蒙开发目录结构及文件使用规则介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。