摘要：如果你對微應(yīng)用感興趣，也在開發(fā)著微信小程序，不妨來看看為了讓你減少顧慮而準(zhǔn)備的技術(shù)對比表格，是的，開發(fā)釘釘?shù)奈?yīng)用是如此的簡單。訪問這個鏈接閱讀釘釘微應(yīng)用與微信小程序技術(shù)對比表格。與內(nèi)存管理由于運行在中，此與有較大差異。

在自己的業(yè)務(wù)環(huán)境中使用，并開放給第三方isv，企業(yè)開發(fā)者使用，這是一篇有內(nèi)涵有故事的文章。

如果你對weex微應(yīng)用感興趣，也在開發(fā)著微信小程序，不妨來看看為了讓你減少顧慮而準(zhǔn)備的技術(shù)對比表格，是的，開發(fā)釘釘?shù)膚eex微應(yīng)用是如此的簡單。

訪問這個鏈接閱讀： 釘釘Weex微應(yīng)用與微信小程序技術(shù)對比表格 。

weex是阿里開源的一套構(gòu)建高性能移動界面的原生跨平臺技術(shù)框架，它的上層由Vue，Rax（非常類似React的開發(fā)框架）實現(xiàn)數(shù)據(jù)驅(qū)動，底層由iOS，Android實現(xiàn)render engine來驅(qū)動界面的最終落地。類比React Native它的優(yōu)勢在于難得的一次編寫，多端運行，是的，它也很好的支持著移動Web端。

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})`
              }
            }
          ]
        }
      }
    ]
}

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

$ npm install -g weex-dingtalk-cli

weex支持的樣式屬于css子集

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

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

原則上不推薦使用預(yù)處理器，因為無法預(yù)期轉(zhuǎn)譯出來的樣式符合weex的css子集

布局只能使用Flexbox

如果要顯示文本必須使用text組件，并且你想改變字體大小必須寫在text組件上

只支持class，不允許繼承

單位只支持px

不支持背景圖片

基于750px進行縮放，會有浮點級別的誤差

樣式需要聲明 scoped 屬性

Android上處理圓角，必須在外層div中設(shè)置border-radius

如果你想動態(tài)的替換class，只能使用數(shù)組表達式，

如果你想使用預(yù)處理器（只是不推薦），可以如下配置：

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

如果你想使用更精準(zhǔn)的適配（無法忍受浮點級別的誤差），可以獲取scale，deviceWidth自行進行適配，推薦在loader階段去處理（自行開發(fā)轉(zhuǎn)換工具）。

由于JS運行在JavaScriptCore/V8中，此與Web有較大差異。

如下：

jquery，axios 之類的原來Web開發(fā)領(lǐng)域的庫都不可以使用

不支持DOM操作

雖然提供了Native DOM可以操作界面的渲染，原則上不推薦使用，方法與DOM操作類似

既然不支持DOM操作，更改界面的方式應(yīng)該使用數(shù)據(jù)驅(qū)動

僅支持部分事件

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

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

runtime是一個“全局環(huán)境”，不允許往全局環(huán)境中掛載對象，因為無法釋放且所有weex頁面共享

只有scroller和list組件可以滾動

不允許在Vue中操作style，遍歷是很耗性能的

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

vue-router 只允許使用 abstract 模式

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

native端只能使用網(wǎng)絡(luò)圖片，解決的方式是在最后上線時統(tǒng)一替換成CDN

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

iOS由于使用了同一套URL System，UIWebView的cookie是會共享到weex中的，同理weex中的cookie也是會共享的，只有WKWebView不會。原則上，你不應(yīng)該使用cookie來處理用戶體系的問題

weex native 與 weex web 之間的差異較大，那么怎么辦？

我們提供了一套抹平一些常見差異的庫，你也可以在weex環(huán)境中使用，https://github.com/open-dingtalk/weex-dingtalk-journey。

在說內(nèi)存（memory）之前，大家先來看一副圖，weex的內(nèi)存分布：

正常情況下，Native memory 業(yè)務(wù)開發(fā)人員是無法處理的，而運行在js core 中的內(nèi)存，我們知道如果不斷開引用，js是無法回收釋放內(nèi)存的。

不允許往 runtime 里去掛載對象

業(yè)務(wù)代碼中的一些引用在beforeDestroy 中斷開設(shè)置為null

學(xué)會使用工具分析內(nèi)存泄漏的問題，https://webkit.org/downloads/

不要隨意的使用函數(shù)遞歸，縮短對象方法的執(zhí)行路徑（傳統(tǒng)JS領(lǐng)域的內(nèi)存管理最佳實踐也適用一部分）

由于界面的渲染需要依賴createInstance(id, code, config, data)，sendTasks(id, tasks)，receiveTasks(id, tasks)發(fā)送指令的方式進行通信，你應(yīng)該減少通信的次數(shù)，在更新界面時，合并不必要的通信指令的發(fā)送。

如果你使用vue-router的方式，盡量減少組件之間的共享。

由于weex的特殊性，它的轉(zhuǎn)場方式有幾種構(gòu)成。

weex to weex，如果你需要支持釘釘js-api，那么你應(yīng)該使用openLink。（如果是你自己實現(xiàn)，使用weex自帶的navigator模塊）

weex to h5 依然使用openLink，（如果是你自己實現(xiàn)，那么可以通過module的方式來打開一個WebViewController| UIWebView or WKWebView）

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

如果你使用vue-router，那么配置好你的路由path，使用push，go方法即可，唯一可惜的是使用vue-router的方式較為生硬。

頁面級別的數(shù)據(jù)傳輸基本很少會發(fā)生，釘釘?shù)拈_發(fā)者推薦統(tǒng)一使用domainStorage方案。

weex to weex 通過URL傳參數(shù)（攜帶的數(shù)據(jù)量有限），通過weex storage module

weex to h5，h5 to weex 通過URL傳參數(shù)

native to weex 通過alloc weex 容器中的option或者data傳入，前者可以在weex.config中獲取，后者可以在vm上下文中獲取

weex to native 定義一個跳轉(zhuǎn)native的module，使用native的屬性或者init時傳入

weex的調(diào)試工具需要額外安裝weex-toolkit，weex-devtool，以及在你的Native工程中集成對應(yīng)的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 掃碼（啟動成功后會彈出一個界面），然后將你的業(yè)務(wù)代碼貼到 這里，注意：

不允許出現(xiàn)import等導(dǎo)入模塊的語法

安裝了Weex Playground的設(shè)備和你的電腦必須在同一局域網(wǎng)內(nèi)

最后用安裝了Weex Playground的設(shè)備掃碼（業(yè)務(wù)代碼貼過去那里的右側(cè)會出現(xiàn)的二維碼）。

集成 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設(shè)置為YES。

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

希望大家可以用一個開放的心態(tài)來看待weex，它的設(shè)計，實現(xiàn)有很多是值得學(xué)習(xí)的地方，比如多framework支持，共享runtime，module，component，handler等等，非常的自由領(lǐng)域，相當(dāng)于它設(shè)計好了一個render engine，理論上你可以學(xué)習(xí)它的幾個關(guān)鍵接口，知道Native DOM指令后，也能開發(fā)出替代Vue的上層框架，不信？你看看Rax即明白了。

weex也有一些不足的地方，開發(fā)者數(shù)量少，社區(qū)活躍度不高，很多問題并不一定能被google搜錄到。文檔確實有一點不完善，native的實現(xiàn)也有一定的bug數(shù)量，你看react這么多年了，依然有bug，只要在逐步改進迭代修復(fù)，我覺得它就是非常棒的，萬事沒有十全十美，美中不足的一點瑕疵，說不定才是完美呢。