精华 (开源)基于Vue 2.0高仿<今日头条> 单页应用——vue-toutiao。
发布于 7个月前 作者 hcy1996 3538 次浏览 来自 分享

vue-toutiao

这是用 vue.js 2.0 高仿 今日头条 的移动端项目,结合了原生app的部分功能以及网页版。

前言

本人是 今日头条 的重度用户,在学习vue.js过程中,在GitHub上看到了很多高仿webapp的好项目。由此在有了一定的技术积累后,开始构思使用Vue写今日头条,一是自己对于头条的喜爱,另外也是对于自己学习成果的检验。

技术栈

  1. vue.js 2.0全家桶(vue、vuex、vue-router)
  2. axios、jsonp
  3. element-ui、iview
  4. vue-lazyload、animate.css、moment、flexible.js

在线地址

线上地址(预览地址) GitHub地址

说明

  1. 项目内定死 账号: admin, 密码: admin。
  2. 因为数据原因,首页请求的数据接口来自网页版今日头条,修改了一些参数; 收藏 页面数据由本地(static文件)获取。
  3. 此项目主要是对于vue.js的运用,在样式上无法完全还原app,可能有些地方稍微丑陋,望请谅解!
  4. 因为网页接口限制,无法获得app中 视频 这一栏目的数据,所以将其改了一些页面结构。
  5. 项目会一直更新,完善更多的功能,如发现一些地方的bug请issue,谢谢。

安装

npm install

运行 (8090端口)

npm run dev

感谢

如果您也是头条的重度用户,感觉项目对您有学习帮助,麻烦给个star吧,嘿嘿^_^


4-23 更新

  1. 美化首页每条新闻的样式;
  2. 底部导航图标与文字调整;
  3. 修改detail页回到home页“点击加载更多”按钮消失的bug;

4-25 再分享一点小东西

聊一些项目有关的内容

首先,重要的逻辑和操作都是在 home页(首页)

这个项目很关键的一环便是数据的获取,而且现在网上很少有现成的新闻数据接口,当然也有,但是返回的数据无法满足我们的需求。

后来我在刷新今日头条(f12移动模式)时,在控制台network中捕捉到了数据接口,现在直接分享给大家。 http://m.toutiao.com/list/?tag='+ payload.kind +' &ac=wap&count=20&format=json_raw&as=A125A8CEDCF8987&cp=58EC18F948F79E1& min_behot_time= parseInt((new Date().getTime()) / 1000)

这个接口其实很简单,主要修改tagmin_behot_time这两个字段。

  • min_behot_time 请求发出时的时间戳,秒为单位。
  • tag "推荐":_all_, "视频":vedio, 除上述两个外:news_×××

说一说这 tag

tag中news_×××××× 内容需要几分钟去复制一下, 比如“热点”:news_hot; “军事”:news_military。。。等等

另外这个请求是有跨域问题的,可用代理(设置proxyTable)和jsonp实现。 其实大家仔细看都能发现,我这里就献丑了,希望对您以后做一些新闻相关的项目有帮助。

3 回复

感谢楼主!!主页路由动画貌似有点问题,我用的魅蓝note3重复点击栏目之后,页面会抖动,然后整个页面又变成可以缩放了

想问一下楼主,当进入详情页的时候底部导航是怎么隐藏的啊

回到顶部