慕课网-微信小程序入门与实战-常用组件API开发技巧项目实战-第4章第二个页面新闻阅读页面-数据绑定概念和基础

数据绑定概念和基础

1.进入目录 pages/posts，修改文件 posts.js，数据绑定

// pages/posts/posts.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    //数据绑定 
    date:'Nov 18 2019'
  },

  data1: {

  },

  process:function() {
    var date = 'Nov 18 2019';

    //页面里使用DOM，但是小程序不能这样写
    var date_ele = document.getElementById('id');
    date_ele.text = date; 
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log("onload");
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    console.log("onready");
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    console.log("onshow");
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    console.log("onhide");
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    console.log("onunload");
  },

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

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

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

  }
})

2.进入目录 pages/posts，修改文件 posts.wxml

<view>
  <swiper indicator-dots="true" autoplay="true" interval="5000">
    <swiper-item><image src="/images/wx.png"></image></swiper-item>
    <swiper-item><image src="/images/vr.png"></image></swiper-item>
    <swiper-item><image src="/images/iqiyi.png"></image></swiper-item>
  </swiper>
  <view class="post-container">
    <view class="post-author-date">
      <image class="post-author" src="/images/avatar/1.png"></image>
      <text class="post-date">{{date}}</text>
    </view>
    <text class="post-title">正是虾肥蟹壮时</text>
    <image class="post-image" src="/images/post/crab.png"></image>
    <text class="post-content">菊黄蟹正肥，品尝秋之味。徐志摩把,“看初花的荻芦”和“到楼外楼吃蟹”,并列为秋天来杭州不能错过的风雅之事；用林妹妹的话讲是“螯封嫩玉双双满，</text>
    <view class="post-like">
      <image class="post-like-image" src="../../images/icon/chat.png"></image>
      <text class="post-like-font">96</text>
      <image class="post-like-image" src="../../images/icon/view.png"></image>
      <text class="post-like-font">112</text>
    </view>
  </view> 
   <view class="post-container">
    <view class="post-author-date">
      <image class="post-author" src="/images/avatar/2.png"></image>
      <text class="post-date">Sep 25 2016</text>
    </view>
    <text class="post-title">比利.林恩的中场故事</text>
    <image class="post-image" src="/images/post/bl.png"></image>
    <text class="post-content">一 “李安是一位绝不会重复自己的导演，本片将极富原创性李安众所瞩目的新片《比利林恩漫长的中场休息》，正式更名《半场无战事》。</text>
    <view class="post-like">
      <image class="post-like-image" src="../../images/icon/chat.png"></image>
      <text class="post-like-font">96</text>
      <image class="post-like-image" src="../../images/icon/view.png"></image>
      <text class="post-like-font">112</text>
    </view>
  </view> 
</view>

3.测试调试

4.进入目录 pages/posts，修改文件 posts.js

// pages/posts/posts.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    date:'Nov 18 2019',
    title:'正是虾肥蟹壮时'
  },

  data1: {

  },

  process:function() {
    var date = 'Nov 18 2019';

    //页面里使用DOM，但是小程序不能这样写
    var date_ele = document.getElementById('id');
    date_ele.text = date; 
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log("onload");
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    console.log("onready");
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    console.log("onshow");
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    console.log("onhide");
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    console.log("onunload");
  },

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

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

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

  }
})

5.进入目录 pages/posts，修改文件 posts.wxml

<view>
  <swiper indicator-dots="true" autoplay="true" interval="5000">
    <swiper-item><image src="/images/wx.png"></image></swiper-item>
    <swiper-item><image src="/images/vr.png"></image></swiper-item>
    <swiper-item><image src="/images/iqiyi.png"></image></swiper-item>
  </swiper>
  <view class="post-container">
    <view class="post-author-date">
      <image class="post-author" src="/images/avatar/1.png"></image>
      <text class="post-date">{{date}}</text>
    </view>
    <text class="post-title">{{title}}</text>
    <image class="post-image" src="/images/post/crab.png"></image>
    <text class="post-content">菊黄蟹正肥，品尝秋之味。徐志摩把,“看初花的荻芦”和“到楼外楼吃蟹”,并列为秋天来杭州不能错过的风雅之事；用林妹妹的话讲是“螯封嫩玉双双满，</text>
    <view class="post-like">
      <image class="post-like-image" src="../../images/icon/chat.png"></image>
      <text class="post-like-font">96</text>
      <image class="post-like-image" src="../../images/icon/view.png"></image>
      <text class="post-like-font">112</text>
    </view>
  </view> 
   <view class="post-container">
    <view class="post-author-date">
      <image class="post-author" src="/images/avatar/2.png"></image>
      <text class="post-date">Sep 25 2016</text>
    </view>
    <text class="post-title">比利.林恩的中场故事</text>
    <image class="post-image" src="/images/post/bl.png"></image>
    <text class="post-content">一 “李安是一位绝不会重复自己的导演，本片将极富原创性李安众所瞩目的新片《比利林恩漫长的中场休息》，正式更名《半场无战事》。</text>
    <view class="post-like">
      <image class="post-like-image" src="../../images/icon/chat.png"></image>
      <text class="post-like-font">96</text>
      <image class="post-like-image" src="../../images/icon/view.png"></image>
      <text class="post-like-font">112</text>
    </view>
  </view> 
</view>

6.测试调试

 

数据绑定分

1）单向数据绑定

　　例如，上例就是单向数据绑定

2）双向数据绑定