微信小程序 - Page()

Page(Object)函数用来注册一个页面

Object参数说明

1.data

页面初始化数据。是页面第一次渲染使用的初始数据。data将会以json字符串的形式由逻辑层传至渲染层，因此data中的数据必须是可以转成JSON的类型：字符串、数字、布尔值、对象、数组。

 

2.onLoad

生命周期回调，监听页面加载。

3.onShow

生命周期回调，监听页面显示。

4.onReady

生命周期回调，监听页面初始渲染完成。

5.onHide

生命周期回调，监听页面隐藏。

6.onUnload

生命周期回调，监听页面卸载。

7.onPullDownRefresh

监听用户下拉动作。

8.onReachBottom

页面上拉触底事件的处理函数。

9.onShareAppMessage

用户点击右上角转发。

10.onPageScroll

页面滚动触发事件的处理函数。

11.onTabItemTap

当前是tab页时，点击tab时触发。

Object内容在加载时会进行一次深拷贝，需要考虑数据大小到页面加载的开销。

WXML

WeiXin Markup Language

1.数据绑定

使用Mustache语法（双大括号）将变量包起来。可以作用于：

（1）内容

 {{ message }} 
Page({
  data: {
    message: 'Hello MINA!'
  }
})

（2）组件属性

 
Page({
  data: {
    id: 0
  }
})

（3）控制属性

 
Page({
  data: {
    condition: true
  }
})

（4）关键字

true：boolean 类型的 true，代表真值。

false： boolean 类型的 false，代表假值。

 
特别注意：不要直接写 checked="false"，其计算结果是一个字符串，转成 boolean 类型后代表真值。

（5）运算

 {{a + b}} + {{c}} + d 
Page({
  data: {
    a: 1,
    b: 2,
    c: 3
  }
})
 
{{"hello" + name}}
{{object.key}} {{array[0]}}
Page({
  data: {
    object: {
      key: 'Hello '
    },
    array: ['MINA']
  }
})

（6）组合

可以在Mustache内直接进行组合，构成新的对象或数组。

 {{item}} 
Page({
  data: {
    zero: 0
  }
})
最终组合成数组[0, 1, 2, 3, 4]。

Page({
  data: {
    a: 1,
    b: 2
  }
})
最终组合成的对象是 {for: 1, bar: 2}

也可以用扩展运算符 ... 来将一个对象展开


Page({
  data: {
    obj1: {
      a: 1,
      b: 2
    },
    obj2: {
      c: 3,
      d: 4
    }
  }
})
最终组合成的对象是 {a: 1, b: 2, c: 3, d: 4, e: 5}。

注意： 花括号和引号之间如果有空格，将最终被解析成为字符串


  {{item}}

等同于


  {{item}}

2.列表渲染

在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item。

使用wx:for-item可以指定数组当前元素的变量名。

使用wx:for-index可以指定数组当前下载的变量名。

  {{idx}}: {{itemName.message}}

 

3.条件渲染

因为wx:if之中的模板也可能包含数据绑定，所以当wx:if的条件值切换时，框架有一个局渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。

同时，wx:if只在第一次变成真的时候才开始渲染，相比之下，hidden就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。

4.模板

可以在模板中定义代码片段，然后在不同的地方调用。

使用is属性，声明城要的使用的模板，然后将模板所需要data传入，