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