第三节：微信小程序模拟动态加载服务器返回json数据

上一节虽然完成了新闻的静态展示页面，但是实际开发中，数据通常是请求服务器返回的json数据，这时候就需要页面动态加载显示服务器返回的数据。

在完成的静态页面的代码上，需要做相应的修改，首先需要编写posts.js代码
- posts.js

/**index.js**/
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //这里模拟请求服务器动态返回的json数据
    var posts_content = [{
      date: "Nov 25 2017",
      title: "正是虾肥蟹壮时", 
      img: {
        post_img: "/images/crab.png",
        author_img: "/images/132.jpg"
      },
      img_condition: true,//配合页面上的wx:if来控制标签是否显示
      content: "地处黄海之滨的小城，在秋风的抚慰、秋阳的光照下，瞬间也喧嚣起来。任意走进城中的每一个菜市场，在显眼的位置上，冲入耳际的是此起彼伏的吆喝声，映入眼帘的是那些小商小贩们抢占有利地势将一只只塑料箱一字排开的情景。",
      view_num: "92",
      collect_num: "265"
    },
      {
        date: "Nov 27 2017",
        title: "白猫黑猫",
        img: {
          post_img: "/images/cat.png",
          author_img: "/images/132.jpg"
        },
        content: "白猫黑猫论是邓小平在20世纪60年代提出来的，该理论源自邓小平的一句话：“不管黑猫白猫，能捉老鼠的就是好猫”。这句话的意思是：无论计划经济还是市场经济，都只是一种资源配置手段，与政治制度无关。",
        view_num: "99",
        collect_num: "165"
      }]
    //相当于在页面初始化data里面设值
    this.setData({
      posts_key: posts_content});
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

因为之前了解过Android的一些知识，现在放在小程序上看是有点类似的。
在它的js方法里面，有onLoad，onReady，onShow，onHide，onUnload等代表了小程序页面的生命周期的方法。

现在来模拟这么一个场景，在onLoad的时候，小程序先服务器请求并返回了一个数组json数据，代表了上一节中的静态数据。这时候，this.setData({
posts_key: posts_content});相当于在页面的初始数据data上写入了key为posts_key的json数据。在页面上，我们就可以根据这些数据，动态循环显示。

• posts.wxml

<view>
  <swiper indicator-dots='true' autoplay='true'>
    <swiper-item>
      <image src='/images/xiaolong.jpg'></image>
    </swiper-item>
    <swiper-item>
      <image src='/images/vr.png'></image>
    </swiper-item>
    <swiper-item>
      <image src='/images/bl.png'></image>
    </swiper-item>
  </swiper>
  <block wx:for='{{posts_key}}' wx:for-item='item' wx:for-index='index'>
    <view class='posts-container'>
      <view class='posts-author-date'>
        <image wx:if='{{item.img_condition}}' src='{{item.img.author_img}}'></image>
        <text>{{item.date}}</text>
      </view>
      <text class='posts-title'>{{item.title}}</text>
      <image class='posts-image' src='{{item.img.post_img}}'></image>
      <text class='posts-content'>{{item.content}}</text>
      <view class='posts-like'>
        <image src='/images/icon/chat.png'></image>
        <text>{{item.view_num}}</text>
        <image src='/images/icon/view.png'></image>
        <text>{{item.collect_num}}</text>
      </view>
    </view>
  </block>
</view>

在之前写的posts.wxml静态代码中，图文信息部分明显是有重复代码的，用for循环可以循环展示返回的json数据，这样，就可以去掉下部分重复的view代码，在剩下的代码，用以下代码将图文信息的view包起来。

<block wx:for='{{posts_key}}' wx:for-item='item' wx:for-index='index'>

</block>

wx:for=’{{posts_key}}’,其中{{posts_key}}可以看到对应posts.js页面的key的值，这也是需要循环的内容；wx:for-item=’item’，item代表数组中的每一个对象；wx:for-index=’index’，index代表了当前的序号。
而数据的绑定使用 Mustache 语法（双大括号）将变量包起来，这样就能实现数据的动态展示。

值得注意的是，在标签中写入wx:if=’{{item.img_condition}}’时，可以根据后台获取的布尔数据true或false，决定该标签是否显示。

更多详细的用法，参考微信小程序框架部分的文档：

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/MINA.html

最后，将完成的两个页面做一个跳转，在点击“开启小程序之旅”的时候跳转到新闻页面。

• index.wxml

<!--index.wxml-->
<view class="container">
  <view class="userinfo">
  <image class="userinfo-avatar" src="/images/132.jpg"                background-size="cover"></image>
    <text class="userinfo-nickname">Hello，晨曦</text>
  </view>
  <view class='motto' bindtap='onTap'>
    <text class="usermotto"> 开启小程序之旅 </text>
  </view>
</view>

也就是在开启小程序之旅所在的view标签上增加一个tap事件。

在微信小程序中，事件的前面都需要加上bind或者catch，两者的区别涉及到js的冒泡事件，而开发中一般使用bind

• index.js

/**index.js**/
Page({
  onTap: function(){
    wx.redirectTo({//跳转的方法
      url: '/pages/posts/posts'
    });
  }
})

这样，两个页面就连接起来了。