eternallovelin / m.douban.com

豆瓣移动站demo

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

m.douban.com single-page demo

这是一个基于angular而开发的豆瓣移动站单页面应用demo,首先它并不是一个完整的mobile site。目前包含了:首页,电影页,图书页,广播页和小组页。所有站点数据均采用本地json文件模拟动态载入。UI方面则完全参照了本尊的设计,html5和css部分全部用less进行了重构,数据交互部分则由angular来完成。这是第一版,后续还会增加一些内页和登录页。另外后续版本会用directive模块化一些组件,也会对用户体验的细节部分持续优化。

在线地址

http://test2.cdgzy.com/douban/
您也可以通过手机扫描二维码来访问
![扫描二维码](https://github.com/aioros2016/m.douban.com/blob/master/dist/img/code.png)

更新于2017年1月5日

1:修正了因ios边缘回弹所造成的视觉问题。
2:现在全局toast抛弃了原生alert组件,替换为自定义样式,用户体验更好。

更新于2016年12月28日

1:依赖于localstorage,现在广播页可以发广播了。
2:运用gulp-ng-annotate修复了angular注入式依赖不能混淆压缩的问题,进一步缩小了控制器文件的体积。

更新于2016年12月20日

终于迎来了版本上线后的第一次大更新。
1:这次加入了详情页,首页所有的文章列表都可以点击了。
2:突破了豆瓣的图片防盗链机制,所有图片均采集自官网服务器,项目下载体积进一步缩小了。
3:详情页底部的点赞按钮由于没有与服务器交互数据,所以用localstorage替代了交互效果。(本站目前也没有用户登录与注册机制)。
4:对电影页与图书页的数据进行了进一步的优化。
5:暂时只想到这么多,以后想到了再补充(对本项目的支持与优化会持续更新)。

更新于2016年12月14日

1:修复了点击300ms的延迟问题。
2:修复了小组页标题不显示的问题。
3:修复了active状态失效的问题。

预览

step 1:

下载后,首先安装依赖
npm install

step2:

启动服务(http://localhost:3000)
gulp

开发

目录结构

.
├── README.md           
├── dist               // 项目build目录
├── src                // 生产目录
│   ├── css            // css目录
│   ├── js             // 脚本目录
│   ├── img            // 图片目录
│   ├── controllers    // 控制器目录
│   ├── views          // 视图目录
│   ├── less           // 样式预处理器目录
│   ├── json           // 数据目录
├── gulpfils.js        // gulp任务配置文件
└── package.json       // gulp配置文件

About

豆瓣移动站demo


Languages

Language:CSS 48.3%Language:JavaScript 39.0%Language:HTML 12.7%