微信小程序在近期比較火熱,作者在閑暇之余研究后決定做一個(gè)今日頭條的小demo。
首先感謝此作者的接口提供。
首頁(yè)的開(kāi)發(fā)過(guò)程。
首先在app.json中配置每個(gè)頁(yè)面
{ "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": "首頁(yè)" }, { "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": "關(guān)注" },{ "pagePath": "pages/mine/mine", "iconPath":"imges/tabbar/mine_tabbar_22x22_.png", "selectedIconPath":"imges/tabbar/mine_tabbar_press_22x22_@2x.png", "text": "我的" }] } }
隨后我們創(chuàng)建導(dǎo)航條。
布局:運(yùn)用盒型布局即可。
思路:由于這個(gè)有動(dòng)畫(huà)效果,當(dāng)時(shí)的想法是利用js來(lái)控制動(dòng)畫(huà)效果,配合微信的wx.createAnimation(OBJECT)來(lái)創(chuàng)建動(dòng)畫(huà)并且實(shí)現(xiàn),當(dāng)我點(diǎn)擊當(dāng)前的按鈕的時(shí)候,用js來(lái)控制其大小變化,當(dāng)我點(diǎn)擊其他按鈕的時(shí)候,遍歷所有按鈕然后設(shè)當(dāng)前的按鈕為變大狀態(tài),其他則縮小。但是在實(shí)現(xiàn)的時(shí)候發(fā)現(xiàn)在數(shù)據(jù)源用的是微信中數(shù)據(jù)綁定的形式渲染的,當(dāng)前的按鈕變大后其他按鈕都隨之變化,控制較難,所以作者放棄了這種思路
最終思路: 利用css3動(dòng)畫(huà)配合一個(gè)Bool值來(lái)使當(dāng)前的視圖發(fā)生變化。
.curPage { animation:myfirst 0.1s; animation-fill-mode:forwards; } @keyframes myfirst { to { font-size: 50rpx; } }
3. 獲取內(nèi)容
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 }
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 }) }) } }
<loading hidden="{{loading}}"> 加載中... </loading>最終完成了此頁(yè)面。
另外其他頁(yè)面詳見(jiàn)作者github上的代碼。
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)