Weex 是阿里巴巴 於今年6月份開源的一種跨平臺手機應用開發解決方案，只需要一次開發，即可部署在手機 HTML5、Android、iOS 三大平臺上。可以採取部分或者全部整合的方式嵌入到原生 Android 和 iOS 應用當中，並且達到 Native App 的體驗效果。
Weex 可謂是站在 RN（React Native）的肩膀上借鑑了很多跨平臺應用的開發經驗，但卻又與 RN 不同，在各自 DSL（領域特定語言）上，相比基於 React 框架的 RN ，基於 vue.js 框架的 Weex ，在程式語言上更接近於常見的 Web 開發方式。更多細節區別，可參考「大頭鬼」總結的一篇文章：Weex & RecatNative 對比。
環境搭建
Weex 是使用 Node.js 開發構建的，所以需要我們的電腦上安裝有 Node.js。然後在終端上執行如下命令，即可安裝 Weex Toolkit ：
npm install -g weex-toolkit複製程式碼安裝結束後，可使用 weex --verison 檢驗安裝結果並檢視 weex 版本。也可以使用 weex --help 檢視 weex 命令的所有用法。
初次體驗
新建一個文字檔案（位置隨意），命名為 hello.we （.we 是 weex 原始碼的檔案格式），並將如下內容複製到該檔案中：
<template>
<div class="container">
<div class="cell">
<image class="thumb" src="http://t.cn/RGE3AJt"></image>
<text class="title">Hello Weex</text>
</div>
</div>
</template>
<style>
.cell { margin-top: 10; margin-left: 10; flex-direction: row; }
.thumb { width: 200; height: 200; }
.title { text-align: center; flex: 1; color: grey; font-size: 50; }
</style>複製程式碼開啟終端工具，cd 到 hello.we 所在的目錄下，執行如下命令，進行原始碼編譯：
weex hello.we複製程式碼編譯結束後，電腦上的預設瀏覽器會開啟一個視窗展示執行結果，如圖：
同時在當前目錄下生成一個 weex_temp 資料夾，裡面是 H5 顯示所需要的一些原始檔。其中，與 hello.we 檔案對應的有一個 hello.js，這種 與 .we 檔案一一對應的 .js 的檔案也是 Android 和 iOS 工程整合 Weex 時所要用到的檔案，我們後續寫到 Android 整合時再講具體怎麼用。
除了 PC 瀏覽器，當然還可以在手機端實現實時預覽。前提是需要手機下載安裝 Weex Playground App ，並與 PC 保持在同一個區域網內。退出上面的服務（ Mac 下使用 Ctrl + C 快捷鍵組合），執行命令：
weex hello.we --qr複製程式碼終端中會顯示一個二維碼，開啟手機上的 Playground 應用，點選右上角的掃描按鈕，掃描這個二維碼，即可展示 hello.we 的執行結果，如圖：
此時在 hello.we 檔案中的任何修改，儲存之後都會立即反映在手機端的顯示上，無需重新編譯。
語法高亮
由於 weex 原始碼的檔案格式為 .we 格式，預設在文字編輯器中不支援語法高亮，程式碼看起來很不舒服。不過可以使用 vue.js 的語法高亮來支援 .we 檔案的編輯，分別參考 for vim、for Sublime、for ATOM 。這裡額外介紹 Sublime 的另外一種處理方式。
第一步，製作 Weex 語法高亮指令碼：開啟 Sublime Text，依次點選 Tools -> Developer -> New Syntax，新建一個語法檔案，開啟 gist 連結 Plain we.sublime-syntax，複製內容到剛才新建的語法檔案中，並儲存，檔名和副檔名為 Plain we.sublime-syntax 。
第二步，開啟 weex 語法高亮支援：依次點選 View -> Syntax，選中 We Component 即可。支援 Weex 檔案語法高亮的 Sublime Text 編輯器截圖如下，整個看上去清爽多了：
學習資源
Weex 畢竟開源不久，除了公開的內測，目前還沒有大面積推廣開來，不過已經在阿里系諸如手淘、天貓、蝦米音樂等應用中逐步使用。由於被外界誤解為阿里的又一個KPI專案（後續不再維護），相對 RN，外界使用相對較少。不過，隨著時間的推移、阿里技術團隊的完善和社會技術圈兒的認可，Weex 將不失為 RN 和 Ionic 之外 跨平臺應用的又一種出色的解決方案。
當然，現階段除了官方文件，網上相關資料零零碎碎，可供系統性參考的系列文章不是很多，學習起來可能會經歷各種各樣的困難。這裡整理一些可供學習的資源，羅列如下：
最後
本文由 亦楓 創作並首發於 亦楓的個人部落格 ，同步授權微信公眾號：技術鳥（NiaoTech）。
歡迎各種形式地交流與轉載，註明作者及出處即可。
本文標題為: Android WebView —— Java 與 JavaScript 互動總結
本文連結為：yifeng.studio/2016/12/01/…
