WEEX-EROS | 入門指南

時間 2019-11-15

標籤 weex eros 入門指南简体版

原文原文鏈接

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

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

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

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

體驗

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

開發者能夠掃描二維碼來下載 eros app 來進行體驗，iOS首次打開App須要在 設置->通用->設備管理信任開發證書。java

eros 現狀

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

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

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

因此開發者大可放心，這不是一個 KPI 項目（公司沒有 KPI ），已基於 MIT 協議開源。android

eros 是怎麼來的

咱們須要先從 weex 提及，咱們直接看原理圖： webpack

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

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 也支持生成全量包和生成增量包：

生成全量包：