微信小程序系列5（网络请求demo）

首先来看一下效果

love.xml布局,这里做了一个循环item

wx:for在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item
使用 wx:for-item 可以指定数组当前元素的变量名，
使用 wx:for-index 可以指定数组当前下标的变量名：

<!--pages/love/love.wxml-->
<view class="list">
  <block wx:for="{{list}}" wx:key="{{item.id}}">
    <view class="list-item">
      <text class="title">{{item.title}}</text>
      <text class="detail">{{item.content}}</text>
    </view>
  </block>
</view>

love.js逻辑处理页面,这里做了一个网络请求,同时也测试了一下下拉刷新回调

Page({
  data: {
    list: []
  },
  //初始化加载数据
  onLoad: function () {
    this.getStorys(0)
  },

  //下拉刷新更新数据
  onPullDownRefresh: function () {
    this.getStorys(1)
  },

  /**
   * 获取开心一刻列表数据
   */
  getStorys: function (type) {
    //打开菊花
    if (type == 0) {
      wx.showLoading({
        title: '加载中',
      })
    }
    //success回调this作用域更新不了外面的数据,所以保存当前this
    var that = this
    wx.request({
      url: 'http://shop.honaf.com/story',
      method: 'get',
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      success: function (res) {
        if (res.data.status == 1) {
          var storys = res.data.data
          for (var i = 0; i < storys.length; i++) {
            storys[i]['content'] = storys[i]['content'].slice(0, 30) + '...';
          }
          //重新渲染页面
          that.setData({
            list: storys
          })
        }
      },
      fail: function () {
        wx.showToast({
          title: '服务器异常',
          duration: 1500
        })
      },
      complete: function () {
        //关闭菊花
        if (type == 0) {
          wx.hideLoading()
        } else {
          wx.stopPullDownRefresh()
        }
      }
    })
  },

})

love.json配置信息

{
  "enablePullDownRefresh": true,
  "navigationBarTitleText": "开心一刻"
}

love.wxss页面用到的样式

/* pages/love/love.wxss */
.list {
  display: flex;
  flex-direction: column;
}

.list-item {
  display: flex;
  flex-direction: column;
  margin: 15rpx;
  background-color: #fff;
  border-radius: 10rpx;
  /*align-items: center;*/
  padding: 15rpx;
}

.title {
  color: black;
  font-size: 18px
}

.detail {
  color:darkblue;
  font-size: 14px;
}