weex開發小記（一）

使用weex開發一個來月了，前前後後踩了不少坑，特此記錄，以免遺忘

注意點

css

1. weex 中預設的設計尺寸是750px

   <meta name="weex-viewport" content="750">

   當真實螢幕不是750px時，weex會自動将設計尺寸映射到真實尺寸中去，即

   scale

   ——

   scale = 目前螢幕尺寸 / 750

   dpi = dp = px

   會根據手機變化（相當于rem，是相對大小）

   是以在擴充元件的時候，如果使用者傳入一個尺寸值，比如說 375，這個值是相對于 750 的設計尺寸來說的。你隻需要将這個值乘以 scale, 就是适配目前螢幕的真實尺寸：value = 375 * this.data.scale. 它應該占據真實螢幕一半的大小。

2. 樣式需要使用class屬性寫，用id不支援，手機上可能顯示不出來
3. 圖檔需要指定大小才能顯示，在移動端可以使用’wx’ 機關(相當于px)，不會轉化為rem，移動端支援’px’.
4. iconfont 需要借助“dom”子產品

var domModule = weex.requireModule('dom');
domModule.addRule('fontFace', {
  'fontFamily': "iconfont",
  'src': "url('http://at.alicdn.com/t/font_733844_kb66bfef25.woff')"
});
           

1. weex

   預設的HTML根元素的

   font-size = 螢幕的寬度/10

2. weex

   中不支援陰影，設定

   box-shadow

   不起作用。
3. 樣式表和CSS規則是由weex.js架構和原生渲染引擎管理的，處于性能考慮，weex目前支援在、單個類選擇器，并且隻支援CSS規則的子集。
4. weex

   支援線性漸變，不支援徑向漸變

5. weex中的

   box-shadow

   僅僅支援IOS。 需要給容器的背景手動添加顔色，否則在IOS中背景顔色就是

   box-shadow

   的顔色。

6. weex

   不支援媒體查詢`

7. image

   元件設定

   flex

   為1後，就可以不用設定

   width

   和

   height

   ，可以自适應螢幕尺寸.
8. 使用絕對定位，不一定和web頁面的顯示一樣。在tab頁面使用fixed定位時，web中，固定定位的元素是根據第一個tab頁面的左邊源。而在安卓中是根據螢幕的左側。
9. 如果定位元素超過容器邊界，在 Android 下，超出部分将不可見，原因在于 Android 端元素 overflow 預設值為 hidden，但目前 Android 暫不支援設定 overflow: visible。
10. fixed定位的元素z軸位置會比較高
11. position、transform：改變tab層的位置，此方法在定位為

    position:fixed;

    的子元素上依然無效。
12. 在APP上 fixed層級最高，但是fixed容器不能滾動。。。。。。
13. 給style傳多個字元串，在APP不能正确顯示顔色，需要傳遞對象
14. 使用 border 實作的三角形，在 native 環境中是不起作用的，即使樣式分開寫了，也是不起作用，weex 環境中使用三角形，建議使用 svg。
15. input 元件設定disabled屬性需要寫成

    <input type="text" disabled="true">

    不能采用web中的簡寫方式。

Weex

頁面跳轉

Weex 使用原生的navigator來管理頁面執行個體，多個執行個體之間的狀态是隔離的。也就是說，vuex和vue-router智能作用于目前一個頁面，無法在多個頁面間共享狀态。

在項目中我也就沒有使用

vue-router

和

vuex

. 使用自己寫的

router.js

統一管理項目中的頁面跳轉。在頁面傳遞簡單的參數時，附加加URL後面，當需要在2個頁面間傳遞複雜的對象時，暫時将2個頁面合成一個tab頁面實作頁面跳轉。

安卓native

android APP 項目中本地資源檔案讀取是要使用file:///協定，安卓版本不同，配置可能不同。預設位址是

file:///android_asset

，是以在項目中的js引用圖檔時要使用此位址

在頁面跳轉時，可以不用直接使用

file:///pages/homeIndex.js

，不用加

android_asset

是因為在activity類中做了解析.

android Studio 編譯時提示 Error: Please select android sdk.

解決方法

與Vue的不相容點

1. v-bind:class可以普通class共存，但是v-bind:class隻支援數組形式的文法，另外的兩種形式對象和字元串都不支援
2. weex官網文檔寫着支援vue的标簽，實際上并不支援

顯示和隐藏

1. weex

   的

   display

   隻支援

   flex

   ，是以無法設定

   display: none

   , 自然

   vue

   的

   v-show

   指令也不支援. 但是

   vue

   的

   v-if

   可以使用, 需要注意的是,

   v-if

   最好隻用來做頁面結構的控制, 而不要偷懶作為顯示隐藏的手段。

   最佳實踐：用

   v-if

   做頁面結構控制，顯示隐藏使用css的

   visibility

   屬性來控制

   用

   v-if

   顯示和隐藏單元素正常，但是對稍微複雜點的元件在顯示的時候會出現抖動，解決方式參考寫的另一篇文章解決元件用

   v-if

   顯示時出現的抖動問題
2. weex不支援

   overflow-x

   和

   overflow-y

   , iOS下支援

   overflow

   ，預設為visible；Android下

   overflow

   預設為

   hidden

   ，且無法設定為

   visible

   。
3. opacity、visablity：此處需要注意，Weex的渲染機制和web是有差別的，對父層設定opacity或者visiablity隐藏是無法同時隐藏定位為

   position:fixed;

   的子元素。

js

weex 中不支援Promise的finally方法，支援then和catch**

image元件的load方法在android下失效，且在android下圓角無法設定，安卓端可以自己寫一個元件個weex使用

元件中有input元件時，如果給input初始化一個值，且綁定一個onInput事件，則在安卓中會執行onInput函數。而在web中不會

new Date(time)

time

在安卓中不能解析

xxxx-xx-xx

格式的時間參數，可以傳

20180101

格式的

但是在傳

20180101

格式的時間時注意不能傳字元串，需要轉化為整型,且必須為是時間戳

可以使用

2018,1,1

格式，注意不能為

2018,01,01

weex-nat 子產品使用注意點

1. 由于項目中需要上傳檔案到伺服器，是以用到weex-nat子產品的transfer子產品，但是此子產品隻支援一次上傳一個檔案。并且檔案流的

   name

   屬性已經被寫死為

   file

2. 調用weex-nat 的image和camera子產品時，回調函數不自動執行。需要在相應的安卓項目的activity中重寫

   onActivityResult

   方法。

/**
      * 為了執行WXModule擴充子產品中定義的{@link com.taobao.weex.common.WXModule#onActivityResult(int, int, Intent)}
      * */
     @Override
     protected void onActivityResult(int requestCode, int resultCode,
                                     Intent data)
     {
         super.onActivityResult(requestCode, resultCode, data);
         if (mWXSDKInstance != null)
         {
             mWXSDKInstance.onActivityResult(requestCode, resultCode, data);
         }
     }
 }