weex 是阿里出品的一個類似RN的框架，可以使用前端技術來開發移動應用，實現一份代碼支持H5，IOS和Android。而weex-hacknews則是weex官方出品的，首個使用 Weex 和 Vue 開發的 Hacker News 原生應用，在項目中使用了 Vuex 和 vue-router等官方組件。本文會分析weex-hacknews的代碼，學習如何使用weex進行開發，本文是第二部分，第一部分見(http://www.cnblogs.com/xiaoqi/p/weex-hackernews-code-part1.html)
接上文
二、代碼分析
6、再看入口程序
代碼如下，注意標紅的位置：
6.1 App.vue
代碼如下：
定義了一個div作為body容器，router-view作為component容器
@androidback="back"處理了Android返回按鈕點擊事件，點擊返回按鈕時，router執行back回退。
6.2 入口程序
通過Vue.util.extend，將router和store注入到所有子組件，這樣就可以使用`this.$router`and`this.$store`來訪問路由和vuex。
代碼最后一行，router.push('/') , 跳轉到'/', 根據上篇的內容，會跳轉到/top
7、 首頁
我們來看StoriesView，主要UI代碼如下：
幾個關鍵點如下：
7.1 組件通過props屬性傳遞數據
Vues.js可以使用 props 把數據傳給子組件，prop 是父組件用來傳遞數據的一個自定義屬性，子組件需要顯式地用 props 選項聲明 "prop"：
我們再來看router.js里的createStoriesView方法，是否恍然大悟？
7.2 子組件
在StoriesView中，包含app-header、story兩個子組件，使用時需要import：
7.2.1 app-header 組件
代碼如下：
幾個關鍵點：
- @click 處理點擊事件，jump是在入口程序里mixin的router跳轉函數
- weex里，text用於顯示文本元素，可以理解為html里的span
7.2.2 story 組件
<story :story="story"></story>
調用的時候，將story對象作為props傳遞過去了，我們猜測下，story組件有一個story的props屬性，來看代碼驗證：
不出所料，包含story對象，並且是required，通過該屬性將story傳遞過來。
值得一提的是，這里使用了timeAgo filter，還有extennal-link子組件，v-if條件判斷等。
剩下的就是具體的數據綁定，不細說了。
7.2.3 數據加載
- 在入口程序通過Vue.util.extend將store注入，所以在子組件可以使用this.$store訪問vuex
- 通過名為stories的computed計算屬性訪問數據
- 在created（vue.js生命周期，可理解為jq的ready）時，調用fetchListData，實則是調用FETCH_LIST_DATA action，調用前設置loading為true，顯示loading；
- 處理成功的話，設置loading = false，loading隱藏。
- loadMoreStories 則是加載更多數據，list列表事件，下滑到底部時觸發
其他頁面類似，這里就不一 一介紹了
三、小結
weex-hacknews的代碼分析就告一段落了，總體感覺：
- Weex 可以讓前端開發人員開發native app程序，值得點贊，但缺點是目前坑還比較多，開源社區資源也較少
- Vuejs router應該是簡化了開發，推薦使用
- vuex則較難理解，開發復雜度也較高，大家在實際項目中需要酌情考慮是單獨維護組件的state，還是使用vuex維護全局的state，推薦中大型的單頁應用項目使用vuex