>[success] # page 1. 小程序中的每个页面, 都有一个对应的`js`文件, 其中调用[Page](https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html)函数注册页面示例 2. 在注册时, 可以绑定初始化数据、生命周期回调、事件处理函数等 * 在生命周期函数中发送网络请求，从服务器获取数据； * 初始化一些数据，以方便被`wxml`引用展示 * 监听`wxml`中的事件，绑定对应的事件函数 * 其他一些监听（比如页面滚动、上拉刷新、下拉加载更多等） ~~~ Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad(options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady() { }, /** * 生命周期函数--监听页面显示 */ onShow() { }, /** * 生命周期函数--监听页面隐藏 */ onHide() { }, /** * 生命周期函数--监听页面卸载 */ onUnload() { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh() { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom() { }, /** * 用户点击右上角分享 */ onShareAppMessage() { } }) ~~~ >[danger] ##### 简单的综合案例 * index.js ~~~ function getApi(){ return new Promise((res,rej)=>{ setTimeout(()=>{ res(10000) },1000) }) } Page({ // 渲染的data 数据 data:{ buttons:[ {name:"注册页面",path:"/pages/registerPage/index"}, {name:"常见组件",path:"/pages/commonCmp/index"}, ], count:0, }, // 注册事件 onBntClick(event){ const {path} = event.target.dataset.item // 路由页面跳转 wx.navigateTo({ url: path, }) }, // 小程序自带的一些方法钩子 绑定下拉刷新/达到底部/页面滚动 onPullDownRefresh() { console.log("onPullDownRefresh"); }, onReachBottom() { console.log("onReachBottom"); }, onPageScroll(event) { console.log("onPageScroll:", event); }, // 生命周期 /** * 生命周期函数--监听页面加载 */ onLoad(options) { // 异步请求 初始化数据 console.log('onLoad') getApi().then((res)=>{ this.setData({count:res}); }) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady() { console.log("onReady"); }, /** * 生命周期函数--监听页面显示 */ onShow() { console.log("onShow"); }, /** * 生命周期函数--监听页面隐藏 */ onHide() { console.log("onHide"); }, /** * 生命周期函数--监听页面卸载 */ onUnload() { console.log("onUnload"); }, }) ~~~ * index.wxml， 和vue 不同是**bindtap** 作为点击事件，给方法传参使用的是`data-*` 的形式例如`data-item="{{item}}"` ~~~ <!--index.wxml--> <view> <block wx:for="{{buttons}}" wx:key="name"> <!-- bindtap 用来绑定事件 --> <button type="primary" bindtap="onBntClick" data-item="{{item}}"> {{item.name}} </button> </block> {{count}} </view> ~~~