君莫嘆：微信小程序實戰嘗鮮：今日頭條（附代碼）
發布時間：2018-03-30 15:54 所屬欄目：小程序開發教程
微信小程序在近期比較火熱，作者在閑暇之余研究后決定做一個今日頭條的小demo。
首先感謝此作者的接口提供。
首頁的開發過程。
-
首先在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": "我的" }] } } -
隨后我們創建導航條。
布局：運用盒型布局即可。
思路：由于這個有動畫效果，當時的想法是利用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;
}
}
3. 獲取內容
- 作者封裝了以下網絡接口首先初始化數據端。
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封裝文件來對網絡進行請求。
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。
- 若有改進歡迎一起討論并學習。
