Weex 開發注意事項

上一篇簡紹了weex 的一些基礎知識和開發規範，這篇講些實戰中會遇到的坑，和開發技巧相關東西。

1、使用webpack 構建時的注意事項

    項目中使用的是webpack 3.X 版本，webpack現在已發佈4.X 版本，但4.X 會將js banner(註釋)放到單獨License文件，這和weex在使用前端框架時需要標記banner不符合，暫未找到解決方案。   

// webpack插件定義
let webpackPlugins = [  
    // new webpack.optimize.UglifyJsPlugin({minimize: isProd}),
    // 實例化banner
    new webpack.BannerPlugin({
        banner: '// { "framework": "Vue" }\n',
        raw: true,
        exclude: 'Vue'
    })
];

2、vue 框架引入

weex框架默認集成了前端框架（vue, rax），所有在開發單文件組件時候，不需要再次引入vue，再次引入會如下報錯。

import Index from './Index';
new Vue({
    el: '#app',
    render: h => h(Index)
})

   再次引入會有如下錯誤：    

3、<a>組件中的綁定事件

在官網<a>組件的介紹中是支持通用事件的，但在實際開發過程中發現，如果在<a> 上綁定click事件，如出現handler.value.replace 錯誤，如下在a 標籤綁定一個showSearchBar 事件：

  <a slot="right"  class="g-right" v-on:click="showSearchBar()"></a>

出現的錯誤信息如下：

4、Class樣式綁定

  vue開發中是支持對v-bind:class 傳入對象的，也支持使用傳入數組，以動態地切換 class：   

<div v-bind:class="{ active: isActive }"></div>

• native 中只支持傳入數組方式：

<div v-bind:class="[activeClass, errorClass]"></div>

    在weex 中使用對象形式綁定class 會報typeError錯誤，錯誤信息如下：

• class 不支持多個分割線寫法

   比如select-center-list-item 會提示 'SyntaxError: No identifiers allowed directly after numeric literal'

 

 

5、添加特定字體文件

在weex 如需要添加特定的字體文件，需引用dom 模塊，如下：

const domModule = weex.requireModule('dom')
domModule.addRule('fontFace', {
    'fontFamily': "iconfont2",
    'src': "url('http://at.alicdn.com/t/font_1469606063_76593.ttf')"
});

6、子組件觸發父組件傳遞事件

在vue開發中子組件可以通過emit 方法觸發父組件；在weex開發中，使用this.$emit('functionName'); functionName 不支持帶function-name 形式。

7、scroller 事件觸發機制

• scroller 事件觸發機制：loadmore -> loading
• refresh  ：pullingdown -> onrefresh
• Android 端scroller中使用loading 後，導致無法觸發refresh 失效且 無法再次觸發分頁加載

scroller 組件一定得明確定義width , height

8、圖片資源引用

     image 圖片只能放網絡上的地址，不能引用本地文件

9、獲取當前頁面地址

• web 端通過location 

/// #if !isNative
return window && window.location.href ? window.location.href : ''
/// #endif

• native端通過 weex.config

/// #if isNative
return weex.config.CrtUrl ? weex.config.CrtUrl : '
/// #endif

weex提供了一個快捷的方式獲取當前頁面的url的方法:weex.config.bundleUrl; 通過此方法 不管在網頁還是在app 上  都可以獲取到