微信小程序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: {}, // 设置请求的 headersuccess: 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开发工具编译。另外界面并不美观，毕竟不是为了好看。

微信小程序demo(新闻类)相关推荐

微信小程序调用新闻类API
做过微信小程序的伙伴都知道,当我们需要实现一个小程序中类似于新闻资讯的功能时,需要我们调用一个外部实时更新的新闻数据接口,从而将数据展示在我们的手机页面上.那么我们该如何实现这个功能呢?下面我们来实现 ...
java小程序贪吃蛇代码_微信小程序Demo之贪食蛇
原标题:微信小程序Demo之贪食蛇差不多大半年前,笔者发布了一篇关于OC版贪食蛇开发的文章,时隔多月,微信小程序横空出世,于是闲来无事的我又写了一个小程序版. 01页面布局关于小程序笔者就不做介绍 ...
微信小程序编写新闻阅读列表
微信小程序编写新闻阅读列表本篇学习主要内容 Swiper 组件(轮播图) App.json 里的关于导航栏.标题的配置. Page 页面与应用程序的生命周期数据绑定(核心知识) 数据绑定的运算与逻 ...
基于腾讯云开发微信小程序（新闻发布及共享平台）上
基于腾讯云开发微信小程序(新闻发布及共享平台)上文章目录传统的微信小程序开发一.云开发是什么? 二.使用步骤 1.创建云环境 2.云数据库的创建 3.云储存 4.云函数总结传统的小程序开发 ...
微信小程序开发-新闻列表之新闻列表绑定
微信小程序开发-新闻列表之新闻列表绑定开发教程: 1.效果图预览 2.准备工作在拿到效果图后不要先急着去写代码,而是要去分析一下页面的整体结构,用什么方式定位和布局.小程序里建议使用flex布局,因 ...
最全微信小程序demo
wx-gesture-lock 微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 sh ...
微信小程序添加社交类目
微信小程序添加社交类目,需要上传<非经营性互联网信息服务备案核准>即icp备案文件可以通过https://beian.miit.gov.cn/#/search/info查询
微信小程序搭建新闻列表(跟进上一篇博客案例)
本文旨在完善上一篇博客案例后台接口文档主要会用到的新语法罗列[ {发送请求篇:微信小程序如何向后端发送请求}, {页面跳转传递参数和接收参数:微信小程序页面跳转和接收参数}, {修改data中变量 ...
小程序和vue语法对比_React语法开发微信小程序 Demo
前言从16年微信小程序内测的时候至今,微信小程序用实践证明了自己的创新和价值,微信小程序的规则也在社区的影响下变得更加完善. 但是不得不说,用惯了VSCode,官方的开发工具确实不怎么好用.之前没有 ...
微信小程序初探【类微信UI聊天简单实现】
微信小程序最近很火,火到什么程度,只要你一打开微信,就是它的身影,几乎你用的各个APP都可以在微信中找到它的复制版,另外官方自带的跳一跳更是将它推到了空前至高的位置.对比公众号,就我的感觉来说,有以下 ...

微信小程序demo(新闻类)

1.news.wxml：

2.news.js

3.CSS

4.效果

微信小程序demo(新闻类)相关推荐

最新文章

热门文章