Weex Eros快速入門

時間  2019-11-16
標籤 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開發移動應用須要具有如下軟件環境。vue

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

環境搭建

除了安裝一些必須的軟件（如Node、Git等）以外，Weex Eros還依賴於腳手架eros-cli。全局安裝命令以下：node

npm i eros-cli -g

若是是在國內，還可使用cnpm進行安裝，或者直接修改下載的鏡像地址，例如淘寶的鏡像源。android

cnpm i eros-cli -g        
//或者使用淘寶鏡像安裝
npm i -g cnpm --registry=https://registry.npm.taobao.org

同時，爲了方便對Weex Eros程序進行斷點調試，建議開發者安裝Weex官方提供的腳手架命令行工具weex-toolkit。webpack

cnpm i -g weex-toolkit

除此以外，爲了可以正常的運行Android、iOS應用程序，所以還須要安裝原生Android和iOS相關的運行環境。特別的，對於iOS來講，還須要安裝諸如ruby、rubygems和cocoapods等工具軟件。ios

工程建立

和使用weex cli建立工程相似，藉助eros-cli腳手架工具能夠很方便的建立Weex工程。例如：c++

eros init <工程名> <版本號> <模板> <Android包名>

使用eros init方式建立工程時，init後面依次跟的是項目名稱、版本號、模板類型和安卓包名，除了項目名稱外，其餘都不是必須的。須要說明的是，同一個Android手機上不能出現2個包名相同的應用，因此命名時請注意區分。git

在這裏插入圖片描述
而後進入工程目錄，執行cnpm i安裝node_modules依賴包，等待依賴包安裝完成，打開模板工程目錄結構。github

├── 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工程的依賴包。web

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入門

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程