### page页面生命周期
**生命周期函数**
* `onLoad`: 页面加载
一个页面只会调用一次,可以在 onLoad 中获取打开当前页面所调用的 query 参数。
* `onShow`: 页面显示
每次打开页面都会调用一次。
* `onReady`: 页面初次渲染完成
一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。
对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。
* ` onHide`: 页面隐藏
当navigateTo或底部tab切换时调用。
* ` onUnload`: 页面卸载
当redirectTo或navigateBack的时候调用。
> 通过打断点说明生命周期的顺序。
![](https://box.kancloud.cn/2e646c86a46a83056a5521726f73cc76_662x1014.png)
### 数据绑定
` post.js`
~~~javascript
data: {
date:"Nov 07 1992",
title:"正是虾肥蟹壮时"
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log('load');
var post_content1 = {
date: "Sep 18 2016",
title: "正是虾肥蟹壮时",
img:{
imgSrc: "/images/post/crab.png",
avatar: "/images/avatar/1.png"
},
content: "菊黄蟹正肥,品尝秋之味。徐志摩把,“看初花的荻芦”和“到楼外楼吃蟹”,并列为秋天来杭州不能错过的风雅之事;用林妹妹的话讲是“螯封嫩玉双双满,",
reading: "112",
collection: "96",
author: "林白衣",
}
this.setData(post_content1);
},
~~~
~~~html
<view class="post-container">
<view class="post-author-date">
<image class="post-author" src="{{img.avatar}}"></image>
<text class="post-date">{{date}}</text>
</view>
<text class='post-title'>{{title}}</text>
<image class="post-image" src="{{img.imgSrc}}"></image>
<text class="post-content">{{content}}</text>
<view class='post-like'>
<image class='post-like-image' src="../../images/icon/chat.png"></image>
<text class='post-like-font'>{{collection}}</text>
<image class='post-like-image' src="../../images/icon/view.png"></image>
<text class='post-like-font'>{{reading}}</text>
</view>
~~~