該仿今日頭條的文章系列如下：
微信小程序-仿今日頭條客戶端
微信小程序開發-仿今日頭條（二）
轉載請標明：https://blog.csdn.net/yangjianbo456/article/details/80935017
歡迎訪問我的微信小程序：
CSDN源碼下載地址
該小程序github源碼地址（喜歡就給個star唄）
（本小程序是模仿新聞類的app做的一個小程序）
在此特別感謝： 有夢想的程序丶猿 提供的免費開放接口API
（其博客地址：https://www.jianshu.com/p/e6f072839282）
本次發版主要實現功能如下：（2018年7月5日發佈）
（搭建小程序的開發環境等內容請參考：https://developers.weixin.qq.com/miniprogram/dev/index.html）
效果圖如下
1.實現底部的2個tab顯示：（首頁，我的頁面）
在app.json內配置如下代碼，即可實現底部的tab；
"tabBar": {
"color": "#ccc",
"selectedColor": "#00FF00",
"borderStyle": "white",
"backgroundColor": "#f9f9f9",
"list": [
{
"text": "首頁",
"pagePath": "pages/main/main",
"iconPath": "pic/icon_component.png",
"selectedIconPath": "pic/icon_component_HL.png"
},
{
"text": "我的",
"pagePath": "pages/my/my",
"iconPath": "pic/wechat.png",
"selectedIconPath": "pic/wechatHL.png"
}
]
},2.實現頂部的4個頁籤的顯示以及滑動；
<view class="swiper-tab">
<view class="tab-item {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">推薦</view>
<view class="tab-item {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">純文字</view>
<view class="tab-item {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">圖片</view>
<view class="tab-item {{currentTab==3 ? 'on' : ''}}" data-current="3" bindtap="swichNav">視頻</view>
</view>
<swiper current="{{currentTab}}" class="swiper" duration="300" style="height:{{winHeight}}px" bindchange="bindChange">
<swiper-item>
<scroll-view scroll-y="{{true}}" style="height:{{winHeight}}px" class="list" bindscrolltolower="bindDownLoad" bindscroll="scroll" bindscrolltoupper="refresh">
<view class='listview' wx:for="{{resultdata}}" wx:for-item="item" wx:key="*this">
<view bindtap="bindViewTap" data-item='{{item}}'>
<template is="{{item.type == '29' ? 'joy-text' : (item.type == '10' ? 'joy-pic' : (item.type == '41' ? 'joy-video' : 'joy-pic'))}}" data="{{...item}}"></template>
</view>
</view>
</scroll-view>
</swiper-item>
···省略swiper-item 3個內容···
</swiper>3.實現內容頁列表的上拉刷新和下拉加載更多功能；
上面2中的下面代碼，實現了上拉加載和下拉刷新功能
bindscrolltolower="bindDownLoad" bindscrolltoupper="refresh"4.實現模板化展示數據；
上面2中的下面代碼，實現模板功能
<import src="../../utils/template.wxml" />
<template is="{{item.type == '29' ? 'joy-text' :
(item.type == '10' ? 'joy-pic' :
(item.type == '41' ? 'joy-video' : 'joy-pic'))}}" data="{{...item}}"></template>5.實現數據的本地收藏和取消收藏功能；
···
wx.setStorage({
key: “collects”, //以用戶id和用戶創建該數據的時間作爲唯一的key
data: JSON.stringify(itemArr),
success: function() {}
})
//收藏和取消收藏使用了一個key，收藏時將數組添加一個元素；取消收藏時將數組減去該元素；
···
6.實現頁面的跳轉功能，轉發功能；
//實現跳轉頁面功能
bindViewTap: function(event) {
var item = event.currentTarget.dataset.item;
wx.navigateTo({
url: '../detail/detail?jsonStr=' + JSON.stringify(event.currentTarget.dataset.item),
success: function(res) {
// success
},
fail: function() {
// fail
},
complete: function() {
// complete
}
})
}, /**
* js文件中添加下面代碼，用戶即可以點擊右上角分享
*/
onShareAppMessage: function() {
wx.showToast({
title: '你好',
icon: '',
image: '',
duration: 0,
mask: true,
success: function(res) {},
fail: function(res) {},
complete: function(res) {},
})
}7.實現本地收藏數據的列表顯示功能； 等
//js中獲取所有收藏的數據，並通過頁面展示出來，此處是獲取本地收藏數據
requesLocalData:function(){
var list = [];
try {
var value = wx.getStorageSync('collects');
if (value) {
// Do something with return value
var itemArr = JSON.parse(value);
if (itemArr) {
list = itemArr;
}
}
} catch (e) {
// Do something when catch error
wx.showToast({
title: '獲取緩存數據出錯',
icon: 'fail'
})
}
this.setData({
collects: list,
})
}