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