小程序开发九：动态首页Home的网络请求和数据加载

上一节我们介绍了首页的数据绑定，但依然是以假数据的方式来呈现，到了这里，我们将实现动态的加载数据来呈现视图

传送门：

---

本节重点：动态数据绑定

思路分析：
在页面中的每条动态，我们都可以视为一个对象{} , 那么页面中不可能至于一条动态，所以整个页面中，我们定义一个数组的对象，用来接收从服务器获取所有的动态数据，并且进行分配下去，这样就可以展现了。

首先我们在home.js中定义一个空的数组对象“dynamicList”

data: {
    //定义空的数组对象,用来接收从服务器获取的帖子数据
    dynamicList : {}
  },

这里要用网络请求，所以引入“request”的公用的js文件

var requestTool = require("../../utils/request.js") ;

然后我们再定义一个获取数据的函数方法

/**
   * 获取动态列表
   */
  getDynamicListData:function(){
    
    var pathUrl = "/dynamic/page";//请求的参数
    var paraData = {
      size: "10"//一次获取10条数据
    }
    var that = this;//*有回调的地方，记得这样写*为了防止指针指向错误
   requestTool.getRequest(pathUrl, paraData, that.getSuccess, that.getFailed);
  },

  //请求成功的回调参数
  getSuccess:function(data){
    var datas = data;
    var getList = [];
    for(var idx in data.items){
      if(idx > 9){
        break;
      }
      var obj = data.items[idx];
      var dynamicData = obj;
     //这里获取到的日期为时间戳，暂时不做处理，先写死日期，后面再处理
      dynamicData["postDate"] = '2019-09-23';
      getList.push(dynamicData);

    }
    //获取数据后，再次进行数据绑定，这里的操作，会即刻刷新所有绑定了数据的view，即获取到数据后，页面上进行数据填充
    this.setData({
      dynamicList: getList
    });
  },
  //请求失败的回调
  getFailed:function(){
    console.log("qingqiu 失败");
  },

然后我们在onLoad中调用上面的getDynamicListData函数方法：

onLoad: function (options) {
    //从服务器获取数据
    this.getDynamicListData();
  },

编译程序，发现并没有出现正确的显示情况

image.png

查找原因：

1.首先我们来看下是否网络请求成功

image.png

我们发现我们确实从服务器获取到了4条数据，
并且我们将其中一条数据打印显示：

_id :   5de0c096a4a1ef0d19767860
        
user_id :   120207
        
type    :   0
        
status  :   1
        
url :   https://dl.kuwyw.com//tmp/wx644a35bb10d6f345.o6zAJs0O18ah0HvK74PZQvQ3wdvw.KJHOj6VUv1xi249fc60c5edcc34bec139f0d35d4e6ac.png?imageView2/0/q/25|imageslim
        
text    :   人生得意须尽欢 莫使金樽空对月
        
timestamp   :   1575010454149
        
up_count    :   1
        
share_count :   0
        
view_count  :   0
        
comment_count   :   2
        
format  :   https://dl.kuwyw.com//tmp/wx644a35bb10d6f345.o6zAJs0O18ah0HvK74PZQvQ3wdvw.KJHOj6VUv1xi249fc60c5edcc34bec139f0d35d4e6ac.png
        
recommend   :   0
        
is_up   :       false
        
nick_name   :   ice
        
avatar  :   http://pso3htid6.bkt.clouddn.com/defultAvatar.jpg
        
age :   18
        
sex :   0

这里代表网络请求是成功的，

2.数据绑定
我们发现在js中，我们成功的绑定了“dynamicList”的数据，但是我们发现在home.wxml中，我们并没有用到此数据，

接下来我们对home.wxml进行修改：

<view class="innerContainer">
  <block wx:for="{{dynamicList}}">//这里我们用for循环进行数据绑定，即请求到了多少条数据，我们就创建多少个view，并且单个地显示数据
    <view class="dynamicContainer">

      <view class="dynamicTopView">
        <image class="userAvatar" mode="aspectFill" src="{{avatar}}"></image>
        <view class="userNick-postDate">
          <text class="userNick">{{nickName}}</text>
          <text class="postDate">{{postDate}}</text>
        </view>
        <image src="/images/home/moreIcon.png" class="moreIcon"></image>
      </view>

      <text class="contentText"></text>{{content}}

      <image class="contentImg" mode="aspectFill" src="{{contentImage}}"></image>

      <view class="dynamicBottomView">
        <image class="favoriteIcon" src="/images/home/xin.png" mode="aspectFit"></image>
        <text class="favoriteCount">{{likeCount}}</text>
        <image class="commentIcon" src="/images/home/pinglun.png"></image>
        <text class="commentCount">{{commentCount}}</text>
      </view>

      <view class="bottomLine"></view>

    </view>

  </block>

强调说明：

在wxml中绑定的数据的名称，必须 必须 必须和js文件中的字段名称保持一致，如在js文件中的昵称字段为nick_name，那么在wxml中必须也是nick_name，那么我们根据上面请求到的数据结构和具体参数，修改下wxml中绑定的字段名

<view class="innerContainer">

 <block wx:for = "{{dynamicList}}" wx:for-item  = "dynamic">
<view class="dynamicContainer">
    <view class="dynamicTopView">

      <image class="userAvatar" src="{{dynamic.avatar}}" mode="aspectFill"></image>
      <view class="userNick-postDate">
        <text class="userNick" >{{dynamic.nick_name}}</text>
        <text class="postDate">{{dynamic.postDate}}</text>
      </view>
      <image src="/images/home/moreIcon.png" class="moreIcon" ></image>

    </view>
    <text class="contentText">{{dynamic.text}}</text>
    <image class="contentImg"  mode="aspectFill" src="{{dynamic.url}}"></image>
    <view class="dynamicBottomView">

     <image class="favoriteIcon" src="{{dynamic.is_up?'/images/home/love.png' :'/images/home/xin.png'}}" catchtap="upUserTap" mode="aspectFit"  ></image>

     

      <text class="favoriteCount">{{dynamic.up_count}}</text>
      <image class="commentIcon" src="/images/home/pinglun.png"></image>
      <text class="commentCount">{{dynamic.comment_count}}</text>
    </view>
    <view class="bottomLine"></view>


  </view>
 <block wx:for = "{{dynamicList}}" wx:for-item  = "dynamic">

</view>

接下来 我们再次编译运行

image.png

总结：

数据的绑定这块，.js中申请的数据变量和.wxml中绑定的数据变量名称必须保持一致；

下一节：为大家介绍template的使用，

传送门：
十：动态首页Home的模板Template介绍和使用