DevEco Studio 3.0 ETS新語法解讀
51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)
DevEco Studio 3.0
最新版本的 DevEco Studio 3.0發(fā)布了 在鴻蒙里面有一個新的名詞叫ets, 什么是ets呢 可以理解為一門新的語言 它隨之也完善了ts一些功能支持。
開門見山，先貼經(jīng)驗 :
box({ 樣式屬性||接受變量||不寫 }){ box容器內(nèi)子元素 }.box需要寫的樣式屬性
先說一下ets的模板創(chuàng)建
第一步
下載 3.0的IDE
下載地址:https://developer.harmonyos.com/cn/develop/deveco-studio#download
安裝時會自動下載對應(yīng)的 SDK
如果沒有的 可以在setting里搜索SDK
(我也看過這個ets的 sdk包,其實就是自己封裝的一系列ts
例如我的ets api 存放路徑就是 D:\backup\n021823\AppData\Local\OpenHarmony\Sdk\ets\3.0.0.0\component,
如何查找路徑如上圖，有興趣的朋友可以看看 如下圖)：
第二步
文件新建 新的模板 NEW Project。
拉到下面選擇 最后一個 [standard]Empty Ability 完成創(chuàng)建。
下面大家看看結(jié)構(gòu)和頁面。
page下面的每個 .ets文件都是一個單獨的頁面,它們的語法和java的命令式很相像。
著重看 build函數(shù) page下每個ets都是一個頁面 ,每個頁面都有一個build函數(shù)。
- import router from '@system.router';
- async function routePage() {
- let options = {
- uri: 'pages/second'
- }
- try {
- await router.push(options)
- } catch (err) {
- console.error(`fail callback, code: ${err.code}, msg: ${err.msg}`)
- }
- }
- @Entry
- @Component
- struct Index {
- =========手動分割線============
- build() {
- Flex({ direction: FlexDirection.Column, alignItems:
- ItemAlign.Center, justifyContent: FlexAlign.Center }) {
- //這里首先是一個大的容器 flex 里面的屬性代表它的布局方式
- Text('Hello World')
- //接下來的text (Hello World) 或者 同級的Button() 都是容器里面的子節(jié)點內(nèi)容
- .fontSize(50) //此處為text的字體樣式
- .fontWeight(FontWeight.Bold)
- Button() { //button 節(jié)點
- Text('next page') // button里 又包含了一個 text 文本節(jié)點
- .fontSize(25)
- .fontWeight(FontWeight.Bold)
- }.type(ButtonType.Capsule)
- .margin({ // button的css樣式
- top: 20
- })
- .backgroundColor('#0D9FFB')
- .onClick(() => { //點擊跳轉(zhuǎn)事件
- routePage()
- })
- }
- .width('100%') // flex層級的css修飾樣式
- .height('100%')
- }
- =========手動分割線============
- }
他對應(yīng)的頁面是這樣的。
按照如此的語法結(jié)構(gòu) 結(jié)合代碼模塊里的注釋去看 在 一個函數(shù) 寫結(jié)構(gòu) 樣式 js邏輯 是不是顯得非常雜亂,稍微不注意 就寫錯了節(jié)點。
如果我想在容器里面再包一個容器 布局 那就需要套娃 和嵌套回調(diào)地獄一樣 從前有座山 山里有座廟,廟里有個和尚講故事 講的故事是 從前有座山~~~~~~~~~~~~
最后總結(jié)一下 這個ETS 的語法就是box({ 樣式屬性||接受變量||不寫 }){ box容器內(nèi)子元素 }.box需要寫的樣式屬性。
按照這種寫法 一般大一點的頁面成百上千的個節(jié)點那不敢想象。
我覺得的把這種寫法對開發(fā)者很不友善，期待迭代改進(jìn)。
51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)
