微信小程序之数据绑定的妙用！

大四写的小程序记录的笔记，刚从博客园迁移过来，写的很粗糙，后续再整理！

<view>
  <swiper indicator-dots="true" autoplay="ture" interval="5000">
    <swiper-item>
      <image src="/images/swiper3.jpeg"> </image>
    </swiper-item>
    <swiper-item>
      <image src="/images/swiper2.jpeg"></image>
    </swiper-item>
    <swiper-item>
      <image src="/images/swiper1.jpeg"></image>
    </swiper-item>
  </swiper>

  <block wx:for="{{posts_key}}" wx:for-item="item">
    <!--block用来将包裹的代码变成一个整理,item代表一个子元素，用item.xxx的方法来进行一个单一元素绑定-->
    <view class="post-container">
      <view class="post-author-date">
        <!-常见的一列四行布局-->
        <image class="post-author" src="{{item.author_img}}"></image>
        <text class="post-date">{{item.date}}</text>
      </view>
      <view>
        <text class="post-title">{{item.title}}</text>
        <image class="post-image" src="{{item.post_img}}"></image>
        <text class="post-content">{{item.content}}</text>
      </view>
      <view class="post-like">
        <image class="post-like-image" src="../../images/icon/star.png"></image>
        <text class="post-like-font">{{item.view_num}}</text>
        <image class="post-like-image" src="../../images/icon/view.png"></image>
        <text class="post-like-font">{{item.collect_num}}</text>
      </view>
    </view>
  </block>
</view>

var postsData = require('../../data/posts-data.js')

Page({
data: {
//小程序总是会读取 data 对象下面来做数据绑定，这个动作我们称为动作 A
//而 A 的执行，是在 onLoad 事件执行之后发生的
},
/\*_ 生命周期函数--监听页面加载_/
onLoad: function (options) {
//页面初始化 options 为页面跳转所带来的参数

    //要把前面绑定的wxml中wx:for="{{posts_key}}"再改成postList

    //下面这种方法要把wxml中改成wx:for="{{posts_key}}"
    //用数组的形式来绑定多个新闻块的内容，利用for循环来反复调用后台数据
    this.setData({
       posts_key:postsData.postList //渲染到对应data中就是posts_key:[]
       });

}
})

var local_database = [
  {
    author_img: "/images/Catoon5.jpg",
    date: "May 8 2018",
    post_img: "/images/Catoon50.jpeg",
    title:
      "以色列总理用“鞋”招待安倍，日外交官：这是冒犯，不知道我们进门都要脱鞋？",
    content:
      "“日本首相觉得内塔尼亚胡家中鞋子上的甜点冒犯了他，”《以色列时报》7 日报道称，日本首相安倍晋三上周对以色列进行正式访问，以色列总理内塔尼亚胡在官邸设宴招待来访的安倍夫妇时，官邸厨子却用鞋形餐具盛放甜点，这被视为“外交失礼”，对安倍的怠慢与侮辱。该报称，按照日本家庭文化，鞋子不仅远离桌子，而且还得脱了置于门外。",
    view_num: "192",
    collect_num: "9668"
  },
  {
    author_img: "/images/Catoon1.jpg",
    date: "May 8 2018",
    post_img: "/images/Catoon10.jpeg",
    title: "欧文惨遭伤病",
    content:
      "欧文已经因为膝盖酸痛问题休战了十几天，这个伤对他来说其实是老问题了。在绿军公布决定之后，骑士随队记者乔-瓦尔登也在专栏中讨论了欧文膝伤的来龙去脉。",
    view_num: "92",
    collect_num: "189"
  },
  {
    author_img: "/images/Catoon2.jpg",
    date: "May 8 2018",
    post_img: "/images/Catoon20.jpeg",
    title: "骑士胜券在握詹姆斯打懵猛龙，骑士球迷却倒戈支持起了猛龙",
    content:
      "要说联盟中哪支球队最命苦，那猛龙绝对当仁不让，要数哪个球员最心酸，那德罗赞绝对让人心疼。猛龙被骑士打的毫无还手之力，上赛季半决赛被骑士 4-0 横扫后，这赛季历史又惊人的相似，猛龙在半决赛中又被打的惨不忍睹。如果上赛季东部第三的猛龙被当时还拥有欧文的东部第二骑士打败还情有可原；那这赛季卷土重来，以东部榜首的姿态杀入季后赛的猛龙面对整个赛季都在动荡中挣扎的骑士又被打成这样，确实是让人感到有些扼腕。",
    view_num: "192",
    collect_num: "9668"
  },
  {
    author_img: "/images/Catoon3.jpg",
    date: "May 8 2018",
    post_img: "/images/Catoon30.jpeg",
    title: "陈冠希首谈意外怀孕产下的女儿,陈冠希首谈意外怀孕产下的女儿",
    content:
      "近日，陈冠希在个人社交网站上发了一张女儿在沙滩上玩的照片，照片中 alaia 带着帽子，穿着吊带露肩装真是太可爱太萌了！老爸陈冠希还附言：priceless！知道什么意思吗？这是在说女儿是他的无价之宝！网友听了纷纷夸赞，都哑口无言了！",
    view_num: "232",
    collect_num: "7668"
  },
  {
    author_img: "/images/Catoon4.jpg",
    date: "May 8 2018",
    post_img: "/images/Catoon40.jpg",
    title: "贸易战博弈里中兴的曙光",
    content:
      "与往常不同的是，这次会谈后双方都极为低调，各自披露的信息非常有限，更多的是语焉不详的框架性描述。从中文媒体的内容来看，基本上是新华社通稿和围绕通稿简短内容的延展性解读，信息量并不大。如果我们阅读外媒的相关报道，能够看到不少有价值的细节信息",
    view_num: "232",
    collect_num: "15468"
  },
  {
    author_img: "/images/Catoon6.jpeg",
    date: "May 8 2018",
    post_img: "/images/Catoon60.jpeg",
    title: "日媒：印度等国欲就美国钢铝进口限制向 WTO 起诉",
    content:
      "海外网 5 月 8 日电 特朗普于 3 月 8 日表示，美国将对进口钢铁产品征收 25%关税、对进口铝产品征收 10%关税。日媒表示，如今，各国对特朗普政府 3 月启动的钢铝进口限制的反对仍未停息。对美钢铁出口额排名第十的印度显示出不排除向世界贸易组织（WTO）起诉的姿态；泰国在与美国的双边磋商中要求给予豁免；俄罗斯已在探讨反制措施。其背景之一是对部分国家很早就得到豁免的不满。",
    view_num: "192",
    collect_num: "9668"
  }
];
module.exports = {
  postList: local_database //渲染到对应 data 中就是 posts_key:[]
};

本篇博客尚未写完，会在后期进行完善。