Omi实战-QQ附近用户列表Web页 - 【当耐特】_H5之家

原文地址https://github.com/AlloyTeam/omi/blob/master/docs/cn_pr_nearby.md

Omi很适合大型复杂的Web页面开发，例如一些Web在线工具的开发。但是制作这种简单的QQ附近用户列表Web页，也不会有大炮哄蚊子的感觉。

项目开始之前，实现选择一个脚手架。这个项目用的就是Omi Github上的scaffolding作为其项目脚手架。主要基于 Gulp + Webpack + Babel + BrowserSync 进行开发和部署。（ps：目前脚手架先上github弄下来，pasturn和Aresn正在开发omi-cli，不久就要发布了）

Gulp用来串联整个流程，Webpack + Babel让你可以写ES6和打包，BrowserSync用来帮你刷浏览器，不用F5了。

这里需要注意的是，BrowserSync会启动localhost:3000导致你的AJAX请求跨域而无法拿到数据。

所以，要使用Fiddler并配置Extention：

目录结构也是和Omi Github上的scaffolding一样。
组件全放在component目录，公共的工具库放在common，其他资源文件放在asset里。

命令

开发

npm run dev

发布

npm run dist

开始写码

万事具备，开始写码。先写组件：

UserList (data) { super(data) .[]) .prepareData(user) }) ..desc.split(" ")[0] .desc.split(" ")[1] ....).) (users) .uin_info.forEach(user =>{ this.prepareData(user) this.data.uin_info.push(user) }) this.update() () () UserList

组件里面有5个方法:

其他两个方法的render和style用来生成组件的HTML和局部CSS，不再叙述。
render里面使用了mustache.js模板引擎；
如果使用omi.lite.js版本(不包含mustache.js模板引擎)的话，你也可以使用ES6 map去遍历数据生成HTML，或者重写 Omi.template去使用任意你喜欢的模板引擎，非常灵活方便。

这里友情提醒一下，如果使用webstorm的话，可以把js version设置成JSX Harmony或者ECMAScript 6，这样才是写ES6+的姿势。

下面来看index.js:

Omi UserList .makeHTML('UserList', UserList) (data) { super(data) ..loadMore() this.requestData(data => this.list.appendUsers(data)) body html height ....offsetHeight), vp_height (height vp_height .requestData(data => this.list.appendUsers(data)) (callback) .(require('./mock_data.js').default) }) () .)

通过Omi.makeHTML('UserList', UserList)这句代码，UserList变成了可以嵌套至render方法中的标签。如：

下面这行代码，是监听滚动，快滚动到底部的时候在loadMore里面会去请求。

.loadMore()

通过height - document.body.scrollTop - vp_height < 200判断用户快要滚动底部，滚动到底部有个加载更多的行为，即：

vp_height .requestData(data => this.list.appendUsers(data)) }

requestData是去服务器请求分页的数据，请求成功，会去调用this.list.appendUsers进行数据的添加。
慢着？this.list哪里来的？appendUsers又是哪里定义的方法？且看下面：

上面标记的name，让你可以直接通过this.list访问到UserList对象的实例，所以也就可以调用它的appendUsers方法！

再来看下数据模拟：

(require('./mock_data.js').default) }) }

这里在dev环境下是mock数据，使用了require.ensure，这样当你npm run dist的时候，mock的数据就不会被打包进js里了！！

最后

好了，就这么多，Omi让代码真心方便简洁~~~