Weex學習日誌

2021-09-20 06:06:04 字數 2103 閱讀 7143

1)     list的使用,原生這邊有復用機制,最好是以原生的寫法,可以規避一些效能問題;

2)     減少圖層的重疊,避免過多的圖層巢狀;

3)     避免重複設定view的背景色,減少過度繪製;

4)     顏色值寫法官方推薦#ff0000形式,避免效能損耗;

1)     position為absolute的元素,不受父元素的position影響,和h5父元素position必須為relative不同;

2)     image 元件,在ios中不支援單獨設1、2、3個圓角,只支援4個圓角一起配置。可採用父布局div設定4個來實現;

3)     text控制項如果寫上line-height 時,此值一定要比font-size 大;

4)     flex布局中,在父元素寬高固定的情況下,子元素設定width超出父元素時,不會自適應縮放,h5則會等分縮放;

5)     flex-direction預設是column,不需要設定display:flex,且可以同position:absolute一起使用;

6)     div包含text時,div不固定width使其寬度隨text自適應,div的position必須設為absolute;

7)     weex android預設超出父元素部分會被裁切,所以子元素可視區域必須在父元素內;

8)     weex不支援z-index屬性,所以越靠後寫的展示在最上層;

9)     weex android不支援box-shadow屬性,採用背景圖方式製作陰影;

10)     列表渲染\ if渲染,用key標明模板,否則切換模板時由於vue會重用模板導致渲染混亂;

11)     position: absolute; 這個定位,在android上表現為以viewport為參考係;

12)     ios上運用object.assign({}, a, b); 若a的屬性比b多幾個,會出現ios展示白屏;

13)     weex indicator元件, web端item-color、item-selected-color、item-size樣式無效,web端需要重置樣式;

14)     由於weex中樣式使用scoped, web端渲染應用樣式時會將對應class的樣式填進對應標籤style裡面,indicator元件樣式構建之後填進style在web端會表現不一致,需要相容處理;

15)     div中如果有兩個布局a,b是互斥顯示的關係時,不建議使用v-if v-else來控制顯示。建議使用兩個boolean 值各自控制每個控制項是否顯示。(因為如果v-if的條件判斷成立就建立if的元件,否則建立v-else元件。專案使用中很大一部分情況,決定顯示a或者b是由介面返回結果控制的,這樣在初始化時,有部分情況是先建立b,再建立a,增加了首屏渲染的時間);

/*

weex.config.env.platform

weex.config.env.devicewidth

weex.config.env.deviceheight

weex.config.env.scale

weex.config.env.devicemodel

*/const animation = weex.requiremodule('animation')

const dom = weex.requiremodule('dom')

const g_weex_event = weex.requiremodule('event')

g_weex_event.getdevicinfo(deviceinfo=>)

g_weex_event.setblurstyle(json.stringify(params), function(result) )

g_weex_event.toast()

dom.addrule('fontface', )

dom.scrolltoelement(this.$refs.list, )

/* wxcomponent觸發weex-js方法 */

[self fireevent:@"method" param:];

method(e) , value:$`)

}

Weex 學習教程

一 環境搭建 2.檢視npm安裝版本,終端輸入 npm v版本不能低於2.15.1 3.安裝weex toolkit,終端輸入 npm install g weex toolkit 至此,環境已經搭建完成 二 使用 template div class container div class cel...

WEEX 環境安裝

weex是阿里開源的一套構建跨平台的移動框架。對於前端的同學,最直觀的是web components的開發方式 對於native同學,可以理解為使用web的開發方式構建跨平台移動程式 ios android 可以模擬的是react native,但是相對react native更為徹底 不僅統一了 ...

Weex入門指南

開發環境配置 打通路徑以訪問工具鏈 toolkit home c toolkits 配置好重啟機器開啟命令視窗檢查工作情況,輸入node v 如果現實版本號則成功 npm是nodejs乙個非常流行的管理工具,可以安裝基於nodejs開發的任何模組包,g表示把weex toolkit安裝到全域性模組中...