前言

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

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

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

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

正文

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

先看下weex的實現(xiàn)原理圖：

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

Server

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

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

Client

引用 weex 官網(wǎng)上的話。

Weex 的 iOS 和 Android 客戶端中都會運行一個 JavaScript 引擎，來執(zhí)行 JS bundle，同時向各端的渲染層發(fā)送規(guī)范化的指令，調(diào)度客戶端的渲染和其它各種能力。我們在 iOS 下選擇了 JavaScriptCore 內(nèi)核，而在 Android 下選擇了 UC 提供的 v8 內(nèi)核。無論是從性能還是穩(wěn)定性方面都提供了強有力的保障。

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

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

eros流程圖：

eros 能解決什么

• 詳細(xì)的文檔來解決環(huán)境搭建過程中的坑。

• 一套代碼編譯成 ios，android 兩端原生應(yīng)用。

• 封裝了大量 module，讓前端開發(fā)方便進(jìn)行原生的操作。

• 提供 appboard 機制來減少包體積，并可以對其實時修改。

• 內(nèi)置了一套完整的 widget ，可根據(jù)業(yè)務(wù)自行修改。

• 中介者模式來集中管理業(yè)務(wù)。

• 提供了服務(wù)器端增量發(fā)布更新邏輯。

• 腳手架可直接生成開發(fā)最新模板。

• 腳手架啟動服務(wù)進(jìn)行實時開發(fā)效果查看和 debug 調(diào)試。

• 腳手架更新開發(fā)平臺所需 eros 依賴。

• 腳手架支持打?qū)?yīng)平臺內(nèi)置包。

• 腳手架支持生成全量包，增量包，并內(nèi)置與更新服務(wù)器交互邏輯。

• 腳手架支持同步更新模板內(nèi)容。

• 腳手架支持 weex 的 vue 入口和 js 入口兩種開發(fā)方式。

• 支持 weex debug

eros 不能做什么

• eros 開發(fā)中也有很多限制，需要開發(fā)者自行斟酌。

• weex 代碼在瀏覽器端還有很多兼容性問題，所有 eros 目前不支持瀏覽器端。

• eros 不能使用 weex 市場，如果您有原生開發(fā)經(jīng)驗可以自行接入。

• 由于 eros 對 JS Bundle 運行機制采用了 appboard 機制來減少了 js bundle 的大小，導(dǎo)致 weex debug 需要特定的處理。

• 由于目前開源的 weex ui 庫都并不支持 tree-shaking ，官方引入的 webpack 也是 1.x.x 版本，eros 腳手架即便升級了 webpack，但并未配置 tree-shaking，所以目前引入代碼的方式需要限制很多寫法來減少 JS Bundle 的體積，eros 后續(xù)會出對應(yīng)的 UI組件庫 來解決這些問題。

• eros 打出來的包體積稍大，為解決這個問題，eros 客戶端動態(tài)加載依賴正在開發(fā)中。

• 如果遇到復(fù)雜的頁面，如 IM 之類的，eros 建議用原生實現(xiàn)，weex 應(yīng)付此類需求還是比較吃力。

eros 現(xiàn)狀

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

而本木醫(yī)療（京醫(yī)通）技術(shù)團(tuán)隊本身也基于 weex 開發(fā)了三個已上線的 app，均可在蘋果商店和應(yīng)用寶下載：

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

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

支持性

Android 4.1 (API 16)

iOS 8.0+

WebKit 534.30+

結(jié)語

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

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

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

轉(zhuǎn)載于:https://www.cnblogs.com/adoctors/p/8391259.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。