Weex踩坑記錄

轉載請注明出處:http://blog.csdn.net/hnytdangyao/article/details/78328423.

本文出自 [ 黨耀的部落格 ]

參考官方文檔 https://weex.apache.org/cn/references/index.html

踩坑分享

在學習weex時需要詳細閱讀官方文檔

目錄

• • 踩坑分享
    • 目錄
    • list标簽和scroller标簽
    • 布局踩坑
    • 作用域問題
    • 使用計算屬性時注意

list标簽和scroller标簽

這裡隻需要注意一點，list和scroller都是支援垂直和橫向滾動的，具體屬性參考官網，但是如果想要互相嵌套的話必須是不同方向的。

布局踩坑

問題一 ：首先看下面這段代碼

在Android裡以及在JavaScript裡如果給變量賦一個空字元串是可以的并沒有什麼問題，然而在Vue裡，用 :src 這種格式表明的是一個資料綁定，而不是給變量指派，那麼問提就來了，編譯的報錯是這樣的：

ERROR in ./~/weex-vue-loader/lib/template-compiler.js?id=data-v-cd97ce!./~/weex-vue-loader/lib/selector.js?type=template&index=!./src/views/index.vue
    Module build failed: SyntaxError: Unexpected token (:)
        at Parser.pp$raise (/Users/dangyao/WebstormProjects/tbdx-weex/node_modules/vue-template-es2015-compiler/buble.js::)
        at Parser.pp.unexpected (/Users/dangyao/WebstormProjects/tbdx-weex/node_modules/vue-template-es2015-compiler/buble.js::)
        at Parser.pp$parseExprAtom (/Users/dangyao/WebstormProjects/tbdx-weex/node_modules/vue-template-es2015-compiler/buble.js::)
        at Parser.parseExprAtom (/Users/dangyao/WebstormProjects/tbdx-weex/node_modules/vue-template-es2015-compiler/buble.js::)
        at Parser.pp$parseExprSubscripts (/Users/dangyao/WebstormProjects/tbdx-weex/node_modules/vue-template-es2015-compiler/buble.js::)
    ….
     @ ./src/views/index.vue :-
           

相對移動端開發來說前端的調試會比較麻煩，weex更是很好的繼承了這一點。這種報錯你絕壁找不到位置，報錯的行數和你實際代碼的位置相差了十萬八千裡。

問題二：

給bar設定了width:100%;結果未生效，沒有鋪滿全屏。

<div class="bar">
    <image class="cameraImg" :src="cameraUrl" @click="gotoCamera"></image>
    <text class="fragment">淘寶大學</text>
    <image class="searchImg" :src="searchUrl" @click="gotoSearch"></image>
</div>
           

表示百分比值，如“50％”，“88.8％”等。它是 CSS 标準的一部分，但 Weex 暫不支援。

說明：在 Weex 中，Flexbox 是預設且唯一的布局模型。以便所有頁面元素的排版能夠一緻可預測，同時頁面布局能适應各種裝置或者螢幕尺寸。需詳細了解flex相關屬性：flex-direction、justify-content、align-items請參考上面的文檔。

用以下樣式解決：

<style scoped>
  .bar{
    flex-direction:row;
    justify-content:space-between;
    height:px;
    background-color: rgba(, , , );
  }
  .fragment{
    flex:;
    top:px;
    text-align:center;
    font-size: px;
    color: #994563;
  }
</style>
           

注意：

1.隻有style标簽加入scode才預設以750px的螢幕渲染

2.rgb(a,b,c) 或 rgba(a,b,c,d) 的性能比其他顔色格式差很多，請選擇合适的顔色格式

作用域問題

//在function裡this的作用域是目前的函數
 module.openWindow(obj, function (e) {});
 //在箭頭函數裡，this的作用域是全局的
 module.openWindow(obj, (e) => {});
           

在回調的内部函數内調用外部函數或者變量，最好把回調寫為箭頭函數，在箭頭函數内的作用域是全局的，可以用this直接調用外部的函數或者屬性。

使用計算屬性時注意

computed 計算屬性下調用data裡的值或者methods裡的方法都需要用this，這裡也是一個作用域問題。