微信小程序demo(新闻类)

原创 2017年07月25日 10:02:28

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

微信小程序实战--基于微信小程序的新闻客户端

wechat-newsapp 简介:这是一个新闻客户端的小程序版本,当然不能跟网易、腾讯之类的新闻客户端相比,这只是一个比较简易的版本。 注:11月3日微信已经开始了小程序的公测,所以下面的IDE...
  • u012285967
  • u012285967
  • 2016年11月04日 17:56
  • 1597

仿微信的ListView item可左右滑动效果

  • 2015年03月06日 19:26
  • 1.48MB
  • 下载

微信小程序-仿QQ

  • 2017年11月21日 15:51
  • 405KB
  • 下载

微信小程序demo(新闻类)

1月9号微信小程序正是上线,在网上尝试了一下,发现很厉害。所以研究了一下。下面是我的demo: 包含四个页面:news.js/news.wxss/news.json/news.wxml1.n...
  • u010018421
  • u010018421
  • 2017年01月19日 17:31
  • 4288

微信小程序开源Demo精选

来自:http://www.jianshu.com/p/0ecf5aba79e1 1. 仿QQ应用程序(#社交 #聊天 #SNS) 地址:https://github.com/xie...
  • kenkao
  • kenkao
  • 2016年12月30日 14:49
  • 17272

微信小程序项目案例及Demo

WeCat-微信小程序 板块:首页 :微信精选 资讯 : 新闻资讯 工具 : 生活常用小工具 猫窝 : 站长工具 项目说明 基于聚合数据提供的一些免费API实现。集成了微信精选阅读,...
  • hicoldcat
  • hicoldcat
  • 2017年01月06日 13:20
  • 1700

微信小程序demo(新闻类)

1月9号微信小程序正是上线,在网上尝试了一下,发现很厉害。所以研究了一下。下面是我的demo: 包含四个页面:news.js/news.wxss/news.json/news.wxml1.n...
  • u010018421
  • u010018421
  • 2017年01月19日 17:31
  • 4288

微信小程序实战--基于微信小程序的新闻客户端

wechat-newsapp 简介:这是一个新闻客户端的小程序版本,当然不能跟网易、腾讯之类的新闻客户端相比,这只是一个比较简易的版本。 注:11月3日微信已经开始了小程序的公测,所以下面的IDE...
  • u012285967
  • u012285967
  • 2016年11月04日 17:56
  • 1597

微信小程序(应用号)开发新闻客户端的实战课程

本实例将演示从零开发一个微信应用号的过程,页面轮播与跳转传值,实现单元格自定义布局,全部源码可通过github下载。...
  • ishxiao
  • ishxiao
  • 2016年09月28日 10:38
  • 1692

微信小程序入门-新闻列表

前言前面已经完成欢迎页面的编写,下面将写一个新闻页面,主要包含导航栏,轮播图,新闻列表,包含的技术主要有swiper组件的使用。为了方便代码的管理,把之前的代码同步到github上,在这基础上写新闻列...
  • xiaofengwu123
  • xiaofengwu123
  • 2017年01月18日 20:54
  • 2792
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:微信小程序demo(新闻类)
举报原因:
原因补充:

(最多只允许输入30个字)