Weex Eros快速入門

xiangzhihong發表於2018-12-01
ROS

概述

隨著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開發移動應用需要具備以下軟體環境。

  • Android 4.1 (API 16)
  • iOS 8.0+
  • WebKit 534.30+

環境搭建

除了安裝一些必須的軟體（如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/TabBar_Item1@2x.png',
                selectedIcon: 'bmlocal://assets/TabBar_Item1_Selected@2x.png',
                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即可開始斷點除錯。

未完待續！！！

附：weex-eros示例

weex-eros入門

相關文章