[[380607]]

想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com/#zz

1、mac os的鴻蒙環(huán)境搭建

華為官方文檔：https://developer.harmonyos.com/cn/docs/documentation/doc-guides/installation_process-0000001071425528

官方文檔已經(jīng)說(shuō)明的比較詳細(xì)了，我是使用mac os的開(kāi)發(fā)者，在創(chuàng)建一個(gè)js項(xiàng)目后，Gradle下載完成，報(bào)出了如下錯(cuò)誤：

看起來(lái)像是華為鏡像倉(cāng)中找不到包，百度必應(yīng)都沒(méi)搜到這種錯(cuò)誤，但我感覺(jué)還是Gradle的問(wèn)題。

點(diǎn)擊DevEco Studio -> Preference -> Build... -> Gradle -> Gradle user home，IDE自帶的目錄是帶".m2"的目錄，在mac系統(tǒng)中這一類目錄是有權(quán)限的。雖然在該目錄中也已有g(shù)radle-6.3下載完成，但程序無(wú)訪問(wèn)權(quán)限。需要重新創(chuàng)建一個(gè)文件夾作為Gradle user home，然后重新Build，靜等Gradle重新下載完畢。

build完成后，在Tools -> HVD Manager中選擇P40，再點(diǎn)擊run，第一個(gè)工程就啟動(dòng)成功了。

2、鴻蒙js工程目錄結(jié)構(gòu)

在熟悉的微信小程序中，應(yīng)用的全局配置在項(xiàng)目根目錄的app.json中，包括頁(yè)面的注冊(cè)，window顯示的內(nèi)容等。頁(yè)面則在pages目錄中，每個(gè)頁(yè)面由wxml, wxss, js, json四個(gè)文件組成。

現(xiàn)在來(lái)看看鴻蒙js工程的目錄結(jié)構(gòu)，全局配置文件為/entry/src/main/config.json。對(duì)頁(yè)面的配置在module.js.pages中，且也是將應(yīng)用啟動(dòng)的首頁(yè)放在第一個(gè)。js頁(yè)面在/entry/src/main/js/default/pages目錄中，右鍵目錄 -> new -> JS Page后，IDE自動(dòng)新建文件夾，文件夾中包括hml, css, js三個(gè)文件，且頁(yè)面會(huì)自動(dòng)在config.json中配置。

3、flex布局

flex布局是寫前端頁(yè)面時(shí)很常用的布局方式，在嘗試寫一個(gè)最簡(jiǎn)單的頁(yè)面布局時(shí)，發(fā)現(xiàn)鴻蒙布局和微信小程序確有不同點(diǎn)。這是一個(gè)很簡(jiǎn)單的小程序布局，三個(gè)view標(biāo)簽不加任何布局方式，自動(dòng)豎向排列，每個(gè)元素占一行。

鴻蒙中的容器標(biāo)簽為div，和html一致。必須用一個(gè)div作為整體頁(yè)面的父級(jí)標(biāo)簽，由它包裹頁(yè)面中的所有子標(biāo)簽元素。嘗試和小程序一樣的布局寫法：

<div class="container"> 
    <div class="top"> 
    </div> 
    <div class="content"> 
    </div> 
    <div class="bottom"> 
    </div> 
</div> 

三個(gè)div的width都為100%，卻展示出了以下樣式：

由此猜想hml的div標(biāo)簽并不是行級(jí)元素，故為父級(jí)div加上flex布局，這才正常了。

©著作權(quán)歸作者和HarmonyOS技術(shù)社區(qū)共同所有，如需轉(zhuǎn)載，請(qǐng)注明出處，否則將追究法律責(zé)任。

想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com/#zz