关闭

微信小程序demo(新闻类)

标签: 微信小程序
560人阅读 评论(0) 收藏 举报
分类:
http://blog.csdn.net/u010018421/article/details/54618216

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>
  • 1

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());
          }
      }
  }
})
  • 1

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;
}
  • 1

4.效果

这是效果图
微信web开发工具,用起来有点坑,所以选择的是其他的编辑器,然后用微信web开发工具编译。另外界面并不美观,毕竟不是为了好看。

0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

微信小程序demo(新闻类)

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

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

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

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

前言前面已经完成欢迎页面的编写,下面将写一个新闻页面,主要包含导航栏,轮播图,新闻列表,包含的技术主要有swiper组件的使用。为了方便代码的管理,把之前的代码同步到github上,在这基础上写新闻列...
  • xiaofengwu123
  • xiaofengwu123
  • 2017-01-18 20:54
  • 2784

微信小程序demo(新闻类)

微信小程序demo(新闻类)
  • qq_38125123
  • qq_38125123
  • 2017-07-25 10:02
  • 976

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

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

微信小程序和用网易新闻api实现自己的微信小程序

每次因为看见别人写的新东西,自己就也想做一个,不知道是不是一个好习惯哎。微信小程序已经出来很久了,最近才开始学了一点皮毛,做了个小东西,用到了网易新闻接口,实现了小程序上的新闻浏览。但是很遗憾没有通过...
  • Picking_up_stones
  • Picking_up_stones
  • 2017-05-09 23:31
  • 1862

微信小程序< 2 > ~ 微信小程序之头条新闻

简介上一篇文章,主要是介绍下微信小程序的开发环境安装和微信组件什么的一些基础的开发内容,所以最近一直在业余找练手的机会。由于之前没有接触过JS,自己学习起来还算是比较的吃力,一点一点的来吧!要持久。先...
  • poorkick
  • poorkick
  • 2017-01-05 14:32
  • 745

微信小程序demo:九猫大百货:商城类demo

本demo仅为学习研究用,禁止侵犯制作者权益或者用于商业用途;功能基本完善,但是并未完全完善;   项目地址及下载: 本帖隐藏的内容 https://github.com/w8...
  • sinat_17775997
  • sinat_17775997
  • 2017-03-12 12:50
  • 1461

基于微信小程序开发的demo

先上开源地址: https://github.com/liujians/weapp 最近一直在研究微信小程序,跟随互联网新闻的热潮 从9月29日开发到现在,也算是把大部分API和组件...
  • sinat_17775997
  • sinat_17775997
  • 2016-10-19 15:15
  • 1894

微信小程序开源Demo精选

来自:http://www.jianshu.com/p/0ecf5aba79e1 1. 仿QQ应用程序(#社交 #聊天 #SNS) 地址:https://github.com/xie...
  • kenkao
  • kenkao
  • 2016-12-30 14:49
  • 17243
    个人资料
    • 访问:314147次
    • 积分:4476
    • 等级:
    • 排名:第7738名
    • 原创:102篇
    • 转载:305篇
    • 译文:0篇
    • 评论:86条
    最新评论