>[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> ~~~