基于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/