連結
前言
本專案是根據 yanxuan-weex-demo，在其基礎上使用eros編寫完成，在此感謝yanxuan專案作者zwwill的支援。
demo效果：
環境
執行
$ 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地址替換為線上地址即可。
目前主要實現的是首頁部分，其他模組只是實現了簡單互動，後續會慢慢豐富。