這篇打算講詳細講講小程序的頁面和事件。可能概括地不太好，不過大致內容就是圍繞著這兩個方面展開的。主要是按照我的學習路徑來 哈哈哈 -_-||
頁面配置
小程序定義了一個單例變量App，可以通過getApp()來獲取。這個App變量就是小程序實例，定義在app.js中。在App實例的構造器中，可以添加小程序生命週期相關的事件函數和全局變量。
支持的生命週期相關事件有：
- onLaunch: function(options) {}: 小程序初始化完成時觸發，且整個生命週期只會觸發一次
- onShow: function(options) {}: 小程序啟動或者是從後臺轉為前臺時觸發
- onHide: function() {}: 小程序從從前臺轉為後臺時觸發
- onError: function(msg) {}: 腳本錯誤或者調用API出錯會觸發，msg帶著報錯信息
這裡說明一下onLaunch和onShow函數中的options常用的字段：
- path：字符串，表示打開小程序的頁面路徑
- query：Object類型，表示打開小程序的頁面參數，例如打開小程序是指定了url: pages/index/index?id=1&name=John。則query為{id:"1",name:"John"}
- scene：數值，表示打開小程序的場景值，詳細場景值請參考小程序官方文檔
- referrerInfo：Object類型，當場景為由從另一個小程序或公眾號或App打開時，返回此字段
- referrerInfo.appId：字符串，表示來源小程序或公眾號或App的 appId
- referrerInfo.extraData：Object類型，表示來源小程序傳過來的數據，scene=1037或1038時支持
有時候需要定義一些在所有頁面都可以共享的變量，直接在App構造器裡面增加即可。如下圖，加了一個testGlobal字段：
可以在wxml頁面中直接{{testGlobal}}使用，也可以在js文件中通過getApp().testGlobal訪問。更新數據的話可以用getApp().setData({testGlobal: "new value"}, function(){}) 來進行，function表示設置成功的回調函數。注意：直接用getApp().testGlobal = "new value"不會更新數據，並且還可以會產生不可預期的BUG。
說完了 全局的頁面設置，下面來說一下每個單獨的頁面。頁面文件都放在pages文件夾下面，用到的頁面需要在app.json中聲明，如下圖所示
如果是用開發工具自動生成的頁面，會自動在這裡加上聲明，否則需要自己手動加上，不然不會識別到新添加的頁面。小程序默認聲明的第一個頁面為主頁，即默認打開頁面。
每一個單獨的頁面分為三個部分：界面、配置和業務邏輯。界面的話由xxx.wxml和xxx.wxss描述（xxx表示頁面命名）；配置寫在xxx.json中；業務邏輯在xxx.js中實現。這四個文件必須放在同一個文件夾中，通常為了項目結構美觀，建議每個頁面單獨放在page下面的一個文件夾中。xxx.js和xxx.wxml是必須的，其他兩個文件可選。
與App.js類似，頁面的對象定義在xxx.js中，其中有一個Page的構造器，在裡面可以定義頁面的變量和一些生命週期相關的操作事件。一個最簡單的構造器如下所示：
<code>Page({
data: { diyData: "do it yourself" },
onLoad: function(options) { },
onReady: function() { },
onShow: function() { },
onHide: function() { },
onUnload: function() { },
onPullDownRefresh: function() { },
onReachBottom: function() { },
onShareAppMessage: function () { },
onPageScroll: function() { }
})/<code>下面詳細介紹下每一個字段及其用法
data表示頁面數據，跟App中的全局變量相比，這個就是頁面定義的局部變量，只在當前頁面中生效。可以直接用this.diyData進行訪問，更新的話可以用this.setData({diyData: "new data"})來進行更新。
切記：千萬不要直接this.diyData="new data"這樣更新。- onLoad: 頁面加載時觸發，早於onReady和onShow。options裡面帶的字段就是轉到當前頁面的query對應的字段，例如A通過wx.navigateTo函數轉到當前頁面，url指定：pages/inexe/index?age=21&name=Cuihua。則options= {age:"21",name:"Cuihua"}
- onReady: 頁面初次渲染完成
- onShow: 頁面顯示，觸發事件早於onReady
- onHide: 頁面隱藏:
- onUnload: 頁面卸載:
- onPullDownRefresh: 監聽用戶下拉動作。需要在app.json的window選項中或頁面配置page.json中設置enablePullDownRefresh為true
- onReachBottomFunction: 頁面上拉觸底事件的處理函數
- onShareAppMessage: 用戶點擊右上角轉發。只有定義了此事件處理函數，右上角菜單才會顯示“轉發”按鈕，在用戶點擊轉發按鈕的時候會調用，此事件需要return一個Object，包含title和path兩個字段，用於自定義轉發內容。title表示標題，path的話表示要打開的頁面的路徑，如pages/index/index
- onPageScroll: 頁面滾動觸發事件的處理函數
除了上面這些，還可以在page的構造器裡面添加任意的字段，通過this.xxx訪問（這麼看來感覺page構造器裡面的data有點多餘？大概是為了美觀吧，放在一起 哈哈哈）。
頁面跳轉
這裡默認大家都知道棧這個數據結構哈（畢竟作為一個產品經理我都是知道的）。
頁面之間跳轉有三個方式進行：wx.navigateTo({ url: 'page1' })、wx.navigateBack() 和wx.redirectTo({ url: 'page2' }) 。
- navigateTo指定一個跳轉的頁面，如果用棧頂頁面表示當前頁面的話，相當於把要跳轉的頁面入棧，即[currentPage, targetPage]，棧的大小最大為10。
- navigateBack返回上一個頁面，相當於棧頂頁面出棧。
- redirectTo是直接替換當前頁面的操作，例如，當前棧的狀態是[A, B, C, D]，然後進行wxredirectTo({url:'E'})操作，則操作完之後的狀態是[A, B, C, E]。注意，因為棧的大小最多為10，所以在進行了10次navigateTo操作後，再要跳轉頁面只能用wx.redirectTo了。
如果在App裡面定義了toolbar（小程序底部Tab頁面，例如微信底部的"微信"，"通訊錄"，"發現"和"我"四個Tab頁面）的話，還可以用wx.switchTab({ url: 'pageOther' })進行頁面切換，表示切換到pageOther所在的Tab，並且打開pageOther頁面。注意，此時之前的頁面棧全部清空，即當前的頁面棧狀態為[pageOther]。
事件
事件表示對用戶在小程序UI界面上某些操作的響應，比如用戶點擊某個按鈕或者長按之類的操作，我們可以定義對應的handler函數，若是有這些用戶操作發現，就會調用我們的handler。
例如我們定義一個點擊事件，點擊之後用命令行打印出"hello, world"
<code>
<view> Click me! /<view>
// page.js
Page({
tapName: function(event) {
console.log("hello, world")
}
})/<code>
一般事件定義在組件的尖括號中，定義一個bindXxx屬性（也可以用bind:xxx），表示綁定Xxx事件，值表示handler函數，需要在對應的js文件中定義。
常見的事件有：
- touchstart：手指觸摸動作開始
- touchmove：手指觸摸後移動
- touchcancel：手指觸摸動作被打斷，如來電提醒，彈窗
- touchend：手指觸摸動作結束
- tap：手指觸摸後馬上離開
- longpress：手指觸摸後，超過350ms再離開，如果指定了事件回調函數並觸發了這個事件，tap事件將不被觸發
- longtap手指觸摸後，超過350ms再離開（推薦使用longpress事件代替）
- transitionend：會在 WXSS transition 或 wx.createAnimation 動畫結束後觸發
- animationstart：會在一個 WXSS animation 動畫開始時觸發
- animationiteration：會在一個 WXSS animation 一次迭代結束時觸發
- animationend：會在一個 WXSS animation 動畫完成時觸發
事件handler函數傳入的event包括如下字段：
- type：字符串，表示事件類型
- timeStamp： 數值，表示頁面打開到觸發事件所經過的毫秒數
- target：Object類型，表示觸發事件的組件的一些屬性值集合
- currentTarget：Object類型，表示當前組件的一些屬性值集合
- detail：Object類型額外的信息
- touches：數組類型，表示觸摸事件，當前停留在屏幕中的觸摸點信息的數組
- changedTouches：數組類型，表示觸摸事件，當前變化的觸摸點信息的數
這裡的字段建議自己用console.log(event)打印出來自己看看啥意思比較容易理解。
閱讀更多 廣州後生仔 的文章
