小程序模板網(wǎng)

微信小程序實戰(zhàn)嘗鮮:今日頭條(附代碼)

發(fā)布時間:2017-11-23 17:41 所屬欄目:小程序開發(fā)教程

微信小程序在近期比較火熱,作者在閑暇之余研究后決定做一個今日頭條的小demo。 首先感謝此作者的接口提供。 首頁的開發(fā)過程。 首先在app.json中配置每個頁面 { "pages":, "window":{ "backgroundTextStyle":"lig ...

 
 
 

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

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


首頁的開發(fā)過程。

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

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

    • 使用<scroll-view scroll-x="true" scroll-y="false" class="tpscview" scroll-left="-2">來對導航條進行橫向設置。
    • 使用BOOL型數(shù)據(jù)animation來控制當前的狀態(tài)。
    • 使用css3代碼來控制動畫
.curPage {
     animation:myfirst 0.1s;
     animation-fill-mode:forwards;
}

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

3. 獲取內容

  • 作者封裝了以下網(wǎng)絡接口首先初始化數(shù)據(jù)端。
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
}
  • 接下來通過NetLoad.js封裝文件來對網(wǎng)絡進行請求。
    import Promise from "../../bluebird/js/browser/bluebird.min.js"
    module.exports = {
    fetchApi (url,params,method) {
    return new Promise((resolve, reject) => {
      wx.request({
        url: `${url}`,
        data: Object.assign({}, params),
        method:method,
        header: { 'Content-Type': 'application/json' },
        success: resolve,
        fail: reject
      })
    })
    }
    }
  • 接下來通過wx.loading 組件來對用戶進行請求提示
    <loading hidden="{{loading}}">
          加載中...
    </loading>
    最終完成了此頁面。

另外其他頁面詳見作者github上的代碼。

  • 若覺得本文對您有幫助請給個star。
  • 若有改進歡迎一起討論并學習。


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/17931.html 復制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢