小程序模板網(wǎng)

君莫嘆：微信小程序?qū)崙?zhàn)嘗鮮：今日頭條（附代碼）

發(fā)布時(shí)間：2018-03-30 15:54 所屬欄目：小程序開(kāi)發(fā)教程

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

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

首頁(yè)的開(kāi)發(fā)過(guò)程。

  1. 首先在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": "我的"
 }]
}
}

  2. 隨后我們創(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ā)生變化。

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

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

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
}
  • 接下來(lái)通過(guò)NetLoad.js封裝文件來(lái)對(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
  })
})
}
}
  • 接下來(lái)通過(guò)wx.loading 組件來(lái)對(duì)用戶(hù)進(jìn)行請(qǐng)求提示 
    <loading hidden="{{loading}}">
      加載中...
</loading>
    最終完成了此頁(yè)面。

另外其他頁(yè)面詳見(jiàn)作者github上的代碼。

  • 若覺(jué)得本文對(duì)您有幫助請(qǐng)給個(gè)star。
  • 若有改進(jìn)歡迎一起討論并學(xué)習(xí)。


本文地址：http://u-renovate.com/wxmini/doc/course/22979.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢(xún)：800182392 點(diǎn)擊咨詢(xún)
QQ在線咨詢(xún)