DevEco Studio 3.0 ETS新語法解讀
DevEco Studio 3.0
最新版本的 DevEco Studio 3.0發布了 在鴻蒙里面有一個新的名詞叫ets, 什么是ets呢 可以理解為一門新的語言 它隨之也完善了ts一些功能支持。
開門見山，先貼經驗 :
box({ 樣式屬性||接受變量||不寫 }){ box容器內子元素 }.box需要寫的樣式屬性
先說一下ets的模板創建
第一步
下載 3.0的IDE
下載地址:https://developer.harmonyos.com/cn/develop/deveco-studio#download
安裝時會自動下載對應的 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 完成創建。
下面大家看看結構和頁面。
page下面的每個 .ets文件都是一個單獨的頁面,它們的語法和java的命令式很相像。
著重看 build函數 page下每個ets都是一個頁面 ,每個頁面都有一個build函數。
- 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() 都是容器里面的子節點內容
- .fontSize(50) //此處為text的字體樣式
- .fontWeight(FontWeight.Bold)
- Button() { //button 節點
- Text('next page') // button里 又包含了一個 text 文本節點
- .fontSize(25)
- .fontWeight(FontWeight.Bold)
- }.type(ButtonType.Capsule)
- .margin({ // button的css樣式
- top: 20
- })
- .backgroundColor('#0D9FFB')
- .onClick(() => { //點擊跳轉事件
- routePage()
- })
- }
- .width('100%') // flex層級的css修飾樣式
- .height('100%')
- }
- =========手動分割線============
- }
他對應的頁面是這樣的。
按照如此的語法結構 結合代碼模塊里的注釋去看 在 一個函數 寫結構 樣式 js邏輯 是不是顯得非常雜亂,稍微不注意 就寫錯了節點。
如果我想在容器里面再包一個容器 布局 那就需要套娃 和嵌套回調地獄一樣 從前有座山 山里有座廟,廟里有個和尚講故事 講的故事是 從前有座山~~~~~~~~~~~~
最后總結一下 這個ETS 的語法就是box({ 樣式屬性||接受變量||不寫 }){ box容器內子元素 }.box需要寫的樣式屬性。
按照這種寫法 一般大一點的頁面成百上千的個節點那不敢想象。
我覺得的把這種寫法對開發者很不友善，期待迭代改進。
