1月9號(hào)微信小程序正是上線(xiàn)，在網(wǎng)上嘗試了一下，發(fā)現(xiàn)很厲害。所以研究了一下。

下面是我的demo: 
包含四個(gè)頁(yè)面:news.js/news.wxss/news.json/news.wxml

1.news.wxml：

<scroll-view class="news_banner">
    <!-- wx:for類(lèi)似于el表達(dá)式 -->
    <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-* 保存數(shù)據(jù)的屬性,組件觸發(fā)事件時(shí),會(huì)將數(shù)據(jù)發(fā)送給事件處理函數(shù)-->
    <!-- bind* 組件的事件,bindtap="newsClick"點(diǎn)擊事件-->
    <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>來(lái)源:{{item.Source}}</text>         
            </view>
        </view>
    </view>
</view>

2.news.js

var app = getApp();
//引用外部文件（需要暴露util.js里面的formatNumber()函數(shù)）
var TimeUtil = require('../../utils/util.js');
var bannerList = [
    {'cateid':12134,'catename':'職場(chǎng)','show':false},
    {'cateid':12235,'catename':'政治','show':false},
    {'cateid':122316,'catename':'經(jīng)濟(jì)','show':false},
    {'cateid':112317,'catename':'文化','show':false},
    {'cateid':123228,'catename':'生活','show':false},
]
Page({
  data : {
  },
  onLoad: function(options){
    //初始化相關(guān)參數(shù)
    this.setData({
        maxId : 0,
        cateid : 0,
        selections : bannerList
    })
    this.loadNews(0);
  },
  onReady:function(){
    // 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成
  },
  onShow:function(){
    // 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
  },
  onHide:function(){
    // 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏
  },
  onUnload:function(){
    // 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載
  },
  onPullDownRefresh: function() {
    // 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶(hù)下拉動(dòng)作
    // maxId初始化
    this.setData({
        maxId : 0
    });
    下拉加載新聞
    this.loadNews(0);
  },
  onReachBottom: function() {
    // 頁(yè)面上拉觸底事件的處理函數(shù)
    this.loadNews(2)
  },
  bannerClick: function(e){
      //刷新新聞?lì)惸?/span>
      var dataset = e.currentTarget.dataset;
      for(var i in bannerList){
          bannerList[i].show = false;
      }
      bannerList[dataset.idx].show = true;
      // 數(shù)據(jù)是雙向綁定,直接更新對(duì)應(yīng)數(shù)據(jù),頁(yè)面會(huì)加載新數(shù)據(jù)
      // 新聞?lì)惸壳袚Q
      this.setData({
          cateid : dataset.cid,
          maxId : 0,
          selections : bannerList
      })
      this.loadNews(1);
  },
  /**
   * loadType 0,初始化/切換新聞?lì)惸?1,上拉刷新 2,下拉加載數(shù)據(jù)
   */
  loadNews: function(loadType){
      var that = this;
      wx.request({
        url: '此處是查詢(xún)新聞信息的接口',
        data: {
          format : 'json',
          maxId : this.data.maxId,
          categoryId : this.data.cateid,
          pageCounts : 10
        },
        method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
            // header: {}, // 設(shè)置請(qǐng)求的 header
        success: function(res){
            var newsData = res.data;
            //當(dāng)數(shù)據(jù)存在時(shí)
            if(newsData.total > 0){
                var newInfoList = newsData.data;
                var today = new Date();
                //日期以及title長(zhǎng)度處理
                for(var i in newInfoList){
                    //日期處理
                    newInfoList[i].CreatTime = that.operateDate(today,newInfoList[i].CreatTime);
                    //長(zhǎng)度處理
                    //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;
                //下拉刷新,新增數(shù)據(jù)
                if(loadType == 2){
                    for(var i in newInfoList){
                        newList.push(newInfoList[i]);
                    }
                }else{
                    newList = newInfoList;
                }
                //數(shù)據(jù)展示
                that.setData({
                    newsList : newList,
                    maxId : newInfoList[9].NewsId
                })
            }
        },
        fail: function() {
              // fail
        },
        complete: function() {
              // complete
        }
    })
  },
  newsClick: function(e){
          //dataset內(nèi)包含data-*的數(shù)據(jù)
        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();
      //新聞時(shí)間
      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小時(shí)以?xún)?nèi)
          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小時(shí)以?xún)?nèi)
          if(time-newtime < 1000*60*60){
              return parseInt((time-newtime)/1000/60) + '分鐘前';
          }else {
              return TimeUtil.formatNumber(newDate.getHours()) + ':' + TimeUtil.formatNumber(newDate.getMinutes());
          }
      }
  }
})

4.效果

  微信web開(kāi)發(fā)工具,用起來(lái)有點(diǎn)坑,所以選擇的是其他的編輯器,然后用微信web開(kāi)發(fā)工具編譯。另外界面并不美觀(guān)，畢竟不是為了好看。