WEEX-EROS | 移植自網易嚴選 app demo

連接

• 項目地址
• eros

前言

本項目是根據 yanxuan-weex-demo，在其基礎上使用eros編寫完成，在此感謝yanxuan項目做者zwwill的支持。

demo效果：

環境

根據 eros 文檔配置好所需的全部環境。文檔地址

運行

$ eros install
複製代碼

eros install 安裝完項目後 ios 端的 xcode 會自動打開，安卓導入 platforms/android/WeexFrameworkWrapper 項目後運行。

一開始默認的 demo 走的是本地內置包的項目，如何開發呢？

開發

$ eros dev
複製代碼

模擬器開發

運行了 eros dev 以後，在app中經過【調試-設置項】，關閉interceptor,，ios刷新頁面， android 重進app 既能夠開始開發了，您能夠隨意更改內容，而後雙擊刷新按鈕快速刷新。

真機調試

須要藉助 clarles 或 fidder 等代理軟件來幫助咱們進行真機調試。具體文檔

項目結構

在src/js/pages文件夾下新建咱們的yanxuanDemo文件夾，全部關於此項目的代碼，都將放在這裏。

結構以下：

|-- yanxuanDemo         
  |-- common         （公共組件）
  |-- class          （模塊-分類）
  |-- home           （模塊-首頁）
  |-- my             （模塊-我的）
    |-- config.js  
    |-- index.scss 
    |-- index.vue  
  |-- shop           （模塊-購物車）
  |-- topic          （模塊-專題）
  |-- utils          （工具庫）
  |-- config.js      （公共配置文件）
  |-- index.vue    
複製代碼

每一個模塊文件夾下都有相似my文件夾下的config.js、index.scss、index.vue等文件。config.js主要寫配置信息以及接口的調用方法（固然，若是項目比較複雜龐大，你也能夠將配置信息和接口分開來寫）。

配置信息

編寫好咱們的項目後，須要在整個項目的config文件夾下找到eros.dev.js和eros.native.js。

每一個模塊的入口文件，也就是打包的地址，都須要在eros.dev.js中配置：

"exports": [
    // appBoard 
    "js/config/index.js",
    // mediator
    "js/mediator/index.vue",
    // home
    "js/pages/yanxuanDemo/index.vue",
    "js/pages/yanxuanDemo/home/index.vue",
    "js/pages/yanxuanDemo/topic/index.vue",
    "js/pages/yanxuanDemo/class/index.vue",
    "js/pages/yanxuanDemo/shop/index.vue",
    "js/pages/yanxuanDemo/my/index.vue"
]
複製代碼

在eros.native.js中配置項目的落地頁地址：

"page": {
        "homePage": "/pages/yanxuanDemo/index.js"
}
複製代碼

從新打包（eros pack）並啓動一下服務（eros dev），看看是否是能夠看到咱們的demo了。

這裏有一個地方須要注意，若是修改了eros.dev.js，都須要從新啓動服務（eros dev）；若是修改了eros.native.js，則須要從新打包到app(eros pack)，詳細描述能夠查看weex-eros使用手冊

實現tab效果

目前weex官方沒有提供tab組件，咱們暫時找到了一種替代方案，能夠知足部分tab交互的需求。

這裏說一下大致思路。模塊分爲兩部分，tabs和存放tab對應內容的panel。

panel其實是一個scroller，在scroller上設置屬性paging-enabled="true"，這是咱們weex-eros的屬性，用來監聽滑動事件。

在scroller中有一個個的div，在div上設置ref="page_xxx",xxx爲0，1，2，3,分別對應每個tab。

在scroller上設置scroll事件，scroll事件中能夠獲取到滑動的偏移量（contentOffset.x）。

因爲weex默認屏幕的寬度是750，當發現滑動的偏移量爲750的整倍數時，咱們就認爲切換tab了。具體對應第幾個tab，就看是750的多少倍。

這時將tabs中對應的選中樣式修改，完成滑動內容修改tab的交互。

tabs你們能夠本身定義樣式，可是在每個tab上，都須要設置click事件，用來告訴咱們是點擊的哪個tab。

點擊tab切換panel中對應內容時，能夠用

dom.scrollToElement(this.$refs[`page_${index}`][0], { animated: false })
複製代碼

這樣點擊tab，panel中的內容就修改了。

這裏有一個問題須要注意，必須設置animated: false。若是不設置的話，dom.scrollToElement默認會有動畫效果，會觸發scroller上的scroll事件,而scroll中也會影響tab,形成交互錯亂。

具體的實現能夠參考src/pages/yanxuanDemo/class/index.vue，或者封裝的組件src/js/components/topTab，組件調用在src/js/pages/news中，僅供參考。

這個解決方案目前有一個問題，就是你必須知道切換一屏的距離，例如本例中左右切換是750。在不知道一屏的距離時，便無法計算對應哪個tab，這是這個方案目前的缺點。

尤爲是實現上下切換時，因爲滑動的高度不必定是固定值，不少時候會根據屏幕大小變化，因此還須要你們本身手動計算高度。

使用mock調試

爲了方便初次使用的同窗能儘快看到效果，因此對動態數據進行了本地寫死操做。

可是真實的場景是，這些數據都是從後端拿到的。因此咱們須要本地mock數據，在接口還不能使用的狀況下，不影響咱們前端的進度。

在mock/test文件夾下，建立yanxuan文件夾，全部關於此項目的mock數據，都寫在這裏。

爲了便於區分，咱們能夠根據模塊再詳細分組。例如，將home模塊的全部數據，放在home文件夾下。

新增getYXBanners.js，數據以下:

module.exports = [{
    "delay": 500,
    "response": {
        "resCode": 0,
        "msg": null,
        "data": [
            { title: '', src: 'http://yanxuan.nosdn.127.net/630439320dae9f1ce3afef3c39721383.jpg' },
            { title: '', src: 'http://yanxuan.nosdn.127.net/5100f0176e27a167cc2aea08b1bd11d8.jpg' },
            { title: '', src: 'http://doc.zwwill.com/yanxuan/imgs/banner-1.jpg' },
            { title: '', src: 'http://doc.zwwill.com/yanxuan/imgs/banner-2.jpg' },
            { title: '', src: 'http://doc.zwwill.com/yanxuan/imgs/banner-4.jpg' },
            { title: '', src: 'http://doc.zwwill.com/yanxuan/imgs/banner-5.jpg' },
            { title: '', src: 'http://doc.zwwill.com/yanxuan/imgs/banner-6.jpg' }
        ]
    }
}]
複製代碼

在src/js/config/apis.js中，增長內容：

// 配置請求的別名
export const apis = {
    // home
    'yanxuan_home_getYXBanners': '/test/yanxuan/home/getYXBanners',
}
複製代碼

在咱們須要獲取數據的地方，增長獲取數據的方法：

this.$fetch({
    method: 'GET',
    name: 'yanxuan_home_getYXBanners',
    data: {}
}).then(resData => {
    this.YXBanners = resData.data
}, error => {

})
複製代碼

這樣，即可以經過別名調用咱們的mock地址，當後端接口通了時，在apis.js中將mock地址替換爲線上地址便可。

目前主要實現的是首頁部分，其餘模塊只是實現了簡單交互，後續會慢慢豐富。