页面 Page

Page(Object)

Page(Object) 函数用来注册一个页面。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。

Object 参数说明：

示例代码：

//index.js
Page({
  data: {
    userName: ""
  },
  onLoad: function(e) {
    this.getName();
  },
  onReady: function() {
  },
  onShow: function() {
  },
  onHide: function() {
  },
  onUnload: function() {
  },
  onPullDownRefresh: function() {
  },
  onReachBottom: function() {
  },
  onShareAppMessage: function () {
  },
  onPageScroll: function() {
  },
  onTabItemTap(item) {
    console.log("当前点击的是：",JSON.stringify(item))
  },
  // Event handler.
  getName: function() {
    this.setData({
      userName:"cortana"
    })
  },
  customData: {
    dName: 'cortana'
  }
})

data

data 是页面第一次渲染使用的初始数据。

data 中的数据必须是以下类型：字符串，数字，布尔值，对象，数组。

渲染层可以通过 JXML 对数据进行绑定。

示例代码

<view>{{userName}}}</view>
<view>{{cover[0].url}}</view>

Page({
  data: {
    userName: 'cortana',
    cover: [{url: 'http://xxxxx.jpg',title:"avatar"}, {url: 'http://xxxxx.jpg',title:"detail"}]
  }
})

生命周期回调函数

生命周期的触发以及页面的路由方式详见

onLoad(Object query)

页面加载时触发。一个页面仅会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。

参数说明

onShow()

页面显示/切入前台时触发。

onReady()

页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。

注意：对界面内容进行设置的 API 如 jd.setNavigationBarTitle，请在onReady之后进行。

onHide()

页面隐藏/切入后台时触发。 如 navigateTo 或底部 tab 切换到其他页面，小程序切入后台等。

onUnload()

页面卸载时触发。如 redirectTo 或 navigateBack 到其他页面时。

页面事件处理函数

onPullDownRefresh()

监听用户下拉刷新事件。

onReachBottom()

监听用户上拉触底事件。

onPageScroll(Object)

监听用户滑动页面事件。

参数说明

onShareAppMessage(Object)

监听用户点击页面内分享按钮（<button> 组件 open-type="share"）或右上角菜单“推荐给朋友”按钮的行为，支持自定义转发内容。此事件需要 return 一个 Object，用于配置分享的内容，详见“分享内容配置”

Object 参数说明

分享内容配置

示例代码

Page({
  onShareAppMessage: function (res) {
    console.log(res.target);
    return {
     mpId: '分享的微信小程序appid',//
     title: '分享的标题',
     type: 0,
     desc: '分享的描述、摘要等',
     imageUrl: 'http://pic30.nipic.com/20130619/9885883_210838271000_2.jpg',//
     path: 'page/component/index',
     channel:'Wxfriends,Wxmoments',
     url: 'https://mp.jd.com/develop/index/ao00f99475552b3131',
    }
  }
})

onTabItemTap(Object)

点击顶部、底部 tab 时触发

Object 参数说明：

示例代码

Page({
  onTabItemTap(item) {
    console.log("tabbar点击：",item);
  }
})

组件事件处理函数

Page 中还可以定义组件事件处理函数。在.jxml文件中，组件中加入事件绑定，当事件被触发时，就会执行 Page 中定义的事件处理函数。

示例代码

<view bindtap="getUsername">获取用户名</view>

Page({
  getUsername: function() {
    console.log("点击了获取用户名")
  }
})

Page.route

到当前页面的路径，类型为 String。

示例代码

<view bindtap="getCurrentRoute"> 点击查看当前页面路由 </view>

Page({
  getCurrentRoute: function() {
    console.log("当前页面route为：",this.route)
  }
})

Page.prototype.setData(Object data, Function callback)

setData 函数用于将数据用异步的方式从逻辑层发送到视图层，同时改变对应的 this.data 的值（同步）。

Object 参数说明：

Object 以 key: value 的形式表示，将 this.data 中的 key 对应的值改变成 value。

注意：

1. 直接修改 this.data 无法改变页面的状态的。
2. 仅支持设置可 JSON 化的数据。
3. 单次设置的数据量不宜过大，不能超过 1024k。
4. 请不要手动把 data 中任何一项的 value 设为 undefined 。

<!--index.jxml-->
<view>{{title}}</view>
<button bindtap="changeTitle"> 字符串类型的改变 </button>
<view>{{num}}</view>
<button bindtap="changeNum"> 数值类型的改变</button>
<view>{{array[0].name}}</view>
<button bindtap="changeArray">数组类型的改变 </button>
<view>{{object.name}}</view>
<button bindtap="changeObject">对象类型的改变 </button>

//index.js
Page({
  data: {
    title: '我是title',
    num: 0,
    array: [{name: 'cortana'}],
    object: {
      text: 'init data'
    }
  },
  changeText: function() {
    this.setData({
      title: '新标题'
    })
  },
  changeNum: function() {

    this.setData({
      num: this.data.num +1 
    })
  },
  changeArray: function() {
    this.setData({
      'array[0].name':'Mary'
    })
  },
  changeObject: function(){
    this.setData({
      'object.name': 'Mary'
    });
  }
})