進擊的weex 第二發 weex的各類坑

各類錯誤處理

1.錯誤：ReferenceError: global is not defined

使用stream模塊發送請求時報錯。

解決辦法
把下面代碼放入app.js中

if (weex.config.platform == 'Web') {
  if(window && !window.global) { // Stream.fetch jsonp調用失敗，緣由是找不到global
    window.global = window;
  }
}

2.錯誤：weex is not defined
解決辦法
命令行中執行 npm install weex-vue-render@0.10.3 --save
而後檢查weex.html裏這句<script src="./node_modules/weex-vue-render/index.js"></script>
修改成<script src="./node_modules/weex-vue-render/dist/index.js"></script>

3.weex.config.platform判斷平臺失敗(undefined)？？？
解決辦法

// 輸出 Web Android iOS
console.log(weex.config.platform || weex.config.env.platform);

4.web能夠接受jsonp的返回數據 app不行
web

app

解決辦法
後端檢驗reffer，然而web有這個，app沒有。。。因此讓他們去掉就行了~

5.setRefreshOrLoading: HostView == null !!!!!! check list attr has append =tree

解決辦法
還沒解決。。。。

全平臺篇

• 不支持class嵌套（得跟sass，less，precss說拜拜啦~）

• 只支持px長度單位（跟%，rem，em等等也得說拜拜啦~）

• color最好寫成#000，#000000，black這種形式
  rgb(a,b,c) 或 rgba(a,b,c,d) 的性能比其餘顏色格式差不少

• css屬性(border margin padding background 等等) 不可簡寫
  錯誤的寫法-> border: 1 solid #ff0000;margin: 0 auto;

• 默認盒模型爲flex，box-sizing 默認爲 border-box

• <image>組件暫不支持本地圖片，需指明width和height不然沒法顯示

• background-image須要使用<image>組件和position定位來現實

• background-image 優先級高於 background-color，這意味着同時設置 background-image 和 background-color，background-color 被覆蓋。

• 不支持z-index但靠後的元素層級更高

• Weex 支持四種僞類：active, focus, disabled, enabled
  全部組件都支持 active, 但只有 input 組件和 textarea 組件支持 focus, enabled, diabled。

Web篇

• 各類不能在app上正常顯示的 大多都能在web上被支持- -!!

iOS篇

• 支持 9 種 font-weight值
  （normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900）

• 不支持webp 用jpg吧~

• image組件不可省略寫成img標籤

• <image> 組件上尚沒法只定義一個或幾個角的 border-radius。好比你沒法在這兩個組件上使用 border-top-left-radius。

Android篇

• 不支持gif

• font-weight值僅支持 400（normal） 和 700（bold）

• 若是定位元素超過容器邊界，在 Android 下，超出部分將不可見，緣由在於 Android 端元素 overflow 默認值爲 hidden，但目前 Android 暫不支持設置 overflow: visible。