1月9号微信小程序正是上线,在网上尝试了一下,发现很厉害。所以研究了一下。
下面是我的demo:
包含四个页面:news.js/news.wxss/news.json/news.wxml
1.news.wxml:
<scroll-view class="news_banner">
<!-- wx:for类似于el表达式 -->
<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">
<!-- data-* 保存数据的属性,组件触发事件时,会将数据发送给事件处理函数-->
<!-- bind* 组件的事件,bindtap="newsClick"点击事件-->
<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();
//引用外部文件(需要暴露util.js里面的formatNumber()函数)
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() {
// 页面相关事件处理函数--监听用户下拉动作
// maxId初始化
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);
},
/**
* loadType 0,初始化/切换新闻类目 1,上拉刷新 2,下拉加载数据
*/
loadNews: function(loadType){
var that = this;
wx.request({
url: '此处是查询新闻信息的接口',
data: {
format : 'json',
maxId : this.data.maxId,
categoryId : this.data.cateid,
pageCounts : 10
},
method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
// header: {}, // 设置请求的 header
success: function(res){
var newsData = res.data;
//当数据存在时
if(newsData.total > 0){
var newInfoList = newsData.data;
var today = new Date();
//日期以及title长度处理
for(var i in newInfoList){
//日期处理
newInfoList[i].CreatTime = that.operateDate(today,newInfoList[i].CreatTime);
//长度处理
//var title = newInfoList[i].Title;
//if(title.length>76){
//newInfoList[i].Title = title.substrings(0,73) + '...';
//newInfoList[i].Title = title.substring(0,73) + '...';
//}
}
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() {
// fail
},
complete: function() {
// complete
}
})
},
newsClick: function(e){
//dataset内包含data-*的数据
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){ //同年不同天
//24小时以内
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{
//1小时以内
if(time-newtime < 1000*60*60){
return parseInt((time-newtime)/1000/60) + '分钟前';
}else {
return TimeUtil.formatNumber(newDate.getHours()) + ':' + TimeUtil.formatNumber(newDate.getMinutes());
}
}
}
})
3.CSS
view {
overflow: hidden;
}
.news_banner {
background: #ffffff;
background-image: url(../images/line.png);
position: fixed;
top: -1rpx;
z-index: 20;
overflow: auto;
white-space:nowrap;
}
.news_banner_text {
font-size: 30rpx;
padding-left: 3rpx;
padding-right: 3rpx;
text-align: center;
display: inline-block;
width: 90rpx;
}
.news_banner_text text {
font-size: 30rpx;
font-family: '黑体','Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
display: block;
}
.select {
border-bottom: 4rpx solid #3dace9;
}
.news {
margin-top: 56rpx;
width: 100%;
}
.news_list {
width: 100%;
border-bottom: 1rpx solid #bcbcbc;
padding-top: 15rpx;
}
.news_left {
width: 220rpx;
float: left;
position: relative;
}
.news_left image {
width: 220rpx;
height: 165rpx;
}
.news_date{
width: 220rpx;
font-size: 20rpx;
color: #ffffff;
display: block;
position: absolute;
bottom: 0px;
opacity: 0.6;
background-color: #000000;
text-align: center;
}
.news_right {
padding-left: 12rpx;
width: 518rpx;
float: left;
}
.news_right text {
margin-top: 15rpx;
margin-bottom: 15rpx;
}
/*处理字符串过长的展示*/
.news_text {
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
overflow: hidden;
}
.news_title {
width: 95%;
font-size: 26rpx;
font-weight:bold;
line-height: 30rpx;
color: #828282;
}
.news_subTitle {
width: 98%;
display: block;
font-size: 26rpx;
color: #323232;
line-height: 30rpx;
}
.news_data{
width: 98%;
font-size: 20rpx;
color: #323232;
text-align: right;
}
4.效果
微信web开发工具,用起来有点坑,所以选择的是其他的编辑器,然后用微信web开发工具编译。另外界面并不美观,毕竟不是为了好看。