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

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

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

1. 网络请求的实现

2. 工具类的实现

3. 布局的实现

4. 逻辑的实现

5. 样式的实现

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, CONNECT
              success: 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() + 1
      var 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, CONNECT
              success: 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;
    }

5.效果图

图片空白处是图片加载失败，这个原因暂时还没有解决。