WEEX-EROS | 入門指南

與其一堆原理，倒不如先直接介紹 eros 到底能幹什麼？

eros 是基於 weex 的，他可以讓前端同學通過 vue 的語法和 api 來寫出 iOS/Android 的原生應用。

學習 weex 或者 eros 之前，請您一定要熟練使用 vue2 進行開發。

本文會通過 eros 由來，優缺點評估，開發現狀，環境搭建，除錯等方面來介紹 eros，並會在文章後半部分與開發者一起寫一個 Hello World，來更好的評估 eros。

體驗

iOS 端內建 DEMO	ios 版下載	android版下載

開發者可以掃描二維碼來下載 eros app 來進行體驗，iOS首次開啟App需要在 設定->通用->裝置管理信任開發證照。

eros 現狀

目前 eros 已有數十個 app 在開發中和上線的狀態，其中有正在開發中的國外應用 starLife（100+頁面），也有國內正在開發的蜂覓（60+ 頁面），還有已上線的應用都在 0-50+ 頁面不等，行業分佈於資訊，醫療，招商，購物，政府，辦公等。

而本木醫療（京醫通）技術團隊本身也基於 weex 開發了三個已上線的 app，均可在蘋果商店和應用寶下載：

健康首都（京醫通 app版，100+頁面，很多功能還未開放）
本木醫療助手（30+頁面）
本木醫生助理（20+頁面）

所以開發者大可放心，這不是一個 KPI 專案（公司沒有 KPI ），已基於 MIT 協議開源。

eros 是怎麼來的

我們需要先從 weex 說起，我們直接看原理圖：

weex 原理圖中分為了 Server 和 Client 兩部分。

Server

weex file: 就是我們的 .vue 檔案（或官方的 .we 檔案），和我們平時進行前端開發的一樣。

transformer: 以 vue 開發為例，在瀏覽器中我們通常都會寫 .vue 檔案和 es6 等瀏覽器目前並不支援的語法，通過前端資源打包工具 webpack 等通過 vue-loader、babel-loader等最終轉化成為 es5 程式碼，讓瀏覽器識別，而在 weex 最終編譯出來資原始檔能在瀏覽器跑，自然也是這個道理。

而瀏覽器端執行的 es5 程式碼是無法直接執行在客戶端的（如瀏覽器有 BOM，DOM，客戶端是沒有的），所以在通過 weex 來開發客戶端有很多限制的。

在編譯客戶端靜態資原始檔的時候，是通過 weex-loader 來載入這些經過限制語法編寫的 weex file，最終編譯成為能讓客戶端讀懂的 JS 檔案，也就是 JS Bundle。

有興趣的同學可以深入瞭解這部分內容。深入Weex中的transformer實現原理

所以這塊之所以叫 server，也就是這些靜態資原始檔可以在遠端伺服器打包生成，被客戶端訪問到並下載解析。

Client

引用 weex 官網上的話。

Weex 的 iOS 和 Android 客戶端中都會執行一個 JavaScript 引擎，來執行 JS bundle，同時向各端的渲染層傳送規範化的指令，排程客戶端的渲染和其它各種能力。我們在 iOS 下選擇了 JavaScriptCore 核心，而在 Android 下選擇了 UC 提供的 v8 核心。無論是從效能還是穩定性方面都提供了強有力的保障。

為了讓整個移動應用的資源利用得更好，我們在客戶端提供的 JavaScript 引擎是單例的，即所有 JS bundle 公用一個 JavaScript 核心例項，同時對每個 JS bundle 在執行時進行了上下文的隔離，使得每個 JS bundle 都能夠高效安全的工作。我們還把 Vue 2.0 這樣的 JS Framework 做了預置，開發者不必把 JS Framework 打包在每個 JS bundle 裡，從而大大減少了 JS bundle 的體積，也就進一步保障了頁面開啟的速度。

client 對於前端來說肯定是越瞭解會更好，不瞭解也沒關係，但 weex 有個功能是很重要的，那就是 weex 搭建起了一條 JS Bridge，通過客戶端自定義 module 和 component，讓前端與客戶端有了互動能力。

而自定義 module 和 component 需要一定的客戶端開發知識，讓很多前端開發的同學，望而卻步，又因為官方的環境搭建，腳手架打包等目前還存在一些問題，把很多想學習 weex 的同學攔在了外面，所以 eros 因應而生。

weex 官方文件

eros 介紹

eros 是基於 weex 封裝面向前端的 vue 寫法的解決方案，由於 app 開發的特殊性，eros 則更偏重關心於整個 app 專案，當熟練使用了 eros 之後，您能快速通過 vue 暴露出來的方法快速構建原生 app 應用。

eros 流程圖如下：

eros 能解決什麼

詳細的文件來解決環境搭建過程中的坑。
一套程式碼編譯成 ios，android 兩端原生應用。
封裝了大量 module，讓前端開發方便進行原生的操作。
提供 appboard 機制來減少包體積，並可以對其實時修改。
內建了一套完整的 widget ，可根據業務自行修改。
中介者模式來集中管理業務。
提供了伺服器端增量釋出更新邏輯。
腳手架可直接生成開發最新模板。
腳手架啟動服務進行實時開發效果檢視和 debug 除錯。
腳手架更新開發平臺所需 eros 依賴。
腳手架支援打對應平臺內建包。
腳手架支援生成全量包，增量包，並內建與更新伺服器互動邏輯。
腳手架支援同步更新模板內容。
腳手架支援 weex 的 vue 入口和 js 入口兩種開發方式。
支援 weex debug

eros 不能做什麼

eros 開發中也有很多限制，需要開發者自行斟酌。

weex 程式碼在瀏覽器端還有很多相容性問題，所有 eros 目前不支援瀏覽器端
eros 不能使用 weex 市場，如果您有原生開發經驗可以自行接入
由於 eros 對 JS Bundle 執行機制採用了 appboard 機制來減少了 js bundle 的大小，導致 weex debug 需要特定的處理。
由於目前開源的 weex ui 庫都並不支援 tree-shaking，官方引入的 webpack 也是 1.x.x 版本，eros 腳手架即便升級了 webpack，但並未配置 tree-shaking，所以目前引入程式碼的方式需要限制很多寫法來減少 JS Bundle 的體積，eros 後續會出對應的 UI元件庫來解決這些問題。
eros 打出來的包體積稍大，為解決這個問題，eros 客戶端動態載入依賴正在開發中。
如果遇到複雜的頁面，如 IM 之類的，eros 建議用原生實現，weex 應付此類需求還是比較吃力。

支援性

Android 4.1 (API 16)
iOS 8.0+
WebKit 534.30+

開始 eros

腳手架安裝:

$ npm i eros-cli -g
複製程式碼

如果你在中國地區，我們還是推薦您使用 cnpm 安裝腳手架

$ cnpm i eros-cli -g 
複製程式碼

如果安裝過程中報錯，是因為 eros-cli 依賴了 node-sass，解決的方式有很多，可以自行搜尋解決一下。

darwin 開發 iOS:

Xcode
CocoaPods
- 升級 Ruby 環境：$ sudo gem update --system
- 移除現有 Ruby 映象：$ gem sources --remove https://rubygems.org/
- 新增ruby-china映象：$ gem source -a https://gems.ruby-china.org/
- 安裝 CocoaPods：$ sudo gem install cocoapods
- 如果以上命令報錯則執行：$ sudo gem install -n /usr/local/bin cocoapods --pre
- 最後執行：$ pod setup 過程比較漫長，請耐心等待執行完成

darwin/windows/linux 開發 Android:

下載並安裝 JDK。
下載並安裝 Android Studio。

JDK 是 JAVA 開發包，AndroidStudio 是 Android開發IDE，這兩項不再做過多介紹。

如果您使用虛擬機器進行跨平臺開發，也需要配置好對應平臺的所需環境。

模擬器安裝

ios 開發中 xcode 已經自帶了模擬器。
android 開發者可以下載 Genymotion。

模板生成

首先通過腳手架自動生成開發模板(我們不推薦使用sudo來執行)。

$ eros init
複製程式碼

按提示選擇模板，填寫 app/專案名稱和版本後在當前路徑下會生成對應模板，然後 cd 到專案中。

2. 下載所需依賴下載前端依賴。

$ npm install 
複製程式碼

下載eros sdk 依賴。

$ eros install （由於部分庫和網路原因，會導致很慢）
複製程式碼

eros install （由於部分庫和網路原因，會導致很慢）會讓你選擇下載依賴：

ios: eros ios 開發所需依賴
android: eros android 開發所需依賴

每次 eros 解決了 bug 或者開發/更改了 module 和 component 時，只需要 eros install ，ios 更新前請關閉 xcode， android 會在編輯器 android studio 中彈出同步，點選即可。

eros install 是執行 iOS/Android 目錄中的 install.sh，所以 windows 系統下最好用 Git Bash 等工具，不然無法下載。

安裝完依賴之後:

iOS: 會自動開啟 Xcode ，然後選擇一個模擬器，點選左上角的播放(執行)按鈕，即可看到內建包中已經內建好的 eros demo.
Android:首次生成專案開發者需要多幾個步驟，之後每次 eros install 都會有同步提示:

點選AndroidStudio上方的 File--->New--->Import Project。
找到eros在你本地的地址，選擇 platforms/android/WeexFrameworkWrapper ,點選OK。
待專案構建完成，點選 AndroidStudio 上方工具欄的 Run ，即可執行專案。

注意：

第一次開啟 AndroidStuido 時，由於本地環境未配置好，AndroidStuido 會提示錯誤，按照 IDE 提示，大部分環境問題都可以解決。

於是 eros 的 demo 便能在模擬器中跑起來了。

eros 的 demo 很重要，建議在開發中，首先跟隨 demo 編寫幾個頁面，並保留其程式碼作為使用參考。

開發前

我們先來介紹 eros 開發中需要知道的點：

Server JS Bundle

本地開發的時候（執行腳手架 eros dev 指令），腳手架 eros-cli 會通過讀取配置檔案來在特定埠跑一個服務，讓你在本地訪問到專案中 dist 下通過 webpack 打包生成的 JS Bundle。

假如你配置的埠號是8899，在瀏覽器中輸入localhost:8899/dist 便可以看到打包生成的 JS Bundle。

而在不同除錯載體通過 localhost 訪問這些 JS Bundle 之前，都需要確保在同一區域網內，而在訪問的時候，情況是不同的：

載體	hosts 檔案	是否需要手動修改網路代理
iOS 模擬器	共享電腦 hosts 檔案	不需要
Android 模擬器	有	需要
iOS 真機	有	需要
Android 真機	有	需要

iOS 模擬器比較特殊，是因為 iOS 模擬器和 Mac 共用一套網路設定。

由此也能看出來，如果開發者需要進行兩個端的快速開發，直接用 iOS 模擬器開發即可，開發完成之後，在適配真機和 Android 端是最快的。

所以直接修改網路代理，指向本機的 IP 地址即可訪問到 JS Bundle，而我們一般為了代理軟體抓包時候看這更方便，會給個新的 host ：

127.0.0.1   app.weex-eros.com
複製程式碼

設定完了之後，在不同載體的瀏覽器中都能訪問 http://app.weex-eros.com/dist 下的 JS Bundle 了。

Client JS Bundle

上面介紹了通過服務來訪問 JS Bundle，那我們拔了真機拔了資料線，斷了網，沒了有 JS Bundle 來源，使用者開啟是一片空白怎麼辦？答案就是 app 內建中 JS Bundle，我們也叫這部分 JS Bundle 為內建包，這個過程叫打內建包。

Interceptor 攔截器

那麼又有問題來了，我們如何告訴 app 是訪問服務包還是內建包呢？答案是 Interceptor 開關。

Interceptor 選中的時候，我們會攔截請求，讓 app 讀取內建包;
Interceptor 未選中的時候，不攔截請求，讓 app 去配置的服務上去取服務包;

第一次跑起來 demo 的開發者可以看到，攔截器是開啟的，訪問的是內建包，app 上線，交付測試的時候，都是走內建包。

專案結構

下面列出了對於開發而言關心的專案結構：

.
├── config
│   ├── eros.dev.js                     // 腳手架配置檔案
│   └── eros.native.js                  // 客戶端配置檔案
├── platforms                           
│   ├── android                         // Android 平臺主專案和依賴
│   └── ios                             // iOS 平臺主專案和依賴
└── src
    ├── assets                          // 本地靜態資源存放，一般可存放圖片
    ├── iconfont                        // 本地 iconfont 存放
    ├── js
    │   ├── components                  // 元件，存放了經過修改的 weex-ui 和 bui
    │   ├── config                      // 專案開發配置
    │   │   ├── apis.js                 // 介面別名配置
    │   │   ├── index.js
    │   │   ├── pages.js                // 路由別名配置
    │   │   └── push.js                 // 個推事件處理
    │   ├── css                         // 可抽離公共 css 邏輯
    │   ├── mediator                    // 中介者
    │   ├── pages                       // 頁面開發，所有頁面都放置在這裡
    │   └── widget                      // widget 原始碼
    └── mock
        └── test                        // mock 服務，在 eros.dev.js 可進行配置
複製程式碼

有幾個需要注意的地方

eros.dev.js 中如果改變，這是如果你在跑著 eros dev 服務，需要斷開，讓腳手架重新讀取配置檔案。（開發中會經常新增新的打包入口）
eros.native.js 是客戶端讀取的配置檔案，目前是客戶端在開啟 app 的時候統一從內建包中讀取，所以當此檔案變動的時候，需要重新打內建包 eros pack，重新執行下 app，即可生效。

Hello Eros

我們來簡單開發一個 Hello World：

首先關閉除錯中的攔截器，讓 app 訪問服務包，這時候重新整理頁面肯定是空白的，因為都沒有服務。
專案根目錄下執行開發服務 eros dev，執行成功之後重新整理出現內建的 demo 頁面，這是其實你已經可以任意修改 pages/eros-demo 中程式碼，重新整理後看效果了，有興趣可以到處試一試。

tips: 雙擊除錯按鈕即可重新整理。

在 pages 目錄下新建一個 Hello.vue 檔案。
檔案中寫一些很簡單的語法：

<template>
    <div style="margin-top: 50px;">
        <text class="title">Hello，</text>
        <text class="title">developer</text>
        <bui-button class="btn-250" type="primary" value="show eros">show eros</bui-button>
    </div>
</template>
<script>
    import buiButton from 'Eros/bui/components/bui-button'
    export default {
        components: { buiButton }
    }
</script>
<style>
.title{
    font-size: 60;
}
.btn-250{
    width: 250;
}
</style>
複製程式碼

修改 eros.dev.js 中的 exports，如果不需要，可以把 eros-demo 中的路徑都刪掉，只填入新的檔案入口 :

"exports": [
    // appBoard 
    "js/config/index.js",
    // mediator
    "js/mediator/index.vue",
    // home
    "js/pages/Hello.vue"
],
複製程式碼

這裡注意上面兩個是和 eros.native.js 中的 appBoard，mediator 一一對應的，如果這裡兩邊修改沒有對應上會導致報錯，建議平時不用變動。 5. 告訴 app 我要重新改變首頁，修改 eros.native.js 中的 page.homePage 路徑：

"page": {
    "homePage": "/pages/Hello.js",
}
複製程式碼

斷開 eros dev 服務，因為要告訴腳手架配置檔案的變動。
eros pack 打內建包，因為要告訴 app 配置檔案中的變動。
重新執行（run）app。

這時首頁就已經開發好了：

下面我們修改做一個頁面間的跳轉，試一試 Widget: 9. 再在 pages目錄下新建一個頁面 Eros.vue

<template>
    <div style="margin-top: 50px;">
        <text class="title">Hi!</text>
        <text class="title">Enjoy it!</text>
    </div>
</template>
<script>
    export default {
    }
</script>
<style>
.title{
    font-size: 60;
}
</style>
複製程式碼

修改 eros.dev.js 告訴腳手架新增頁面了:

"exports": [
    // appBoard 
    "js/config/index.js",
    // mediator
    "js/mediator/index.vue",
    // home
    "js/pages/Hello.vue",
    // eros
    "js/pages/Eros.vue"
],
複製程式碼

註冊路由，修改 js/config/pages.js，清空 demo 中現有的配置:

export default {
    'Eros': {
        title: 'Eros',
        url: '/pages/Eros.js',
    },
}
複製程式碼

這裡的 url 是填寫 dist 目錄中打包出來 JS Bundle 的相對路徑（現在並沒有這個 JS Bundle，需要重啟開發服務讀取配置才會有），注意因為是 JS Bundle 所以以 .js 為結尾。 12. 重啟 eros dev，重新整理一下，並無任何變化，這時候還無法跳轉到新建的頁面，因為只是配置了路由，並未觸發跳轉方法，我們需要修改下 Hello.vue:

<template>
    <div style="margin-top: 50px;">
        <text class="title">Hello，</text>
        <text class="title">developer</text>
        <bui-button class="btn-250" type="primary" value="show eros" @click="showEros">show eros</bui-button>
    </div>
</template>
<script>
    import buiButton from 'Eros/bui/components/bui-button'
    export default {
        components: { buiButton },
        methods: {
            // 這裡給按鈕新增 showEros 事件來跳轉
            showEros() {
                this.$router.open({
                    name: 'Eros'
                })
            }
        }
    }
</script>
<style>
.title{
    font-size: 60;
}
.btn-250{
    width: 250;
}
</style>
複製程式碼

雙擊除錯按鈕重新整理，跳轉邏輯已經完成了！

至此 Hello world 已經編寫完成，可以便根據文件來編寫你的業務了。

eros 還有 demo 是根據網易嚴選 demo 進行改編的（感謝 zwwill 的開源和指導），開發者也可以進行參考：

最後開發者需要自行修改原生專案中的一些資訊，就可以發 app 正式版本，對外使用了，釋出的方法網上有很多介紹，就不過多贅述。

增量釋出

具體更新邏輯可以點選這裡，這裡寫下簡單的說明。

app 釋出有兩種情況：

當 platforms ios/android 目錄下的程式碼發生變動（包括 eros install 平臺的依賴）的時候，我們是需要重新發布到市場上重新走稽核邏輯的，使用者需要重新去市場上面下載。
而當專案中的業務邏輯發生變動，如新增頁面，修改當前頁面邏輯等，最終導致 JS Bundle 發生變化，便可以使用增量釋出，每次 app 啟動會自動檢測更新，下載 JS Bundle 中發生變動的部分，使用者重啟即生效。

同時 eros-cli 也支援生成全量包和生成增量包：

生成全量包：

$ eros build
複製程式碼

生成增量包：

$ eros build -d
複製程式碼

目前增量釋出的搭建還是比較麻煩，當開發者開發完 app 之後可以參考 eros-publish 來搭建增量釋出的服務，有經驗的同學也可以在釋出機上部署 eros-cli，來自行編寫釋出系統。

就如已有 eros 開發者基於 eros-publish 編寫了的自己增量釋出系統 lygtq-eros-publish，並開源，非常感謝 hodgevk 的貢獻。

總結

app 開發環境的配置總是漫長的，期間可能會遇到各種各樣的報錯，其實大部分同學儘量嘗試百度一下就能解決。

就如官方文件中所說，在熟悉了 eros 之後可以快速開發中小型 app 應用，但 eros 還有很多的不足，需要更多的人加入進來完善他，最終是想給 vue 開發者們另一個舞臺。