微信小程序的数据绑定和页面的跳转

数据绑定

• 一、微信小程序的数据绑定方式：
  微信小程序提供了以下两种数据绑定方式：
  • 1、利用初始化数据进行数据绑定：将数据书写在Page({data:{}})中。
    绑定的数据可以在AppData面板中进行查看。
  • 2、使用setData()方法做数据绑定：这也被称为“数据更新”，这样的数据更新将引起页面 的再次渲染。
    （1）该方法的使用需要卸载 onLoad()函数中。
    （2）可以利用一个普通变量来定义一组数据。
    （3）在利用this.setData()方法将普通变量的值赋给键名。
    例：onLoad:function(option){
    var temp={具体的数据};
    this.setData({
    postData:temp
    })
    }
• 二、利用wx:for实现对数据的列表渲染：
  • 1、对列表进行渲染，需要用到<block></block>标签。
  • 2、在<block></block>标签中会用到下列三个wx属性：
    （1）wx:for=“{{postData}}”，设置需要遍历的数组数据的变量名。
    （2）wx:for-item=“item”，设置数据中数组元素的变量名，默认为item。
    （3）wx:for-index=“idx”，设置数据中数组元素的索引值。
    （4）wx:key=“idx”，设置数据中数组元素的索引值。
• 三、将文章数据从业务层中分离：
  1、在项目根目录下新建一个名为data的文件夹。
  2、在该文件夹中新建一个名为data.js的文件。
  3、将数据的定义创建在data.js文件中。
  4、在data.js文件中利用module.exports={}将指定的数据暴露出去。
  5、在需要用到数据的页面js文件中使用 var 变量 = require(“…/…/data/data.js”);引入数据。
• 四、注意：
  <block></block>标记对上无法进行任何事件的注册。

页面的跳转

• 1、为对象绑定catchtap事件。
• 2、在catchtap事件中可以使用以下两个方法实现与页面的跳转：
  （1）wx.redirectTo({
  url:“…/post/post”,
  success:function(){},
  fail:function(){},
  complete:function(){}
  })
  （2）wx.navigateTo({
  url:“…/post/post”,
  success:function(){},
  fail:function(){},
  complete:function(){}
  })
• 3、wx.redirectTo()和wx.navigateTo()的区别：
  （1）wx.redirectTo()将关闭当前页面（执行onUnload函数），跳转到指定页面。
  （2）wx.navigateTo()将保留当前页面（执行onHide函数），跳转到指定页面。
  当从指定页面在返回保留的当前页面时，指定页面会被卸载。
  （3）wx.navigateTo()只允许最多五层父子页面。
  wx.redirectTo()没有这种限制。
• 4、注意：wx.redirectTo()和wx.navigateTo()不能用于带有tab选项卡的页面中。对于带有tab选项卡的页面，只能使用switchTab()来实现页面跳转。