與Vue的不兼容點(diǎn)

雖然weex官方文檔有列出來(lái)weex和Vue 2.0的不同之處，但是并不全，這里再補(bǔ)充下：

1. v-bind:class可以普通class共存，但是v-bind:class只支持?jǐn)?shù)組形式的語(yǔ)法，另外的兩種形式對(duì)象和字符串都不支持
2. weex官網(wǎng)文檔寫(xiě)著支持vue的<transition>標(biāo)簽，實(shí)際上并不支持
3. Android和iOS端的vue是內(nèi)置的，無(wú)需import；而h5端的vue要用script標(biāo)簽在html頁(yè)引入；這樣可以是三端工程的代碼都不用import vue
4. 如果使用vuex的話，因?yàn)関uex導(dǎo)入的時(shí)候會(huì)檢測(cè)window.vue是否存在，存在的話自動(dòng)安裝，而android和ios端并不會(huì)這樣。所以要判斷當(dāng)前環(huán)境，如果非web平臺(tái)，那么Vue.use(Vuex)

與babel的不兼容

1. 用babel轉(zhuǎn)譯ES6語(yǔ)法沒(méi)有問(wèn)題，但是使用babel-polyfill會(huì)導(dǎo)致運(yùn)行不起來(lái)，而使用babel-runtime沒(méi)有問(wèn)題，所以要么用babel-plugin-transform-runtime，要么自行按需引入core-js（建議用這種，減少代碼體積）
2. 記得配置.babelrc，通過(guò)weex-toolkit創(chuàng)建的工程默認(rèn)沒(méi)有.babelrc，這會(huì)導(dǎo)致你的vue文件的es6代碼不會(huì)被轉(zhuǎn)譯

定位

1. fixed定位的元素z軸位置會(huì)比較高

顯示和隱藏

1. weex的display只支持flex，所以無(wú)法設(shè)置display: none，自然vue的v-show指令也不支持。但是vue的v-if可以使用，需要注意的是，v-if最好只用來(lái)做頁(yè)面結(jié)構(gòu)的控制，而不要偷懶作為顯示隱藏的手段。實(shí)踐開(kāi)發(fā)中發(fā)現(xiàn)，帶有圓角的圖片使用v-if來(lái)顯示->隱藏->再顯示時(shí)，圓角效果會(huì)消失。
   最佳實(shí)踐：用v-if做頁(yè)面結(jié)構(gòu)控制，顯示隱藏使用css的visibility屬性來(lái)控制
2. 用v-if顯示和隱藏單元素正常，但是對(duì)稍微復(fù)雜點(diǎn)的組件在顯示的時(shí)候會(huì)出現(xiàn)抖動(dòng)，解決方式參考寫(xiě)的另一篇文章解決組件用v-if顯示時(shí)出現(xiàn)的抖動(dòng)問(wèn)題
3. weex不支持overflow-x和overflow-y；iOS下支持overflow，默認(rèn)為visible；Android下overflow默認(rèn)為hidden，且無(wú)法設(shè)置為visible。iOS和Android的overflow默認(rèn)值差別，有可能會(huì)導(dǎo)致兩端的展示效果不一致，比如對(duì)某個(gè)元素設(shè)置放大動(dòng)畫(huà)，可能iOS上正常展示，但是Android上超出父元素的動(dòng)畫(huà)部分不可見(jiàn)，這點(diǎn)要注意。

動(dòng)畫(huà)

1. weex不支持css3的animation，但是其內(nèi)部有一個(gè)animation的模塊供我們以代碼的方式來(lái)生成動(dòng)畫(huà)，animation的模塊的大部分設(shè)置項(xiàng)名稱(chēng)和意義都能和css3的動(dòng)畫(huà)對(duì)應(yīng)上，算是一個(gè)簡(jiǎn)化版，如果要把css3的動(dòng)畫(huà)移過(guò)來(lái)一般都是要做改動(dòng)，甚至是動(dòng)畫(huà)的重實(shí)現(xiàn)。比如weex的動(dòng)畫(huà)不能設(shè)置運(yùn)行次數(shù)，只運(yùn)行一次，需要依靠動(dòng)畫(huà)完成回調(diào)自行處理；又如weex的動(dòng)畫(huà)不支持類(lèi)似css3對(duì)動(dòng)畫(huà)關(guān)鍵幀在某個(gè)階段的屬性調(diào)整，也是只能依靠動(dòng)畫(huà)完成回調(diào)自己把一個(gè)大動(dòng)畫(huà)拆解成好幾個(gè)小動(dòng)畫(huà)來(lái)拼接起來(lái)。
   最關(guān)鍵的一點(diǎn)是：weex的動(dòng)畫(huà)完成之后，動(dòng)畫(huà)對(duì)象會(huì)保持在動(dòng)畫(huà)完成之后的狀態(tài)，后續(xù)的動(dòng)畫(huà)都是在這個(gè)狀態(tài)上繼續(xù)的，但是代碼中的屬性設(shè)置的相對(duì)值都是相對(duì)于原來(lái)對(duì)象的。此外，動(dòng)畫(huà)完成后對(duì)原來(lái)的對(duì)象設(shè)置一些狀態(tài)，然后再繼續(xù)執(zhí)行新動(dòng)畫(huà)，有可能這個(gè)狀態(tài)并不反應(yīng)在動(dòng)畫(huà)上。
   最佳實(shí)踐：一旦對(duì)象設(shè)置了動(dòng)畫(huà)，最后對(duì)象的其他狀態(tài)都依靠動(dòng)畫(huà)函數(shù)來(lái)設(shè)置會(huì)比較有保證
2. iOS的timingFunction默認(rèn)是linear，而android默認(rèn)是ease-in-out，所以最好設(shè)置下這個(gè)值，以統(tǒng)一效果

媒體

• weex不支持audio標(biāo)簽，只支持video標(biāo)簽
• iOS下會(huì)有控制條，即使把width和height都設(shè)為0，也還是會(huì)有控制條，所以要設(shè)opacity為0，才能把控制條隱藏掉。此外，不能把width和height都設(shè)置為0，因?yàn)閍ndroid下video會(huì)不工作，所以至少要把width和height設(shè)為1px。還要設(shè)置position為absolute，以脫離布局流，以免影響后續(xù)元素的布局。
  最后，總結(jié)下用video模擬audio的css設(shè)置：

position: absolute;
width: 1px;
height: 1px;
opacity: 0;

PS：用video標(biāo)簽手機(jī)發(fā)熱比較明顯。

圖像

1. weex不支持img而是使用image（這個(gè)標(biāo)簽是需要閉合的），且src要使用絕對(duì)url，不能使用相對(duì)url。
2. 時(shí)刻記住一定要設(shè)置width和height，對(duì)于全屏圖片的設(shè)置，利用weex.config.env的deviceWidth和deviceHeight計(jì)算出比例，再乘以750的布局寬度，即可得出布局高度
3. weexpack添加的android和iOS工程，iOS支持base64的image，但是android和使用的圖片處理庫(kù)有關(guān)，默認(rèn)使用Picasso，但是Picasso不支持base64圖片；改用Fresco即可，在WXApplication中，把默認(rèn)使用的ImageAdapter改成FrescoImageAdapter即可

文本

1. 由于都是flex布局，所以weex元素都屬于h5概念上的塊級(jí)元素，而沒(méi)有內(nèi)聯(lián)元素，所以不支持富文本。通過(guò)flex-direction: row和text來(lái)模擬，只能在text塊級(jí)換行，效果比較糟糕。要想實(shí)現(xiàn)真正的富文本，還得自行對(duì)weex擴(kuò)展。
2. 和HTML5的語(yǔ)法不同，weex的標(biāo)簽語(yǔ)法要求符合XML形式，所以<input>這樣的空標(biāo)簽需要閉合，可以是<input />這樣的方式

事件

1. weex中像click這樣的事件默認(rèn)是冒泡的，但是一旦鏈條上有元素監(jiān)聽(tīng)了click事件，那么冒泡就到這個(gè)元素終止，像被自動(dòng)調(diào)用了e.stopPropagation()一樣；當(dāng)然可以通過(guò)在根元素上設(shè)置bubble="true"來(lái)取消這種行為，讓冒泡可以繼續(xù)，同時(shí)通過(guò)e.stopPropagation()自行手動(dòng)終止冒泡（App Store上下載的iOS版PlayGround自帶的weex還是0.11版的，還沒(méi)有這個(gè)函數(shù)）