之前長(zhǎng)沙小程序開發(fā)公司智企云給大家介紹了一些小程序開發(fā)的學(xué)習(xí)分享的相關(guān)介紹，今天在此為大家繼續(xù)為大家詳細(xì)講講小程序的頁面和事件，可能概括地不太好，不過大致內(nèi)容就是圍繞著這兩個(gè)方面展開的，主要是按照我們的學(xué)習(xí)路徑來，希望對(duì)大家能有所幫助。

　　頁面配置

　　小程序定義了一個(gè)單例變量App，可以通過getApp()來獲取。這個(gè)App變量就是小程序?qū)嵗x在app.js中。在App實(shí)例的構(gòu)造器中，可以添加小程序生命周期相關(guān)的事件函數(shù)和全局變量。

　　支持的生命周期相關(guān)事件有：

　　onLaunch: function(options) {}: 小程序初始化完成時(shí)觸發(fā)，且整個(gè)生命周期只會(huì)觸發(fā)一次

　　onShow: function(options) {}: 小程序啟動(dòng)或者是從后臺(tái)轉(zhuǎn)為前臺(tái)時(shí)觸發(fā)

　　onHide: function() {}: 小程序從從前臺(tái)轉(zhuǎn)為后臺(tái)時(shí)觸發(fā)

　　onError: function(msg) {}: 腳本錯(cuò)誤或者調(diào)用API出錯(cuò)會(huì)觸發(fā)，msg帶著報(bào)錯(cuò)信息

　　這里說明一下onLaunch和onShow函數(shù)中的options常用的字段：

　　path：字符串，表示打開小程序的頁面路徑

　　query：Object類型，表示打開小程序的頁面參數(shù)，例如打開小程序是指定了url: pages/index/index?id=1&name=John。則query為{id:"1",name:"John"}

　　scene：數(shù)值，表示打開小程序的場(chǎng)景值，詳細(xì)場(chǎng)景值請(qǐng)參考小程序官方文檔

　　referrerInfo：Object類型，當(dāng)場(chǎng)景為由從另一個(gè)小程序或公眾號(hào)或App打開時(shí)，返回此字段

　　referrerInfo.appId：字符串，表示來源小程序或公眾號(hào)或App的 appId

　　referrerInfo.extraData：Object類型，表示來源小程序傳過來的數(shù)據(jù)，scene=1037或1038時(shí)支持

　　有時(shí)候需要定義一些在所有頁面都可以共享的變量，直接在App構(gòu)造器里面增加即可。如下圖，加了一個(gè)testGlobal字段：

　　可以在wxml頁面中直接{{testGlobal}}使用，也可以在js文件中通過getApp().testGlobal訪問。更新數(shù)據(jù)的話可以用getApp().setData({testGlobal: "new value"}, function(){}) 來進(jìn)行，function表示設(shè)置成功的回調(diào)函數(shù)。注意：直接用getApp().testGlobal = "new value"不會(huì)更新數(shù)據(jù)，并且還可以會(huì)產(chǎn)生不可預(yù)期的BUG。

　　說完了 全局的頁面設(shè)置，下面來說一下每個(gè)單獨(dú)的頁面。頁面文件都放在pages文件夾下面，用到的頁面需要在app.json中聲明，如下圖所示

　　如果是用開發(fā)工具自動(dòng)生成的頁面，會(huì)自動(dòng)在這里加上聲明，否則需要自己手動(dòng)加上，不然不會(huì)識(shí)別到新添加的頁面。小程序默認(rèn)聲明的第一個(gè)頁面為主頁，即默認(rèn)打開頁面。

　　每一個(gè)單獨(dú)的頁面分為三個(gè)部分：界面、配置和業(yè)務(wù)邏輯。界面的話由xxx.wxml和xxx.wxss描述(xxx表示頁面命名);配置寫在xxx.json中;業(yè)務(wù)邏輯在xxx.js中實(shí)現(xiàn)。這四個(gè)文件必須放在同一個(gè)文件夾中，通常為了項(xiàng)目結(jié)構(gòu)美觀，建議每個(gè)頁面單獨(dú)放在page下面的一個(gè)文件夾中。xxx.js和xxx.wxml是必須的，其他兩個(gè)文件可選。

　　與App.js類似，頁面的對(duì)象定義在xxx.js中，其中有一個(gè)Page的構(gòu)造器，在里面可以定義頁面的變量和一些生命周期相關(guān)的操作事件。一個(gè)最簡(jiǎn)單的構(gòu)造器如下所示：

　　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() { }})

　　下面詳細(xì)介紹下每一個(gè)字段及其用法

　　data表示頁面數(shù)據(jù)，跟App中的全局變量相比，這個(gè)就是頁面定義的局部變量，只在當(dāng)前頁面中生效?？梢灾苯佑胻his.diyData進(jìn)行訪問，更新的話可以用this.setData({diyData: "new data"})來進(jìn)行更新。切記：千萬不要直接this.diyData="new data"這樣更新。

　　onLoad: 頁面加載時(shí)觸發(fā)，早于onReady和onShow。options里面帶的字段就是轉(zhuǎn)到當(dāng)前頁面的query對(duì)應(yīng)的字段，例如A通過wx.navigateTo函數(shù)轉(zhuǎn)到當(dāng)前頁面，url指定：pages/inexe/index?age=21&name=Cuihua。則options= {age:"21",name:"Cuihua"}

　　onReady: 頁面初次渲染完成

　　onShow: 頁面顯示，觸發(fā)事件早于onReady

　　onHide: 頁面隱藏:

　　onUnload: 頁面卸載:

　　onPullDownRefresh: 監(jiān)聽用戶下拉動(dòng)作。需要在app.json的window選項(xiàng)中或頁面配置page.json中設(shè)置enablePullDownRefresh為true

　　onReachBottomFunction: 頁面上拉觸底事件的處理函數(shù)

　　onShareAppMessage: 用戶點(diǎn)擊右上角轉(zhuǎn)發(fā)。只有定義了此事件處理函數(shù)，右上角菜單才會(huì)顯示“轉(zhuǎn)發(fā)”按鈕，在用戶點(diǎn)擊轉(zhuǎn)發(fā)按鈕的時(shí)候會(huì)調(diào)用，此事件需要return一個(gè)Object，包含title和path兩個(gè)字段，用于自定義轉(zhuǎn)發(fā)內(nèi)容。title表示標(biāo)題，path的話表示要打開的頁面的路徑，如pages/index/index

　　onPageScroll: 頁面滾動(dòng)觸發(fā)事件的處理函數(shù)

　　除了上面這些，還可以在page的構(gòu)造器里面添加任意的字段，通過this.xxx訪問(這么看來感覺page構(gòu)造器里面的data有點(diǎn)多余?大概是為了美觀吧，放在一起 哈哈哈)。

　　頁面跳轉(zhuǎn)

　　這里默認(rèn)大家都知道棧這個(gè)數(shù)據(jù)結(jié)構(gòu)哈(畢竟作為一個(gè)產(chǎn)品經(jīng)理我都是知道的)。

　　頁面之間跳轉(zhuǎn)有三個(gè)方式進(jìn)行：wx.navigateTo({ url: 'page1' })、wx.navigateBack() 和wx.redirectTo({ url: 'page2' }) 。

　　navigateTo指定一個(gè)跳轉(zhuǎn)的頁面，如果用棧頂頁面表示當(dāng)前頁面的話，相當(dāng)于把要跳轉(zhuǎn)的頁面入棧，即[currentPage, targetPage]，棧的大小最大為10。

　　navigateBack返回上一個(gè)頁面，相當(dāng)于棧頂頁面出棧。

　　redirectTo是直接替換當(dāng)前頁面的操作，例如，當(dāng)前棧的狀態(tài)是[A, B, C, D]，然后進(jìn)行wxredirectTo({url:'E'})操作，則操作完之后的狀態(tài)是[A, B, C, E]。注意，因?yàn)闂５拇笮∽疃酁?0，所以在進(jìn)行了10次navigateTo操作后，再要跳轉(zhuǎn)頁面只能用wx.redirectTo了。

　　如果在App里面定義了toolbar(小程序底部Tab頁面，例如微信底部的"微信"，"通訊錄"，"發(fā)現(xiàn)"和"我"四個(gè)Tab頁面)的話，還可以用wx.switchTab({ url: 'pageOther' })進(jìn)行頁面切換，表示切換到pageOther所在的Tab，并且打開pageOther頁面。注意，此時(shí)之前的頁面棧全部清空，即當(dāng)前的頁面棧狀態(tài)為[pageOther]。

　　事件

　　事件表示對(duì)用戶在小程序UI界面上某些操作的響應(yīng)，比如用戶點(diǎn)擊某個(gè)按鈕或者長(zhǎng)按之類的操作，我們可以定義對(duì)應(yīng)的handler函數(shù)，若是有這些用戶操作發(fā)現(xiàn)，就會(huì)調(diào)用我們的handler。

　　例如我們定義一個(gè)點(diǎn)擊事件，點(diǎn)擊之后用命令行打印出"hello, world"

　　Click me! // page.js Page({ tapName: function(event) { console.log("hello, world") }})

　　一般事件定義在組件的尖括號(hào)中，定義一個(gè)bindXxx屬性(也可以用bind:xxx)，表示綁定Xxx事件，值表示handler函數(shù)，需要在對(duì)應(yīng)的js文件中定義。

　　常見的事件有：

　　touchstart：手指觸摸動(dòng)作開始

　　touchmove：手指觸摸后移動(dòng)

　　touchcancel：手指觸摸動(dòng)作被打斷，如來電提醒，彈窗

　　touchend：手指觸摸動(dòng)作結(jié)束

　　tap：手指觸摸后馬上離開

　　longpress：手指觸摸后，超過350ms再離開，如果指定了事件回調(diào)函數(shù)并觸發(fā)了這個(gè)事件，tap事件將不被觸發(fā)

　　longtap手指觸摸后，超過350ms再離開(推薦使用longpress事件代替)

　　transitionend：會(huì)在 WXSS transition 或 wx.createAnimation 動(dòng)畫結(jié)束后觸發(fā)

　　animationstart：會(huì)在一個(gè) WXSS animation 動(dòng)畫開始時(shí)觸發(fā)

　　animationiteration：會(huì)在一個(gè) WXSS animation 一次迭代結(jié)束時(shí)觸發(fā)

　　animationend：會(huì)在一個(gè) WXSS animation 動(dòng)畫完成時(shí)觸發(fā)

　　事件handler函數(shù)傳入的event包括如下字段：

　　type：字符串，表示事件類型

　　timeStamp： 數(shù)值，表示頁面打開到觸發(fā)事件所經(jīng)過的毫秒數(shù)

　　target：Object類型，表示觸發(fā)事件的組件的一些屬性值集合

　　currentTarget：Object類型，表示當(dāng)前組件的一些屬性值集合

　　detail：Object類型額外的信息

　　touches：數(shù)組類型，表示觸摸事件，當(dāng)前停留在屏幕中的觸摸點(diǎn)信息的數(shù)組

　　changedTouches：數(shù)組類型，表示觸摸事件，當(dāng)前變化的觸摸點(diǎn)信息的數(shù)

　　這里的字段建議自己用console.log(event)打印出來自己看看啥意思比較容易理解。

      以上就是長(zhǎng)沙小程序開發(fā)智企云給我們帶來的小程序的頁面和事件方面的學(xué)習(xí)報(bào)道，希望大家對(duì)此能有所了解，繼續(xù)深挖，后續(xù)我們也會(huì)帶來更多關(guān)于小程序開發(fā)的相關(guān)報(bào)道，敬請(qǐng)期待關(guān)注智企云。