微信小程序在近期比較火熱，作者在閑暇之余研究后決定做一個今日頭條的小demo。

首先感謝此作者的接口提供。

首頁的開發過程。

1. 首先在app.json中配置每個頁面

   {
   "pages":[
    "pages/index/index",
    "pages/attention/attention",
    "pages/mine/mine",
    "pages/video/video"
   ],
   "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#d75b5d",
    "navigationBarTitleText": "今日頭條",
    "navigationBarTextStyle":"white"
   },
   "tabBar": {
    "color": "#959394",
    "selectedColor": "#959394",
    "backgroundColor": "#f0f0f0",
    "borderStyle": "white",
    "list": [{
      "pagePath": "pages/index/index",
      "iconPath":"imges/tabbar/home_tabbar_22x22_.png",
      "selectedIconPath":"imges/tabbar/home_tabbar_press_22x22_@2x.png",
      "text": "首頁"
    }, {
      "pagePath": "pages/video/video",
      "iconPath":"imges/tabbar/video_tabbar_22x22_.png",
      "selectedIconPath":"imges/tabbar/video_tabbar_press_22x22_@2x.png",
      "text": "視頻"
    },{
      "pagePath": "pages/attention/attention",
      "iconPath":"imges/tabbar/newcare_tabbar_night_22x22_.png",
      "selectedIconPath":"imges/tabbar/newcare_tabbar_press_22x22_@2x.png",
      "text": "關注"
    },{
      "pagePath": "pages/mine/mine",
      "iconPath":"imges/tabbar/mine_tabbar_22x22_.png",
      "selectedIconPath":"imges/tabbar/mine_tabbar_press_22x22_@2x.png",
      "text": "我的"
    }]
   }
   }

2. 隨后我們創建導航條。
   布局：運用盒型布局即可。
   思路：由于這個有動畫效果，當時的想法是利用js來控制動畫效果，配合微信的wx.createAnimation(OBJECT)來創建動畫并且實現，當我點擊當前的按鈕的時候，用js來控制其大小變化，當我點擊其他按鈕的時候，遍歷所有按鈕然后設當前的按鈕為變大狀態，其他則縮小。但是在實現的時候發現在數據源用的是微信中數據綁定的形式渲染的，當前的按鈕變大后其他按鈕都隨之變化，控制較難，所以作者放棄了這種思路

   最終思路： 利用css3動畫配合一個Bool值來使當前的視圖發生變化。

   • 使用<scroll-view scroll-x="true" scroll-y="false" class="tpscview" scroll-left="-2">來對導航條進行橫向設置。
   • 使用BOOL型數據animation來控制當前的狀態。
   • 使用css3代碼來控制動畫

.curPage {
     animation:myfirst 0.1s;
     animation-fill-mode:forwards;
}

@keyframes myfirst
{
    to {
       font-size: 50rpx;
    }
}

import  {
    device_id,
    iid,
    BASE_URL,
} from "./constant.js"
var net = require("./netLoad.js");
function fetchHeadName(){
    let url = BASE_URL + "article/category/get_subscribed/v1/?"
    let params = {"device_id": device_id,"aid": 13,"iid": iid}
     return net.fetchApi(url, params, "GET").then(data=>data)
}

function loadHomeCategoryNewsFeed(category){
     let url = BASE_URL + "api/news/feed/v39/?"
     let params = {"device_id": device_id,"category": category,"iid": iid}
     return net.fetchApi(url,params,"GET").then(data=>data);
}

function loadHomeCategoryMoreNewsFeed(category, lastRefreshTime){
     let url = BASE_URL + "api/news/feed/v39/?"
     let params = {"device_id": device_id,
                      "category": category,
                      "iid": iid,
                      "last_refresh_sub_entrance_interval": lastRefreshTime}
     return net.fetchApi(url, params, "GET").then(data=>data);
}

export {
    fetchHeadName,
    loadHomeCategoryNewsFeed,
    loadHomeCategoryMoreNewsFeed
}