前言

如果想用前端的方式寫一個app怎么辦呢？

如果你用的是 React，那么它已經有了一個比較完善的體系跟社區。如果你用的是Vue又不想花費太多時間去重新學習React，那么目前比較靠譜的方案就是weex了，但是其官方文檔寫的并不友好，更新也不給力。

在實際操作中對前端也并不友好，它需要一些 Android 的知識，跟一些前端比較陌生的環境跟方式去開發，這使得一些人在嘗試之后便轉向了RN的懷抱。

所以今天就來安利一個基于weex二次封裝的框架---eros;

正文

eros 是基于 weex 封裝面向前端的 vue 寫法的解決方案，由于 app 開發的特殊性，eros 則更偏重關心于整個 app 項目。

先看下weex的實現原理圖：

其中主要分為兩部分 Server 和 Client ；

Server

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

JS Bundle:在編譯客戶端靜態資源文件的時候，是通過 weex-loader 來加載這些經過限制語法編寫的 weex file，最終編譯成為能讓客戶端讀懂的 JS 文件。

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 ，讓前端與客戶端有了交互能力。

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 應付此類需求還是比較吃力。

eros 現狀

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

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

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

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

支持性

Android 4.1 (API 16)

iOS 8.0+

WebKit 534.30+

結語

目前eros可以滿足我們基本的開發需求，但還有很多不足，網上并沒有太多的關于weex跟eros的資料，遇到困難也相對不好解決，寫這篇文章是想去傳播一下這個正在發展中的項目，希望能夠幫助到一些人，也希望更多的人了解并參與進來逐步去完善這個體系，最終給vue開發者們一個更大的舞臺。

以上只是對eros的簡單介紹，還有不少遺漏。了解更多eros信息請移步官方文檔 ->

地址：https://github.com/bmfe/eros-template

轉載于:https://www.cnblogs.com/adoctors/p/8391259.html

總結

以上是生活随笔為你收集整理的weex前端式写法解决方案---eros的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。