Weex 探索系列（一）初識和環境搭建

Weex 是阿里巴巴 於今年6月份開源的一種跨平臺手機應用開發解決方案，只須要一次開發，便可部署在手機 HTML五、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複製代碼

編譯結束後，電腦上的默認瀏覽器會打開一個窗口展現運行結果，如圖：

Hello Weex On PC

同時在當前目錄下生成一個 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 Weex On Mobile

此時在 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 編輯器截圖以下，整個看上去清爽多了：

Sublime Syntax Highlight For Weex

學習資源

Weex 畢竟開源不久，除了公開的內測，目前尚未大面積推廣開來，不過已經在阿里系諸如手淘、天貓、蝦米音樂等應用中逐步使用。因爲被外界誤解爲阿里的又一個KPI項目（後續再也不維護），相對 RN，外界使用相對較少。不過，隨着時間的推移、阿里技術團隊的完善和社會技術圈兒的承認，Weex 將不失爲 RN 和 Ionic 以外 跨平臺應用的又一種出色的解決方案。

固然，現階段除了官方文檔，網上相關資料零零碎碎，可供系統性參考的系列文章不是不少，學習起來可能會經歷各類各樣的困難。這裏整理一些可供學習的資源，羅列以下：

• Weex On GitHub

• Weex Doc 英文版 & 中文版

• Weex 交流社區

• Weex Team On GitHub

最後

---

本文由 亦楓 創做並首發於 亦楓的我的博客 ，同步受權微信公衆號：技術鳥（NiaoTech）。

歡迎各類形式地交流與轉載，註明做者及出處便可。

本文標題爲: Android WebView —— Java 與 JavaScript 交互總結

本文連接爲：yifeng.studio/2016/12/01/…