微信小程序demo(新闻类)

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开发工具编译。另外界面并不美观，毕竟不是为了好看。