1月9號(hào)微信小程序正是上線，在網(wǎng)上嘗試了一下，發(fā)現(xiàn)很厲害。所以研究了一下。

下面是我的demo:
包含四個(gè)頁(yè)面:news.js/news.wxss/news.json/news.wxml

1.news.wxml：

<scroll-view class="news_banner"><!-- wx:for類(lèi)似于el表達(dá)式 --><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-* 保存數(shù)據(jù)的屬性,組件觸發(fā)事件時(shí),會(huì)將數(shù)據(jù)發(fā)送給事件處理函數(shù)--><!-- bind* 組件的事件,bindtap="newsClick"點(diǎn)擊事件--><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>來(lái)源:{{item.Source}}</text> </view></view></view> </view>

2.news.js

var app = getApp(); //引用外部文件（需要暴露util.js里面的formatNumber()函數(shù)） var TimeUtil = require('../../utils/util.js'); var bannerList = [{'cateid':12134,'catename':'職場(chǎng)','show':false},{'cateid':12235,'catename':'政治','show':false},{'cateid':122316,'catename':'經(jīng)濟(jì)','show':false},{'cateid':112317,'catename':'文化','show':false},{'cateid':123228,'catename':'生活','show':false}, ] Page({data : {},onLoad: function(options){//初始化相關(guān)參數(shù)this.setData({maxId : 0,cateid : 0,selections : bannerList})this.loadNews(0);},onReady:function(){// 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成},onShow:function(){// 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示},onHide:function(){// 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏},onUnload:function(){// 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載},onPullDownRefresh: function() {// 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶(hù)下拉動(dòng)作// maxId初始化this.setData({maxId : 0});下拉加載新聞this.loadNews(0);},onReachBottom: function() {// 頁(yè)面上拉觸底事件的處理函數(shù)this.loadNews(2)},bannerClick: function(e){//刷新新聞?lì)惸?/span>var dataset = e.currentTarget.dataset;for(var i in bannerList){bannerList[i].show = false;}bannerList[dataset.idx].show = true;// 數(shù)據(jù)是雙向綁定,直接更新對(duì)應(yīng)數(shù)據(jù),頁(yè)面會(huì)加載新數(shù)據(jù)// 新聞?lì)惸壳袚Qthis.setData({cateid : dataset.cid,maxId : 0,selections : bannerList})this.loadNews(1);},/*** loadType 0,初始化/切換新聞?lì)惸?1,上拉刷新 2,下拉加載數(shù)據(jù)*/loadNews: function(loadType){var that = this;wx.request({url: '此處是查詢(xún)新聞信息的接口',data: {format : 'json',maxId : this.data.maxId,categoryId : this.data.cateid,pageCounts : 10},method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT// header: {}, // 設(shè)置請(qǐng)求的 headersuccess: function(res){var newsData = res.data;//當(dāng)數(shù)據(jù)存在時(shí)if(newsData.total > 0){var newInfoList = newsData.data;var today = new Date();//日期以及title長(zhǎng)度處理for(var i in newInfoList){//日期處理newInfoList[i].CreatTime = that.operateDate(today,newInfoList[i].CreatTime);//長(zhǎng)度處理//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;//下拉刷新,新增數(shù)據(jù)if(loadType == 2){for(var i in newInfoList){newList.push(newInfoList[i]);}}else{newList = newInfoList;}//數(shù)據(jù)展示that.setData({newsList : newList,maxId : newInfoList[9].NewsId})}},fail: function() {// fail},complete: function() {// complete}})},newsClick: function(e){//dataset內(nèi)包含data-*的數(shù)據(jù)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();//新聞時(shí)間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小時(shí)以?xún)?nèi)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小時(shí)以?xún)?nèi)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; } /*處理字符串過(guò)長(zhǎng)的展示*/ .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開(kāi)發(fā)工具,用起來(lái)有點(diǎn)坑,所以選擇的是其他的編輯器,然后用微信web開(kāi)發(fā)工具編譯。另外界面并不美觀，畢竟不是為了好看。

總結(jié)

以上是生活随笔為你收集整理的微信小程序demo(新闻类)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。