攻克weex - eros之搭建環境（part1）

PS：最近公司在寫ios app，使用了這個架構搭建，好多好多的坑的說，弄得身心疲憊，到處找資源，找度娘，真的挺心累的，因為公司項目是個測試項目。有頁面編寫和數據加載這方面的內容，就我現在的了解程度，來做個簡單的總結，友善自己以後查閱。

第一步就是跟著這個教程安裝環境和目錄，環境真心不好配，我們公司也建了很久。

weex學院網址：https://www.weexdaxue.com/article/24

eros官網：https://bmfe.github.io/eros-docs/#/

weex官網：https://weex.apache.org/zh/

weex-ui官網：https://alibaba.github.io/weex-ui/#/（這個是可以套用在eros裡面的一個ui架構）

下面教程是截取weex學院的內容

WEEX-EROS 解決方案

• weex
• vue
• ios
• Android

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

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

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

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

• vue 官方文檔
• eros 文檔(求 star )

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

體驗

• iOS 下載下傳連結
• Android 下載下傳連結

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

eros 現狀

目前 eros 已有數十個 app 在開發中和上線的狀态其中有正在開發中的國外應用 starLife100+頁面也有國内正在開發的蜂覓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 代碼是無法直接運作在用戶端的如浏覽器有 BOMDOM用戶端是沒有的是以在通過 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 能解決什麼

• 詳細的文檔來解決環境搭建過程中的坑。
• 一套代碼編譯成 iosandroid 兩端原生應用。
• 封裝了大量 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。

模闆生成

1. 首先通過腳手架自動生成開發模闆(我們不推薦使用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 等工具不然無法下載下傳。

1. 安裝完依賴之後:

• iOS: 會自動打開 Xcode 然後選擇一個模拟器點選左上角的播放(運作)按鈕即可看到内置包中已經内置好的 eros demo.
• Android:首次生成項目開發者需要多幾個步驟之後每次 eros install 都會有同步提示:

1. 點選AndroidStudio上方的 File--->New--->Import Project。

   

2. 找到eros在你本地的位址選擇 platforms/android/WeexFrameworkWrapper ,點選OK。

   

3. 待項目建構完成點選 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 之前都需要確定在同一區域網路内而在通路的時候情況是不同的

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

1. 首先關閉調試中的攔截器讓 app 通路服務包這時候重新整理頁面肯定是空白的因為都沒有服務。
2. 項目根目錄下運作開發服務 eros dev運作成功之後重新整理出現内置的 demo 頁面這是其實你已經可以任意修改 pages/eros-demo 中代碼重新整理後看效果了有興趣可以到處試一試。

tips: 輕按兩下調試按鈕即可重新整理。

1. 在 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>
           

1. 修改 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 中的 appBoardmediator 一一對應的如果這裡兩邊修改沒有對應上會導緻報錯建議平時不用變動。 5. 告訴 app 我要重新改變首頁修改 eros.native.js 中的 page.homePage 路徑

"page": {
    "homePage": "/pages/Hello.js",
}
           

1. 斷開 eros dev 服務因為要告訴腳手架配置檔案的變動。
2. eros pack 打内置包因為要告訴 app 配置檔案中的變動。
3. 重新運作runapp。

這時首頁就已經開發好了

下面我們修改做一個頁面間的跳轉試一試 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>
           

1. 修改 eros.dev.js 告訴腳手架添加頁面了:

"exports": [
    // appBoard 
    "js/config/index.js",
    // mediator
    "js/mediator/index.vue",
    // home
    "js/pages/Hello.vue",
    // eros
    "js/pages/Eros.vue"
],
           

1. 注冊路由修改 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>
           

1. 輕按兩下調試按鈕重新整理跳轉邏輯已經完成了

   

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

• eros 模闆位址
• eros 文檔位址

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

• eros 網易嚴選 demo
• weex-book

最後開發者需要自行修改原生項目中的一些資訊就可以發 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 開發者們另一個舞台。