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(新闻类)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。