Weex-hackernews是Weex项目里比较“先进”的demo。因为其是基于Vue开发的，有完整清晰的项目结构，甚至可以将Weex-hackernews拿过来直接搬到自己的项目中去进行开发。下面我将逐条对其进行讲解。
项目整体结构##
Snip20170221_1.png
- components：存放视图组件的.vue文件
- store：存放接口请求的方法及数据封装对象
- view：存放主视图的.vue文件，即控制器。
- entry.js：全局对象声明
- router.js：路由声明
重点就这几块，只要这几块能理解清楚写项目就没有什么问题了。
router.js###
只需要将你的.vue文件导入到router.js中，然后配置路由就可以访问你的界面了。这里举个例子
import Home from './views/Home.vue'
export default new Router({
routes: [
{ path: '/home', component: Home },
{ path: '/', redirect: '/home' }//这是根路由，第一次进来就访问它
]
})
如果你的Home.vue有点内容的话就可以在网页上呈现了。
store里才是重点###
store里主要是处理网络和数据部分，使用的是Vuex的语法
1、actions.js#####
View获取接口数据需要调用这里的方法。
export function FETCH_LIST_DATA ({ commit, dispatch, state }, { type }) {
commit('SET_ACTIVE_TYPE', { type })
return fetchIdsByType(type)
.then(ids => commit('SET_LIST', { type, ids }))
.then(() => dispatch('ENSURE_ACTIVE_ITEMS'))
}
这个是最典型的，commit方法是将数据通过某个方法保存起来，而真正去发送请求的是fetchIdsByType(type)，如果view想要拿到数据，必须先保存起来再使用。
2、fetch.js#####
这里主要是具体地去调接口了，可以看到
export function fetch (path) {
// console.log('----------> fetch: ' + path)
return new Promise((resolve, reject) => {
stream.fetch({
method: 'GET',
url: `${baseURL}/${path}.json`,
type: 'json'
}, (response) => {
// console.log('----------> response.status: ' + response.status)
if (response.status == 200) {
resolve(response.data)
}
else {
reject(response)
}
}, () => {})
})
}
这是一个get请求的模板，还可以封装post等请求的模板。这里才是真正与与服务器做交互的地方。
3、index.js#####
这里是数据声明的地方，如果想在view使用接口传过来的某个数据，都需要在这里做预定义处理，方便方法将数据存储在你预定义的变量里。
const store = new Vuex.Store({
actions,
mutations,
//新建一个clientId变量
clientId:null,
......
})
只需要在new Vuex.Store里声明一下。
4、mutations.js#####
这边就是具体将值赋值给定义的变量，看个栗子就明白了
export function SET_ACTIVE_TYPE (state, { type }) {
state.activeType = type
}
这样相信你可以将store里的内容连起来了，这里你或许还有一个疑问，我如何在view内使用这些数据，只要使用this.$store.clientId就可以拿到数据了。
结语##
其他模块我也不再赘述，相信你自己会弄明白的，最最主要的是store里东西。后期我会将继续与手机端对接做介绍。本文纯属个人理解，如有争议，还望指教。
网友评论