場(chǎng)景

鴻蒙基于JS搭建HelloWorld并修改國(guó)際化文件：

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

在上面基于JS搭建起來(lái)Hello World之后，對(duì)于應(yīng)用開(kāi)發(fā)目錄及文件使用規(guī)則都有哪些。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關(guān)注公眾號(hào)
霸道的程序猿
獲取編程相關(guān)電子書(shū)、教程推送與免費(fèi)下載。

配置文件總覽

前端開(kāi)發(fā)，核心是在js目錄下，還有一個(gè)就是config.json

配置支持哪些設(shè)備

還有就是配置路由的地方

這里的路由配置跟左邊是一一對(duì)應(yīng)的關(guān)系。

開(kāi)發(fā)的話最多也是在js下這個(gè)地方進(jìn)行，比如可以雙擊打開(kāi)html文件，在右側(cè)預(yù)覽中就能進(jìn)行預(yù)覽

app.js中代表了整個(gè)應(yīng)用的生命周期

onCreate:應(yīng)用創(chuàng)建的時(shí)候觸發(fā)的生命周期鉤子函數(shù)。

onDestroy:銷毀應(yīng)用的時(shí)候觸發(fā)的生命周期鉤子函數(shù)。

index.js是頁(yè)面級(jí)別的，其中的onInit()是頁(yè)面初始化時(shí)候觸發(fā)的生命周期鉤子函數(shù)

在onInit中獲取國(guó)際化資源文件zh-CN.json中的內(nèi)容并賦值給title變量。

然后再html中直接通過(guò){{ title }}顯示內(nèi)容。或者直接在html中通過(guò)

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

去獲取資源文件中的內(nèi)容。

文件使用規(guī)則

應(yīng)用資源可通過(guò)絕對(duì)路徑或相對(duì)路徑的方式進(jìn)行訪問(wèn)，
本開(kāi)發(fā)框架中絕對(duì)路徑以 "/" 開(kāi)頭，相對(duì)路徑以 "./" 或 "../" ，具體訪問(wèn)規(guī)則如下：

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

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

公共代碼文件和資源文件推薦放在 common 下，通過(guò)以上兩條規(guī)則進(jìn)行訪問(wèn)。

CSS 樣式文件中通過(guò) url() 函數(shù)創(chuàng)建 數(shù)據(jù)類型，如：url(/common/xxx.png)。

如果代碼文件A和文件B位于同一目錄，則代碼文件B引用資源文件時(shí)可使用相對(duì)路徑，也可使用絕對(duì)路徑。

如果代碼文件A和文件B位于不同目錄，則代碼文件B引用資源文件時(shí)必須使用絕對(duì)路徑。因?yàn)閃ebpack打包時(shí)，代碼文件B的目錄會(huì)發(fā)生變化。

下面以list顯示對(duì)象數(shù)據(jù)為例。

首先在common下新建datas目錄，在此目錄下新建student.js對(duì)象數(shù)據(jù)文件

export default [{name:"張三",age:"20"},{name:"李四",age:"22"},{name:"王五",age:"23"},{name:"趙六",age:"26"},{name:"公眾號(hào)",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標(biāo)簽進(jìn)行列表顯示

<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的屬性

然后就可以再預(yù)覽中看到效果

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。