基于VUE,VUX组件开发的网易新闻页面搭建过程

根据妙味课堂上的一个教程练习总结,供自己复习用

一、功能介绍

一个网易新闻客户端的浏览页面,通过网易新闻的api接口实时获取新闻数据,用vux搭建样式框架,以轮播图,文字滚动,图文列表等形式把内容展示出来,可实现下拉刷新,上滑加载,文本提示更新,导航跳转到其他页面等功能。

二、涉及技术

基础:Html,css,Javascript,响应式,es6,vue-router,vue-jsonp

其他:nodejs,npm,vue,webpack,git,vux

三、模块划分

a,轮播图,图片+标题的形式无缝轮播滚动新闻,点击可跳转至网易的新闻界面

b.文字条切换,文字以上下滑动形式切换

c.新闻列表展示,左图右标题形式,点击可跳转至网易新闻详情页界面

d.底部导航,可导航至其他组件(音乐,电影,阅读)页面,在每个界面始终显示

e.其他:回到顶部,回到首页等

四、搭建过程

1.新建项目(已安装好node,vue-cli等)

执行vue init webpack 1633,新建一个名叫1633的项目,新建好后进入项目,执行npm i安装相关依赖,然后执行 npm run dev,默认8080端口,如果端口被占用,在config/index.js里改下端口,重启服务器,在浏览器中输入localhost:端口号,能弹出vue的欢迎界面,及安装成功。

2.安装vux组件库

执行npm i -s vux ,安装好后可以在package.json 中看到响应的版本信息,由于之后会用到vux 的viewBox,xHeader等组件,这里我们提前安装好相关的依赖

  • 执行npm i -D less less-loader
  • 引入样式重置 @import '~vux/src/styles/reset.less',这个放在App.vue的style中,同时设置style的属性 lang=less
  • 执行npm install vux-loader --save-dev,然后在webpack.dev.conf.js中配置

const vuxLoader=require('vux-loader')
baseWebpackConfig=vuxLoader.merge(baseWebpackConfig,{plugins:['vux-ui']})

(要设置语言包 vuex-i18n,如果不引入,会提示_vm.$t is not a function报错,另,引入了发布到服务器依然会报这个错误。。)

到此,前期的设置基本完成。

3.搭建界面

组件的引入 ,在import { 组件名 } from 'vux',然后再conponents中注册该组件名,就可以使用了,组件使用的时候以小写加连接符的形式,如viewBox,使用时为 <view-box> </view-box>

我们分别引入以下组件:

  • viewBox:整体的布局组件,以后其他的组件也是放到这个组件中的,需要设置body,html以及父组件的高度
  • XHeader:头部组件,最上方显示名称的地方
  • Tabbar,TabbarItem:底部导航组件
  • Swiper:轮播图组件
  • Marquee:文字滑动组件,跑马灯效果
  • Panel:图文列表组件

组件引入完毕,先根据官方文档查看相应的设置,数据先填充案例里的,整体界面能正常运行即可。

4.数据加载

a) 数据来源准备:

  • 首屏推荐新闻:http://3g.163.com/touch/jsonp/sy/recommend/0-9.html
  • 下拉或上滑加载更多的切换新闻:'http://3g.163.com/touch/jsonp/sy/recommend/'+start+'-'+end+'.html'
  • 刷新需要传入的参数:miss:'00',refresh:['A','B01','B02'.....'B10'],共11个
  • 首页所需数据格式:
  • 轮播图数据:SwiperList: url, img, title
  • 文字滑动数据:MarqueeList:  title
  • 新闻列表数据:PanelList:src, title, desc, url

b) vue jsonp 解决跨域处理:

  • 执行npm i -S vue-jsonp 来安装vue jsonp;
  • 在main.js中导入vue-jsonp,执行import VueJsonp from 'vue-jsonp';
  • 通过use方法,挂载到vue中,vue.use(VueJsonp)

c) 数据处理

首页一进入就获取数据,这个需要把加载数据的函数设置在vue的created生命周期函数中

created () {
this.$jsonp('http://3g.163.com/touch/jsonp/sy/recommend/0-9.html').then(data => {
/* 这里是获取的数据 */
console.log(data)
// 处理轮播的数据
this.swiperList = data.live.filter(item => {
return item.addata === null && item.picInfo[0]; //这里item.picInfo[0]必须保证有图片,否则显示不出来
    }).map(item => {
return {
url: item.link,
img: item.picInfo[0].url,
title: item.title
}
})
// 处理跑马灯数据
this.marqueeList = data.focus.filter(item => {
return item.addata === null
}).map(item => {
return {
title: item.title
}
})
// 处理文章列表数据
this.panelList = data.list.filter(item => {
return item.addata === null && item.picInfo[0] && item.digest
}).map(item => {
return {
src: item.picInfo[0].url,
title: item.title,
desc: item.digest,
url: '/detailPage'
}
})
})
}

第一个参数是我们的请求地址它返回给我们的是一个promise对象,可以通过then方法进行调用并return出想要的结果数据,then的参数data即我们拿到的原始数据,通过数组的filter方法筛选出想要的数据,map循环遍历每一项数据,按照需要的类型统一返回出去,再赋值给swiperList和其他的项,swiperList,MarqueeList,PanelList要提前在data()里面定义好,内容为空数组。

d)  渲染数据到界面中

把之前的测试数据删除,绑定上新的数据

<swiper :list="swiperList" :loop="true"></swiper>
<marquee class="my-marquee">
<marquee-item v-for="i in marqueeList" :key='i'>{{i.title}}</marquee-item>
</marquee>
<panel :list="panelList" class="panel-list" :type="type"></panel>

到此,数据填充完毕

e)下拉上滑刷新处理

引入下拉刷新及无限加载组件,执行npm i vue-scroller -S ,安装好后把要刷新的内容包裹进来即可。

<scroller class="my-scroller" :on-refresh="refresh" refreshText="等我一下~" :on-infinite="infinite" ref="myRef">
<swiper :list="swiperList" :loop="true"></swiper>
<marquee class="my-marquee">
<marquee-item v-for="i in marqueeList" :key='i'>{{i.title}}</marquee-item>
</marquee>
<panel :list="panelList" class="panel-list" :type="type"></panel>
</scroller>
下拉刷新:on-refresh="refresh"

refresh () {
getFreshKey()
this.$jsonp(`http://3g.163.com/touch/jsonp/sy/recommend/${start}-${end}.html`, {
miss: '00',
refresh: keyValue
}).then(data => {
/* console.log(this.$refs.myRef) 这个方法就像是jq里通过dom获取元素一样,只不过我们要减少dom的操作 */
/* 这里是获取的数据 */
// console.log(data)
// 处理文章列表数据
(省略同上)
this.$refs.myRef.finishPullToRefresh()//停止下拉刷新
this.$vux.toast.text(`本次共刷新了${this.panelList.length}条数据`)//文本提示刷新了多少条数据
}

这里声明了一个getFreshKey函数,每次刷新的时候执行,初始值为0,每刷新一次加1,动态拿到refreshKey中的每一项,赋值给refresh,保证每次刷新
拿到的数据都不一样。

let start = 0;
let end = start + 9;
let refreshKey = ['A', 'B01', 'B02', 'B03', 'B04', 'B05', 'B06', 'B07', 'B08', 'B09', 'B10'];
let key = 0;
let keyValue = 'A';
function getFreshKey () {
key++
if (key === 10) {
key = 0
}
keyValue = refreshKey[key]
}
上滑加载 :on-infinite="infinite"
infinite () {
this.$jsonp(`http://3g.163.com/touch/jsonp/sy/recommend/${start}-${end}.html`, {
miss: '00',
refresh: keyValue
}).then(data => {
/* 这里是获取的数据 */
console.log(data)
// 处理文章列表数据
(省略同上)
start += 10;
end = start + 9;
this.$refs.myRef.finishInfinite() ;//停止上滑刷新
//this.$refs.myRef这个是我们在scroller上绑定的ref属性,就像dom操作中选中某一个元素一样
})

注意:这样操作的上滑加载出来的数据,是追加上来的,这样的话列表的数据就会越来越多,如果希望每次上滑的时候,就把原来的内容替换掉的话,
可以这么写:
infinite () {
this.$jsonp(`http://3g.163.com/touch/jsonp/sy/recommend/${start}-${end}.html`, {
miss: '00',
refresh: keyValue
}).then(data => {
/* 这里是获取的数据 */
console.log(data)
// 处理文章列表数据
(省略同上)
this.panelList=this.pannelList.concat(panelList);//数据拼接
start += 10;
end = start + 9;
this.$refs.myRef.finishInfinite() ;//停止上滑刷新
//this.$refs.myRef这个是我们在scroller上绑定的ref属性,就像dom操作中选中某一个元素一样
})
f)文本提示更新 

引入toast 提示组件 import { ToastPlugin } from 'vux',Vue.use(ToastPlugin)
然后把这句代码写在refresh 函数中即可

this.$vux.toast.text(`本次共刷新了${this.panelList.length}条数据`)

5.导航栏的设置

在conponents中分别注册news,movei,music等组件,并把他们引入到router文件夹下的index.js文件中,配置好路由的名称路径等信息,然后就可以把路由
绑定到导航上了,默认第一个进入的就是新闻的界面,其他界面暂未完成,设置为空白页

<tabbar-item selected link="/">
<img slot="icon" src="./assets/icon-1.png">
<span slot="label">新闻</span>
</tabbar-item>

五、打包与发布

打包:执行npm run build ,完成后会生成一个dist的文件
发布:把文件发送到github上面,具体步骤见资料参考

六、问题与改进

1.上滑刷新时速度过快,可把刷新的数据写到一个定时器中
2.在发布到git之后,控制台依然提示有错误,暂时未找到解决方法

七、资料参考:

1.如何在github搭建自己的项目: https://blog.csdn.net/liwenjieit/article/details/78230003
2.vue-scroller的详细用法:https://www.jianshu.com/p/31ad32e7ec13
3.es6 简明教程:http://www.runoob.com/w3cnote/es6-concise-tutorial.html
4.vue.js :http://www.runoob.com/vue2/vue-tutorial.html
5.vue-jsonp解决跨域处理:https://www.cnblogs.com/xiaoli52qd/p/7235901.html
6.jsonp请求百度搜索接口:https://www.jianshu.com/p/8d3b27cc37e7

浏览地址:
 https://cytheria123.github.io/test/
上一篇:(三) Angular2项目框架搭建心得


下一篇:Unity3D 画线插件 Vectrosity 画一个一直循环的正弦函数曲线