微信小程序-仿知乎主题日报列表

本文主要是介绍微信小程序-仿知乎主题日报列表，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

这个篇文章继续带大家一起练习微信小程序的布局。

下面将会按照以下的顺序介绍：

网络请求的实现
工具类的实现
布局的实现
逻辑的实现
样式的实现

1.网络请求的实现

在js文件中通过Page()函数注册一个界面，然后在data定义一个theme对象，这个对象用来接收网络请求的结果，接着在onLoad（）函数中调用wx.request进行网络请求，请求成功的数据，赋值给data中的theme对象。

var URL_THEME='http://news-at.zhihu.com/api/4/theme/11';Page({data:{theme:{}},/*** 加载网络上的数据*/onLoad: function () {console.log('--onLoad--');var that=this;wx.request({url: URL_THEME,method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECTsuccess: function(res){that.setData({'theme': res.data})},fail: function() {},complete: function() {}})},}）

2.工具类的实现

修改utils文件中的util.js工具类，这个工具类是获取日期的工具类

function formatTime(date) {var year = date.getFullYear()var month = date.getMonth() + 1var day = date.getDate()return [year, month, day].map(formatNumber).join('/')}function formatNumber(n) {n = n.toString()return n[1] ? n : '0' + n}module.exports = {formatTime: formatTime}

工具类在Page()函数中使用,先通过require将工具类引入，然后在onLoad（）函数中调用工具类中的formatTime方法获取系统时间，并把时间赋值给data中的time变量。

var util = require('../../utils/util.js')...Page({data:{theme:{},time:"",},/*** 加载网络上的数据*/onLoad: function () {this.setData({'time': util.formatTime(new Date())})console.log('--onLoad--');var that=this;wx.request({............})},})

3.布局的实现

整个布局分类三部分：轮播图，今日热点，重复的item.

<!--轮播图--><swiper indicator-dots="true" autoplay="true" interval="4000" duration="2000"><block wx:for="{{theme.editors}}" wx:for-index="index"><swiper-item class="swiper-items"  ><image class="swiper-image" src="{{theme.image}}"></image></swiper-item></block></swiper><!--今日热点--><View class="view-tile" ><text class="view-tile-text">今日热点</text></View><!--每一个item--><block wx:for="{{theme.stories}}" wx:for-index="index"><View class="view-item "><block wx:for="{{item.images}}" wx:for-item="imgUrl" wx:for-index="index"><image wx:if="{{imgUrl!=null}}" class="imgClass" src="{{imgUrl}}" binderror="imageError"></image></block><View class="view-item-text "><text class="item-text-title">{{item.title}}</text><View class="view-item-text-time "><text class="item-text-time">{{time}}</text></View></View></View><View class="view-line" > </View></block>

4.逻辑的实现

1.引入了util.js工具，获取系统的时间，并把值赋值给time变量

2.实现网络强求，获取json字符，并把json字符窜的值赋值给theme这个对象

3.imageError监听图片的加载情况

var util = require('../../utils/util.js')var URL_THEME='http://news-at.zhihu.com/api/4/theme/11';Page({data:{theme:{},time:""},/*** 加载网络上的数据*/onLoad: function () {this.setData({'time': util.formatTime(new Date())})console.log('--onLoad--');var that=this;wx.request({url: URL_THEME,method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECTsuccess: function(res){that.setData({'theme': res.data})},fail: function() {},complete: function() {}})},/*** 监听图片加载*/imageError:function(e){console.log('image3发生error事件，携带值为', e.detail.errMsg)}})

5.样式的实现

/*今日热点的view的样式*/.view-tile{display: block;width: 100%;height: 25px;padding-top: 5px;background-color: ghostwhite;}/*每一个item的view的样式*/.view-item{display: flex;justify-content: center;align-items: center;flex-direction: row;}/*每一个item中文本的view的样式*/.view-item-text{display: flex;justify-content:center;align-items: flex-start;flex-direction: column;flex: 1;}/*每一个item中时间的view的样式*/.view-item-text-time{display: flex;justify-content:flex-end;align-items: flex-end;width: 100%;}/*分界线view的样式*/.view-line{width: 100%;height: 10px;background-color: gainsboro;}/*图片的样式*/.imgClass{width: 70px;height:70px;margin-bottom: 15px;margin-left: 15px;margin-top: 15px;border-radius: 50%;}/*今日热点的文字样式*/.view-tile-text{margin: 5px;}/*每一个item中文字的样式*/.item-text-title{/*规定文字显示两行，超过两行的使用省略号*/display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;word-break: break-all;overflow: hidden;font-size: 18px;margin-bottom: 15px;margin-top: 15px;margin-left: 15px;margin-right: 5px;}/*每一个item中时间的样式*/.item-text-time{color: gray;margin-right: 5px;margin-bottom: 5px;}