微信小程序demo(新闻类)

来源：互联网发布：我是皇玉玺进阶数据编辑：程序博客网时间：2024/05/17 02:10

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

阅读全文

11 0