微信小程序在近期比較火熱渠脉，作者在閑暇之余研究后決定做一個(gè)今日頭條的小demo瓶佳。
TodayNews.gif
- 微信小程序官方文檔:http://wxopen.notedown.cn/
首先感謝此作者的接口提供。
首頁的開發(fā)過程为朋。
- 首先在app.json中配置每個(gè)頁面
{
"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": "關(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)畫效果童番，當(dāng)時(shí)的想法是利用js來控制動(dòng)畫效果威鹿，配合微信的wx.createAnimation(OBJECT)來創(chuàng)建動(dòng)畫并且實(shí)現(xiàn)，當(dāng)我點(diǎn)擊當(dāng)前的按鈕的時(shí)候忽你，用js來控制其大小變化，當(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)畫配合一個(gè)Bool值來使當(dāng)前的視圖發(fā)生變化冰寻。
- 使用
<scroll-view scroll-x="true" scroll-y="false" class="tpscview" scroll-left="-2">來對(duì)導(dǎo)航條進(jìn)行橫向設(shè)置。 - 使用BOOL型數(shù)據(jù)animation來控制當(dāng)前的狀態(tài)没卸。
- 使用css3代碼來控制動(dòng)畫
.curPage {
animation:myfirst 0.1s;
animation-fill-mode:forwards;
}
@keyframes myfirst
{
to {
font-size: 50rpx;
}
}
導(dǎo)航條
3. 獲取內(nèi)容
- 作者封裝了以下網(wǎng)絡(luò)接口首先初始化數(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封裝文件來對(duì)網(wǎng)絡(luò)進(jìn)行請(qǐ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 組件來對(duì)用戶進(jìn)行請(qǐng)求提示
<loading hidden="{{loading}}">
加載中...
</loading>
最終完成了此頁面。
另外其他頁面詳見作者github上的代碼尉桩。
- 若覺得本文對(duì)您有幫助請(qǐng)給個(gè)star贪庙。
- 若有改進(jìn)歡迎一起討論并學(xué)習(xí)。
