最全的weex踩坑攻略-出自大量實踐與沉澱

在本身的業務環境中使用，並開放給第三方isv，企業開發者使用，這是一篇有內涵有故事的文章。

若是你對weex微應用感興趣，也在開發着微信小程序，不妨來看看爲了讓你減小顧慮而準備的技術對比表格，是的，開發釘釘的weex微應用是如此的簡單。

訪問這個連接閱讀： 釘釘Weex微應用與微信小程序技術對比表格 。

技術概述

weex是阿里開源的一套構建高性能移動界面的原生跨平臺技術框架，它的上層由Vue，Rax（很是相似React的開發框架）實現數據驅動，底層由iOS，Android實現render engine來驅動界面的最終落地。類比React Native它的優點在於可貴的一次編寫，多端運行，是的，它也很好的支持着移動Web端。

構建-build

Native使用weex-loader，Web則須要使用vue-loader，在Web端上vue-loader目前僅支持^11.3.3版本，以及weex-vue-render須要>= 0.11.50，而且vue-loader的配置作以下修改：

• webpack 1.x

module: {
  loaders: [
    {
      test: /\.vue(\?[^?]+)?$/,
      loaders: ['vue-loader']
    }
  ]
},
vue: {
  /**
   * important! should use postTransformNode to add $processStyle for
   * inline style normalization.
   */
  compilerModules: [
    {
      postTransformNode: el => {
        el.staticStyle = `$processStyle(${el.staticStyle})`
        el.styleBinding = `$processStyle(${el.styleBinding})`
      }
    }
  ]
}

• webpack 2.x

module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          compilerModules: [
            {
              postTransformNode: el => {
                el.staticStyle = `$processStyle(${el.staticStyle})`
                el.styleBinding = `$processStyle(${el.styleBinding})`
              }
            }
          ]
        }
      }
    ]
}

最佳的實踐是推薦你使用目前爲止咱們內部評價最高的一份腳手架工程（支持三端一致，意味着處理了降級。）：dingtalk-templates/webpack，你能夠直接下載它，自行修改package.json文件中的{{}} 配置，或者安裝 open-dingtalk/weex-dingtalk-cli 這個命令行工具來玩轉腳手架，這個命令行工具就像你使用vue-cli同樣的簡單：

$ npm install -g weex-dingtalk-cli

樣式-style

weex支持的樣式屬於css子集

• 必須寫完整，如background:#000須要寫成background-color:#000

• 樣式不容許提取文件，必須寫在Vue的單組件中

• 原則上不推薦使用預處理器，由於沒法預期轉譯出來的樣式符合weex的css子集

• 佈局只能使用Flexbox

• 若是要顯示文本必須使用text組件，而且你想改變字體大小必須寫在text組件上

• 只支持class，不容許繼承

• 單位只支持px

• 不支持背景圖片

• 基於750px進行縮放，會有浮點級別的偏差

• 樣式須要聲明 scoped 屬性

• Android上處理圓角，必須在外層div中設置border-radius

• 若是你想動態的替換class，只能使用數組表達式，<div :class=['name', a? 'b': 'c']></div>

若是你想使用預處理器（只是不推薦），能夠以下配置：

{
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
        loaders: {
          scss: 'vue-style-loader!css-loader!sass-loader'
        }
    }
}

<style lang="sass">
    @import './common.scss'
    // ...
</style>

若是你想使用更精準的適配（沒法忍受浮點級別的偏差），能夠獲取scale，deviceWidth自行進行適配，推薦在loader階段去處理（自行開發轉換工具）。

JavaScript與內存管理-JavaScript and memory manage

因爲JS運行在JavaScriptCore/V8中，此與Web有較大差別。

以下：

• jquery，axios 之類的原來Web開發領域的庫都不可使用

• 不支持DOM操做

• 雖然提供了Native DOM能夠操做界面的渲染，原則上不推薦使用，方法與DOM操做相似

• 既然不支持DOM操做，更改界面的方式應該使用數據驅動

• 僅支持部分事件

• weex SDK >= 0.10.0 的才支持事件冒泡

• 沒有window，document，location，history等對象

• runtime是一個「全局環境」，不容許往全局環境中掛載對象，由於沒法釋放且全部weex頁面共享

• 只有scroller和list組件能夠滾動

• 不容許在Vue中操做style，遍歷是很耗性能的

• Vue中的v-show等原來操做Dom的指令或Api都不可使用

• vue-router 只容許使用 abstract 模式

• vuex必須在初始化以前使用Vue.use注入

• native端只能使用網絡圖片，解決的方式是在最後上線時統一替換成CDN

• 熱更新以及增量更新的方式均可以參考React Native目前成熟的方案

• iOS因爲使用了同一套URL System，UIWebView的cookie是會共享到weex中的，同理weex中的cookie也是會共享的，只有WKWebView不會。原則上，你不該該使用cookie來處理用戶體系的問題

weex native 與 weex web 之間的差別較大，那麼怎麼辦？

咱們提供了一套抹平一些常見差別的庫，你也能夠在weex環境中使用，https://github.com/open-dingtalk/weex-dingtalk-journey。

在說內存（memory）以前，你們先來看一副圖，weex的內存分佈：

正常狀況下，Native memory 業務開發人員是沒法處理的，而運行在js core 中的內存，咱們知道若是不斷開引用，js是沒法回收釋放內存的。

• 不容許往 runtime 裏去掛載對象

• 業務代碼中的一些引用在beforeDestroy 中斷開設置爲null

• 學會使用工具分析內存泄漏的問題，https://webkit.org/downloads/

• 不要隨意的使用函數遞歸，縮短對象方法的執行路徑（傳統JS領域的內存管理最佳實踐也適用一部分）

• 因爲界面的渲染須要依賴createInstance(id, code, config, data)，sendTasks(id, tasks)，receiveTasks(id, tasks)發送指令的方式進行通訊，你應該減小通訊的次數，在更新界面時，合併沒必要要的通訊指令的發送。

• 若是你使用vue-router的方式，儘可能減小組件之間的共享。

轉場方式-navigator

因爲weex的特殊性，它的轉場方式有幾種構成。

• weex to weex，若是你須要支持釘釘js-api，那麼你應該使用openLink。（若是是你本身實現，使用weex自帶的navigator模塊）

• weex to h5 依然使用openLink，（若是是你本身實現，那麼能夠經過module的方式來打開一個WebViewController| UIWebView or WKWebView）

• native to weex 直接alloc weex 容器的Controller傳入Url便可

若是你使用vue-router，那麼配置好你的路由path，使用push，go方法便可，惟一惋惜的是使用vue-router的方式較爲生硬。

頁面級別的數據傳輸-Page level data transfer

頁面級別的數據傳輸基本不多會發生，釘釘的開發者推薦統一使用domainStorage方案。

• weex to weex 經過URL傳參數（攜帶的數據量有限），經過weex storage module

• weex to h5，h5 to weex 經過URL傳參數

• native to weex 經過alloc weex 容器中的option或者data傳入，前者能夠在weex.config中獲取，後者能夠在vm上下文中獲取

• weex to native 定義一個跳轉native的module，使用native的屬性或者init時傳入

調試工具-Debug Kit used

weex的調試工具須要額外安裝weex-toolkit，weex-devtool，以及在你的Native工程中集成對應的WXDevtool（iOS）。

若是你運行weex debug遇到以下的錯誤：

Error: EACCES: permission denied, open '/Users/xxx/.xtoolkit/node_modules/weex-devtool/frontend/weex/weex-bundle.js'
    at Error (native)

（非Windows用戶）使用sudo便可。

• 不集成 WXDevtool SDK

首先，你須要安裝Weex Playground，可自行在各大市場中下載安裝。

不須要指明文件路徑，在終端輸入：

$ weex debug

先使用 Weex Playground 掃碼（啓動成功後會彈出一個界面），而後將你的業務代碼貼到 這裏，注意：

• 不容許出現import等導入模塊的語法

• 安裝了Weex Playground的設備和你的電腦必須在同一局域網內

最後用安裝了Weex Playground的設備掃碼（業務代碼貼過去那裏的右側會出現的二維碼）。

• 集成 WXDevtool SDK

[WXDevTool setDebug:YES];
[WXDevTool launchDevToolDebugWithUrl:@"ws://192.168.1.108:8088/debugProxy/native"];

ws:// xxx.xx..x 這個地址是在用weex debug 在終端裏給你輸出出來的，若是setDebug爲YES會開啓debugger模式，反之亦然。

注意setDebug設置爲YES。

原生開發-Native

請直接閱讀 技術 | Weex入坑之旅 ，這是用iOS視角寫的一篇文章，大概在半年以前。

寫在最後

但願你們能夠用一個開放的心態來看待weex，它的設計，實現有不少是值得學習的地方，好比多framework支持，共享runtime，module，component，handler等等，很是的自由領域，至關於它設計好了一個render engine，理論上你能夠學習它的幾個關鍵接口，知道Native DOM指令後，也能開發出替代Vue的上層框架，不信？你看看Rax即明白了。

weex也有一些不足的地方，開發者數量少，社區活躍度不高，不少問題並不必定能被google搜錄到。文檔確實有一點不完善，native的實現也有必定的bug數量，你看react這麼多年了，依然有bug，只要在逐步改進迭代修復，我以爲它就是很是棒的，萬事沒有十全十美，美中不足的一點瑕疵，說不定纔是完美呢。