我是三分一把刀。

今天抽了點(diǎn)時(shí)間來寫一個(gè)demo?，F(xiàn)在說下自己實(shí)現(xiàn)的過程。

????????最開始沒看文檔，所以遇到了很多坑呀，還以為自己沒錯(cuò)，可能是編譯錯(cuò)了?，F(xiàn)在我說下我遇到的一些問題。

1，布局方面。

? ? 1.1 在寫demo頁(yè)面的時(shí)候，布局還是按照之前的瀏覽器css3的樣式寫的，而且對(duì)某些class還是前面加了限制，比如 .xx-box .xx-title,本意是box內(nèi)部的title，結(jié)果發(fā)現(xiàn)瀏覽器生效，結(jié)果打包到安卓上是無(wú)效的，因此去找文檔，發(fā)現(xiàn)是需要單個(gè)的給dom寫樣式，就直接.xx-title。這樣就生效了。

? ? 1.2 頁(yè)面布局默認(rèn)display:flex

? ? ? ? 由于沒有看文檔，就一直按照傳統(tǒng)的盒子模型去布局，采用的單位也是vw，與vh，在瀏覽器上跑起來是ok的，打包之后在虛擬機(jī)上跑起來結(jié)果crash了，由把代碼跑到android studio，在logcat里面發(fā)現(xiàn)不支持該單位，很無(wú)語(yǔ)，這次讓我認(rèn)認(rèn)真真還是去看文檔，weex定義了一些與瀏覽器不同的dom元素，這點(diǎn)和微信小程序類似，flex布局和瀏覽器由點(diǎn)點(diǎn)區(qū)別，比如：瀏覽器支持flex-shrink，而weex不支持，瀏覽器的flex-grow，到了weex就是flex，這里說的是內(nèi)部元素的一些css，看了官方文檔之后，用了幾分鐘寫了個(gè)頁(yè)面，很丑，這點(diǎn)莫怪。

https://weex.apache.org/zh/docs/styles/common-styles.html#%E7%9B%92%E6%A8%A1%E5%9E%8B 【官方文檔地址】

二：效果

在之前weex platform add android 等創(chuàng)建好環(huán)境之后

運(yùn)行npm run android，【實(shí)際跑的指令為weex run android】

會(huì)在platforms/android/app/build/outputs/下生成一個(gè)apk文件，沒有給apk簽名之前app會(huì)有一個(gè)weex的開機(jī)圖片，簽名之后就不會(huì)有了。

okay之后，在瀏覽器里面和apk在安卓虛擬機(jī)里面跑起來。

瀏覽器效果

安卓虛擬機(jī)效果

? ??????????

兩個(gè)差不多，主要問題在布局上。其余的都o(jì)kay。

我是三分一把刀。歡迎溝通交流? qq：389836169