Vue2.0仿今日头条

源码地址：toutiao_Vue2.0

预览地址：toutiao_Vue2.0

技术栈

1. 主要用到：vue、vue-router

2. 其他: jsonp、axios、vue-scroller

功能

• 各类新闻的查看

• 新闻的搜索

API

1. 获取新闻：https://m.toutiao.com/list/?tag=新闻类型&ac=wap&count=20&format=json_raw&as=A125A8CEDCF8987&cp=58EC18F948F79E1&min_behot_time=时间

2. 获取文章：https://m.toutiao.com/i新闻ID/info/'

3. 获取段子：https://www.toutiao.com/api/article/feed/?category=essay_joke&utm_source=toutiao&widen=1&max_behot_time=1500114422&max_behot_time_tmp=1500114422&tadrequire=true&as=A1F52966E9EEF00&cp=59692E6FD0E09E1

4. 搜索： https://www.toutiao.com/search_content/?offset=相对位置&format=json&keyword=关键词&autoload=true&count=20&cur_tab=1

还可以参考今日头条Api分析

遇到的问题

用的v-cli搭建的项目

1.难点1就是nav如何做tab的切换

首先我们先分析获取新闻的api  变化就在新闻类型

那怎么解决呢？

我们看到动态路由可以解决这个问题

https://router.vuejs.org/zh-cn/essentials/dynamic-matching.html

vue-router的数据获取

我们可以通过$route.params.id来获取动态路由的数据

我们试着来构建nav的数据格式

[
    {url: '/indexList', type: '__all__', text: '推荐'},
    {url: '/indexList', type: 'news_hot', text: '热点'},
    {url: '/indexList', type: 'news_society', text: '社会'},
    {url: '/indexList', type: 'news_entertainment', text: '娱乐'},
    {url: '/indexList', type: 'news_tech', text: '科技'},
    {url: '/indexList', type: 'news_car', text: '汽车'},
    {url: '/indexList', type: 'news_sports', text: '体育'},
    {url: '/indexList', type: 'news_finance', text: '财经'},
    {url: '/indexList', type: 'news_military', text: '军事'},
    {url: '/indexList', type: 'news_world', text: '国际'},
    {url: '/indexList', type: 'news_fashion', text: '时尚'}
]

根据api、动态路由、vue-router的数据获取

我们可以理一下思路，通过动态路由去变化url，然后根据响应路由参数的变化去请求不同的api  那么就能请求不同的数据

第一个难点解决了

2.文章列表页面点进文章

我们分析一下api

https://m.toutiao.com/i新闻ID/info/'

我们只需要传新闻id就行

同样用第一种的动态路由的方法

3.文章列表页面的上拉下拉刷新

我是用的vue-scroller这个插件

4.搜索页面

思路就是输入框 得到enter的事件后 就渲染文章列表数据

5.页面标题的自定义

做到这的时候我们发现页面的标题都是一样的

我参考了这篇文章：组件化的思想实现 vue2.0 下对网页标题(document.title)的更新

参考

陈花花的仿vue2