[[380607]]

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

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

1、mac os的鴻蒙環境搭建

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

官方文檔已經說明的比較詳細了，我是使用mac os的開發者，在創建一個js項目后，Gradle下載完成，報出了如下錯誤：

看起來像是華為鏡像倉中找不到包，百度必應都沒搜到這種錯誤，但我感覺還是Gradle的問題。

點擊DevEco Studio -> Preference -> Build... -> Gradle -> Gradle user home，IDE自帶的目錄是帶".m2"的目錄，在mac系統中這一類目錄是有權限的。雖然在該目錄中也已有gradle-6.3下載完成，但程序無訪問權限。需要重新創建一個文件夾作為Gradle user home，然后重新Build，靜等Gradle重新下載完畢。

build完成后，在Tools -> HVD Manager中選擇P40，再點擊run，第一個工程就啟動成功了。

2、鴻蒙js工程目錄結構

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

現在來看看鴻蒙js工程的目錄結構，全局配置文件為/entry/src/main/config.json。對頁面的配置在module.js.pages中，且也是將應用啟動的首頁放在第一個。js頁面在/entry/src/main/js/default/pages目錄中，右鍵目錄 -> new -> JS Page后，IDE自動新建文件夾，文件夾中包括hml, css, js三個文件，且頁面會自動在config.json中配置。

3、flex布局

flex布局是寫前端頁面時很常用的布局方式，在嘗試寫一個最簡單的頁面布局時，發現鴻蒙布局和微信小程序確有不同點。這是一個很簡單的小程序布局，三個view標簽不加任何布局方式，自動豎向排列，每個元素占一行。

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

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

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

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

©著作權歸作者和HarmonyOS技術社區共同所有，如需轉載，請注明出處，否則將追究法律責任。

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

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