1月9號微信小程序正是上線,在網上嘗試了一下,發(fā)現(xiàn)很厲害。所以研究了一下。
下面是我的demo:
包含四個頁面:news.js/news.wxss/news.json/news.wxml
1.news.wxml:
<scroll-view class="news_banner">
<view wx:for="{{selections}}" wx:for-index="idx" data-idx="{{idx}}" class="news_banner_text {{item.show?'select':''}}" data-cid="{{item.cateid}}" bindtap="bannerClick" >
<text>{{item.catename}}</text>
</view>
</scroll-view>
<view class="news">
<view wx:for="{{newsList}}" class="news_list" data-nid="{{item.NewsId}}" data-ntitle="{{item.Title}}" data-nimg="{{item.Pic}}" data-nsource="{{item.Source}}" bindtap="newsClick">
<view class="news_left">
<image mode="scaleToFill" src="http://static.iyuba.com/cms/news/image/{{item.Pic}}"></image>
<text class="news_date">{{item.CreatTime}}</text>
</view>
<view class="news_right">
<text class="news_title news_text">{{item.Title}}</text>
<text class="news_subTitle news_text">{{item.Title_cn}}({{item.WordCount}} words)</text>
<view class="news_data">
<text>難度:{{item.HardWeight}}|</text>
<text>閱讀:{{item.ReadCount}}|</text>
<text>{{item.UserName}}|</text>
<text>來源:{{item.Source}}</text>
</view>
</view>
</view>
</view>
2.news.js
var app = getApp();
var TimeUtil = require('../../utils/util.js');
var bannerList = [
{'cateid':12134,'catename':'職場','show':false},
{'cateid':12235,'catename':'政治','show':false},
{'cateid':122316,'catename':'經濟','show':false},
{'cateid':112317,'catename':'文化','show':false},
{'cateid':123228,'catename':'生活','show':false},
]
Page({
data : {
},
onLoad: function(options){
this.setData({
maxId : 0,
cateid : 0,
selections : bannerList
})
this.loadNews(0);
},
onReady:function(){
},
onShow:function(){
},
onHide:function(){
},
onUnload:function(){
},
onPullDownRefresh: function() {
this.setData({
maxId : 0
});
下拉加載新聞
this.loadNews(0);
},
onReachBottom: function() {
this.loadNews(2)
},
bannerClick: function(e){
var dataset = e.currentTarget.dataset;
for(var i in bannerList){
bannerList[i].show = false;
}
bannerList[dataset.idx].show = true;
this.setData({
cateid : dataset.cid,
maxId : 0,
selections : bannerList
})
this.loadNews(1);
},
loadNews: function(loadType){
var that = this;
wx.request({
url: '此處是查詢新聞信息的接口',
data: {
format : 'json',
maxId : this.data.maxId,
categoryId : this.data.cateid,
pageCounts : 10
},
method: 'GET',
success: function(res){
var newsData = res.data;
if(newsData.total > 0){
var newInfoList = newsData.data;
var today = new Date();
for(var i in newInfoList){
newInfoList[i].CreatTime = that.operateDate(today,newInfoList[i].CreatTime);
}
var newList = that.data.newsList;
if(loadType == 2){
for(var i in newInfoList){
newList.push(newInfoList[i]);
}
}else{
newList = newInfoList;
}
that.setData({
newsList : newList,
maxId : newInfoList[9].NewsId
})
}
},
fail: function() {
},
complete: function() {
}
})
},
newsClick: function(e){
var dataset = e.currentTarget.dataset;
wx.navigateTo({
url: '../detail/detail?title='+ dataset.ntitle + '&newsId=' + dataset.nid + '&source=' + dataset.nsource + '&pic=' + dataset.nimg
})
},
operateDate: function(today, date){
var year = today.getFullYear();
var month = today.getMonth();
var day = today.getDate();
var time = today.getTime();
var newtime = Date.parse(date);
var newDate = new Date(newtime);
var newyear = newDate.getFullYear();
var newmonth = newDate.getMonth();
var newday = newDate.getDate();
if(newyear < year){
return newyear + '-' + TimeUtil.formatNumber(newmonth+1) + '-' + TimeUtil.formatNumber(newday);
}else if(newday < day){
if(time - newtime < 1000*60*60*24){
return "昨天" + TimeUtil.formatNumber(newDate.getHours()) + ':' + TimeUtil.formatNumber(newDate.getMinutes());
}else {
return TimeUtil.formatNumber(newmonth+1) + '-' + TimeUtil.formatNumber(newday);
}
}else{
if(time-newtime < 1000*60*60){
return parseInt((time-newtime)/1000/60) + '分鐘前';
}else {
return TimeUtil.formatNumber(newDate.getHours()) + ':' + TimeUtil.formatNumber(newDate.getMinutes());
}
}
}
})
4.效果
微信web開發(fā)工具,用起來有點坑,所以選擇的是其他的編輯器,然后用微信web開發(fā)工具編譯。另外界面并不美觀,畢竟不是為了好看。