Weex Eros快速入門
隨著Weex跨平臺技術的持續火熱，一時間湧現出了一大批基於Weex的開源解決方案，Weex Eros就是這麼一個面向前端Vue的開源APP解決方案。 目前，如果直接使用Weex框架開發應用會存在很多痛點，諸如初始化啟動的環境問題、專案工程化問題、版本升級與版本相容問題和不支援增量更新等，而Weex Eros等開源解決方案能對上述問題進行有效的解決。 Weex Eros的定位不是元件庫，而是基於Weex封裝的面向前端Vue的一整套APP開源解決方案，它關心的是整個APP專案。在Weex的強大支援下，用一份Vue程式碼即可編譯出iOS、Android兩端原生的app，並且通過Weex Eros內建的熱更新邏輯和開源的伺服器邏輯，開發的APP還具有熱更新能力。
快速入門
工欲善其事，必先利其器。使用Weex Eros開發移動應用需要具備以下軟體環境。
環境搭建
除了安裝一些必須的軟體（如Node、Git等）之外，Weex Eros還依賴於腳手架eros-cli。全域性安裝命令如下：
npm i eros-cli -g 複製程式碼
如果是在國內，還可以使用cnpm進行安裝，或者直接修改下載的映象地址，例如淘寶的映象源。
cnpm i eros-cli -g //或者使用淘寶映象安裝 npm i -g cnpm --registry=https://registry.npm.taobao.org 複製程式碼
同時，為了方便對Weex Eros程式進行斷點除錯，建議開發者安裝Weex官方提供的腳手架命令列工具weex-toolkit。
cnpm i -g weex-toolkit 複製程式碼
除此之外，為了能夠正常的執行Android、iOS應用程式，因此還需要安裝原生Android和iOS相關的執行環境。特別的，對於iOS來說，還需要安裝諸如ruby、rubygems和cocoapods等工具軟體。
工程建立
和使用weex cli建立工程類似，藉助eros-cli腳手架工具可以很方便的建立Weex工程。例如：
eros init <工程名> <版本號> <模板> <Android包名> 複製程式碼
使用eros init方式建立工程時，init後面依次跟的是專案名稱、版本號、模板型別和安卓包名，除了專案名稱外，其他都不是必須的。需要說明的是，同一個Android手機上不能出現2個包名相同的應用，所以命名時請注意區分。
然後進入工程目錄，執行cnpm i安裝node_modules依賴包，等待依賴包安裝完成，開啟模板工程目錄結構。
├── config │├── eros.dev.js//腳手架相關配置 │└── eros.native.js//客戶端相關配置 ├── dist//靜態資源生成目錄 ├── node_modules//依賴 ├── scripts//自動化指令碼 ├── platforms//平臺基礎程式碼 │├── android │└── ios ├── src//開發路徑 │├── assets//靜態資源路徑 一般存放圖片 │├── iconfont//靜態資源路徑 一般存放 iconfont │├── js// js bundle 開發路徑 │└── mock//本地請求 mock 地址 ├── CHANGELOG.md//版本升級變動 └── package.json//npm專案及依賴說明 複製程式碼
執行專案
使用eros init方式建立的專案，模板會預設生成Android、iOS原生工程結構。啟動客戶端之前，需要先使用eros dev指令啟動服務端服務，啟動過程中如出現任何的報錯，請先按照錯誤提示解決報錯問題。 執行iOS專案前，需要cd到iOS工程目錄的platforms/ios/WeexEros中執行pod update命令來拉取iOS工程的依賴包。
pod update 複製程式碼
命令執行完畢後，使用Xcode開啟工程目錄下WeexEros.xcworkspace檔案即可開啟iOS工程。
需要說明的是，最新版本的Xcode在匯入iOS工程時會報錯，如library not found for -lstdc++.6.0.9，請根據實際情況解決這些錯誤。然後，在Xcode中選擇相應的模擬器，點選執行按鈕即可啟動iOS工程，執行效果如圖8-4所示。 對於Android環境來說，使用Android Studio依次選擇【File】→【New】→【Import Project】，找到eros工程目錄，然後依次選擇【platforms】→【android】→【WeexFrameworkWrapper】，點選【ok】按鈕即可匯入Android工程，如圖8-3所示。
接下來，開啟WeexFrameworkWrapper工程並執行工程下的install.sh腳步來安裝Android工程所需要的依賴包nexus和wxframework。待Android工程構建完成，點選Android Studio工具欄上的【Run】按鈕即可執行專案，執行效果如圖8-4所示。
本地開發的時候，可以執行腳手架eros dev指令來啟動本地服務，腳手架eros-cli會通過讀取配置檔案在特定埠啟動服務，而客戶端訪問的就是工程目錄下dist檔案通過webpack打包生成的JS Bundle檔案。 而生產環境客戶端執行的版本一般都會內建一個JS Bundle檔案，這樣即使斷網也不會出現頁面空白的情況，而是讀取本地內建包的內建資料。 Weex eros內建了攔截器開關，攔截器的主要作用就是控制載入js檔案的方式。當攔截器處於開啟狀態時，會從當前工程內建的資源中載入js資原始檔，否則從開發伺服器上載入js資原始檔。可以通過Interceptor開關來配置訪問的是伺服器開發包還是內建包，如圖8-5所示。
Hello eros
新建一個Eros專案時，系統預設是開啟Interceptor攔截器的，如果關閉除錯中的攔截器，再讓app訪問服務包將會出現白屏。為了更好的理解Eros的載入流程，下面通過一個Hello Eros例項來說明。 首先，關閉除錯攔截器，然後使用WebStrom開啟Eros工程，並在pages目錄下新建一個Hello.vue檔案。
<template>
<div style="margin-top: 50px;">
<text class="title">Hello，</text>
<text class="title">developer</text>
<wxc-button class="btn-250" text="show eros" ></wxc-button>
</div>
</template>
<script>
import { WxcButton } from 'weex-ui';
export default {
components: { WxcButton }
}
</script>
<style>
.title{
font-size: 60;
}
.btn-250{
width: 250;
}
</style>
複製程式碼
修改eros.dev.js配置檔案中的exports，如果不需要可以把eros-demo中對應的路徑都刪掉，只配置需要的檔案入口。
"exports": [ "js/config/index.js", "js/mediator/index.vue", "js/pages/Hello.vue"//匯出Hello.vue ], 複製程式碼
需要注意的是，eros.dev.js檔案中的appBoard、mediator和eros.native.js是一一對應的，如果兩邊修改沒有對應上會導致報錯，建議不要隨便變動。 要改變eros工程的首頁，需要修改eros.native.js檔案中的page.homePage路徑。
"page": {
"homePage": "/pages/Hello.js",
}
複製程式碼
斷開eros dev服務並重啟服務，然後重新執行app即可看到示例效果，如圖8-6所示。
很多時候，app會預設使用本地內建的JS bundle而不是從服務端下載。為了將編寫好的程式碼打包成JS bundle，需要使用eros pack指令。
eros pack 複製程式碼
eros pack打包指令提供了eros pack ios、eros pack android、eros pack all三個指令來為不同的平臺進行打包操作，如圖8-7所示。
然後，將打好的JS bundle包內建到Android的assets或iOS的工程目錄下即可。然後，關閉除錯攔截器，本地執行的即是內建的bundle包。
工程配置
在eros專案中，整個專案只有兩個配置檔案，都放在專案的config資料夾下，分別是eros.native.js和eros.dev.js。其中，eros.native.js表示客戶端需要讀取的配置資訊，eros.dev.js表示開發環境需要讀取的配置資訊，該配置檔案主要用來配置開發、除錯、語法檢測、mock、生成增量包和全量包等功能。 eros.native.js檔案表示客戶端需要讀取的配置資訊，eros.native.js檔案的每次變動，都需要重新執行命令eros dev並重新執行app。例如：
{
appName: "eros-demo",//工程名稱
appBoard: "/config/index.js",
androidIsListenHomeBack: "true",//監聽Android物理返回鍵
customBundleUpdate: 'true',//配置更新jsbundle邏輯
version: {
android: "1.0.0",//Android版本號
iOS: "1.0.0"//iOS版本號
},
page: {
homePage: "/pages/eros-demos/index.js",//主頁地址
mediatorPage: "/mediator/index.js",//中介頁面地址
navBarColor: "#3385ff"，
navItemColor:"#ffffff"
},
url: {
image: "https://app.weex-eros.com/xxx/xxx",//圖片上傳路徑
bundleUpdate: "http://localhosts:3001/app/check"//jsBundle更新介面
},
zipFolder: {
server: "home/app",//增量釋出差分包地址
iOS: "/ios/WeexEros/WeexEros",//iOS本地包地址
android: "/android/WeexFrameworkWrapper/app/src/main/assets"
},
getui: {
enabled: "false",//是否開啟個推服務
appId: "",
appKey: "",
appSecret: ""
},
tabBar: {
color: '#777777',
selectedColor: '#00b4cb',
backgroundColor: '#fafafa',
borderColor: '#dfe1eb',
list: [{
pagePath: '/pages/demo/router/tabbarItem1.js',
text: '首頁',
icon: 'bmlocal://assets/[email protected]',
selectedIcon: 'bmlocal://assets/[email protected]',
navShow: 'true',
navTitle: "首頁"
},
//省略其他配置
]
}
}
複製程式碼
如上，是一個典型的eros.native.js檔案的配置資訊，具體說明如下：
- appName：表示腳手架自動生成app的名稱。
- version：表示腳手架自動生成的工程版本號，包含iOS和Android兩個子版本號，可用於增量釋出時的版本判斷。
- androidIsListenHomeBac：用於配置Android平臺是否需要監聽首頁的物理返回鍵。
- customBundleUpdate: 用於配置是否自定義更新jsbundle邏輯，預設為true，即不使用更新邏輯。
- page：用於配置與頁面相關的內容，包含navBarColor、navBarColor、mediatorPage和navItemColor等子配置項。其中，homePage表示主頁js的相對地址，mediatorPage表示中介者頁面的相對地址。
- url：配置與路徑相關的內容，包含jsServer、image和bundleUpdate等子配置項。其中，jsServer用於配置本地js服務路徑，image用於配置圖片上傳的絕對路徑，bundleUpdate用於配置jsBundle更新介面。
- zipFolder：用於配置內建包的存放地址，包含server、iOS和android等子配置項。其中，server表示部署在伺服器上做增量釋出的差分包地址，iOS表示iOS平臺內建包地址，android表示Android平臺內建包地址。
- getui：基於個推的推送服務實現配置，包含enabled、appId、appKey和appSecret子配置項。
除了上面的配置外，eros.native.js檔案還有一個比較重要的配置tabBar，此配置選項用於配置原生tabBar的相關內容。如果您的app被設計成多tab的樣式，那麼tabBar配置將變得非常有用。 同eros.native.js配置檔案一樣，eros專案的另一個配置檔案eros.dev.js也非常重要，此配置檔案主要用來讓開發者在開發環境，對開發、除錯、語法檢測、mock、生成增量包和全量包等進行配置。例如：
{
exports: [//暴露的js頁面檔案
"js/service/bus.js",
"js/pages/home/index.js",
"js/pages/demo/index.js",
"js/pages/home/tab1/index.js",
"js/pages/home/tab2/index.js",
],
alias: {//檔案別名
"Components": "js/components",
"Common": "js/common",
"Config": "js/config",
"Widget": "js/widget",
"Pages": "js/pages",
"Utils": "js/utils"
},
eslint: false,// eslint檢查配置
server: {//服務的路徑和埠配置
"path": "./",
"port": 8889
},
diff: {
"pwd": "/Users/yangmingzhe/Work/opensource/eros-diff-folder",
"proxy": "https://app.weex-eros.com/source"
},
proxy: [{//代理配置
"route": "/test",
"target": "127.0.0.1:52077/test"
}],
mockServer: {
"port": 52077,
"mockDir": "./dist/mock"
},
socketServer: {
"switch": true,
"port": 8890
}
}
複製程式碼
如上，是一個典型的eros.native.js檔案的配置資訊，具體說明如下：
- exports：暴露出的頁面對應的js地址，app中的每個頁面本質上都對應一個js檔案。
- alias：資料夾別名，用於更方便快速的訪問。
- eslint：專案編譯時是否需要進行eslint檢查。
- server：執行eros dev服務的路徑和埠配置，使用預設即可。
- proxy：代理相關的配置，使用預設即可，此配置會把/test路徑對應的請求代理到127.0.0.1:52077/test。
- mockServer：本地mock資料服務。
- socketServer：用於配置熱更新服務開關和埠。
開發除錯
在根目錄執行eros dev指令時，腳手架會在工程的根目錄下生成dist檔案用於存放JS Bundle。 對於本地開發環境來說，eros是預設開啟除錯功能的。如果要關閉debug功能，可以依次點選【Debug】→【Setting】→【Interceptor】來關閉攔截器，然後點選【Refresh】按鈕或者雙擊螢幕上【Debug】按鈕重新整理頁面，此時就會重新從伺服器載入最新的 js檔案。 同時，eros還支援熱重新整理功能，即修改程式碼儲存(快捷鍵command + s)時頁面會自動重新整理，可以通過Setting面板的HotRefresh開關按鈕來開啟熱重新整理，如圖8-8所示。同時，熱重新整理只有在eros dev服務已經啟動，攔截器關閉的情況下才會生效。
如果要在真機上進行斷點除錯，需要重複上面的除錯步驟。然後執行命令weex debug，執行完畢後系統會自動喚起Chrome瀏覽器開啟除錯主頁，並展示出除錯的二維碼。 在App中點選除錯按鈕在彈出框中點選除錯選項，並使用腳手架工具提供的掃一掃功能掃描除錯的二維碼，然後選擇Debugger即可開始斷點除錯。
未完待續！！！
附： ofollow,noindex">weex-eros示例